使用 Firebase 和 React 进行用户注册和身份验证

Avatar of Taminoturoko Briggs
Taminoturoko Briggs 于

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用200 美元的免费积分！

识别用户的能力对于维护任何应用程序的安全性至关重要。同样重要的是用于管理用户身份的代码，尤其是在避免应用程序保存的数据的未经授权访问漏洞方面。在没有框架或可用库的情况下编写身份验证代码可能需要大量时间才能正确完成——更不用说自定义代码的持续维护了。

这就是Firebase发挥作用的地方。其现成的直观方法使在网站上设置有效用户身份管理变得轻而易举。本教程将引导我们完成以下操作：实现用户注册、验证和身份验证。

Firebase v9 SDK 引入了一个新的模块化 API 表面，导致其多个服务发生了变化，其中之一是 Firebase 身份验证。本教程针对 v9 中的更改。

查看演示
GitHub 仓库

要跟随本教程，您应该熟悉 React、React hook 和 Firebase 版本 8。您还应该拥有一个 Google 帐户并在您的机器上安装了 Node。

目录

设置 Firebase

在开始使用 Firebase 满足我们的注册和身份验证需求之前，我们必须首先设置我们的 Firebase 项目以及我们正在使用的身份验证方法。

要添加项目，请确保您已登录您的 Google 帐户，然后导航到Firebase 控制台并点击“添加项目”。在此处，为项目命名（我使用“Firebase-user-reg-auth”），然后我们就可以继续了。

您可能会在某些时候被提示启用 Google Analytics。在本教程中不需要它，因此您可以跳过此步骤。

Firebase 具有适用于移动设备和 Web 的各种身份验证方法，但在开始使用任何一种方法之前，我们必须首先在 Firebase 身份验证页面上启用它。从侧边栏菜单中，点击“身份验证”图标，然后在下一页上点击“开始使用”。

我们将使用电子邮件/密码身份验证。点击它，系统将提示您启用它，这正是我们想要做的。

克隆和设置启动仓库

我已经创建了一个简单的模板，我们可以将其用于本教程，以便我们可以专注于学习如何实现这些功能。因此，我们现在需要做的是克隆 GitHub 仓库。

启动您的终端。以下是在命令行中运行的内容

git clone -b starter https://github.com/Tammibriggs/Firebase_user_auth.git

cd Firebase_user_auth

npm install

我还将 Firebase 版本 9 包含在 package.json 文件的依赖项对象中。因此，通过运行 npm install 命令，将安装 Firebase v9——以及所有其他依赖项。

完成此操作后，让我们使用 npm start 启动应用程序！

将 Firebase 集成到我们的 React 应用程序中

要集成 Firebase，我们需要首先获取 Web 配置对象，然后使用它在我们的 React 应用程序中初始化 Firebase。转到 Firebase 项目页面，我们将看到一组类似于此的图标选项

点击 Web (</>) 图标以配置我们用于 Web 的 Firebase 项目，我们将看到如下页面

输入 firebase-user-auth 作为 Web 应用程序的名称。之后，点击“注册应用程序”按钮，这将带我们进入下一步，在这里提供我们的 firebaseConfig 对象。

将配置复制到剪贴板，因为我们稍后将需要它来初始化 Firebase。然后点击“继续到控制台”按钮以完成该过程。

现在，让我们初始化 Firebase 和 Firebase 身份验证，以便我们可以在应用程序中开始使用它们。在 React 应用程序的 src 目录中，创建一个 firebase.js 文件并添加以下导入

// src/firebase.js
import { initializeApp } from 'firebase/app'
import {getAuth} from 'firebase/auth'

现在，在导入之后粘贴我们之前复制的配置，并添加以下代码行以初始化 Firebase 和 Firebase 身份验证。

// src/firebase.js
const app = initializeApp(firebaseConfig)
const auth = getAuth(app)

export {auth}

我们的 firebase.js 文件现在应该如下所示

// src.firebase.js
import { initializeApp } from "firebase/app"
import { getAuth } from "firebase/auth"

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN",
  projectId: "PROJECT_ID",
  storageBucket: "STORAGE_BUCKET",
  messagingSenderId: "MESSAGING_SENDER_ID",
  appId: "APP_ID"
}

// Initialize Firebase and Firebase Authentication
const app = initializeApp(firebaseConfig)
const auth = getAuth(app)
export {auth}

接下来，我们将介绍如何使用 Firebase 提供的现成函数向我们克隆的模板添加注册、电子邮件验证和登录功能。

创建用户注册功能

在 Firebase 版本 9 中，我们可以使用 createUserWithEmailAndPassword 函数构建用户注册功能。此函数接受三个参数

  • auth 实例/服务
  • 电子邮件
  • 密码

在版本 9 中，服务始终作为第一个参数传递。在我们的例子中，它是 auth 服务。

要创建此功能，我们将使用克隆模板的 src 目录中的 Register.js 文件。我在此文件中创建了三个表单字段——电子邮件、密码和确认密码——并且输入由状态控制。现在，让我们开始吧。

让我们首先添加一个函数来验证密码和确认密码输入，检查它们是否不为空且相同：在 Register 组件中的状态之后添加以下代码行

// src/Register.js
// ...

const validatePassword = () => {
  let isValid = true
  if (password !== '' && confirmPassword !== ''){
    if (password !== confirmPassword) {
      isValid = false
      setError('Passwords does not match')
    }
  }
  return isValid
}

// ...

在上面的函数中，我们返回一个 isValid 变量，它可以根据密码的有效性返回 true 或 false。稍后，我们将使用此变量的值创建一个条件，其中负责注册用户的 Firebase 函数仅在 isValid 为 true 时才会被调用。

要创建注册功能，让我们首先将必要的导入添加到 Register.js 文件中

// src/Register.js
import {auth} from './firebase'
import {createUserWithEmailAndPassword} from 'firebase/auth'

现在，在 validatePassword 密码函数之后添加以下代码行

// src/Register.js
// ...

const register = e => {
  e.preventDefault()
  setError('')
  if(validatePassword()) {
    // Create a new user with email and password using firebase
      createUserWithEmailAndPassword(auth, email, password)
      .then((res) => {
          console.log(res.user)
        })
      .catch(err => setError(err.message))
  }
  setEmail('')
  setPassword('')
  setConfirmPassword('')
}

// ...

在上面的函数中，我们设置了一个条件，仅当 validatePassword 返回的值为 true 时才调用 createUserWithEmailAndPassword 函数。

为了使它开始工作，让我们在提交表单时调用 register 函数。我们可以通过向表单添加 onSubmit 事件来做到这一点。修改 registration_form 的开始标签使其如下所示

// src/Register.js
<form onSubmit={register} name='registration_form'>

有了这个，我们现在可以在我们的网站上注册新用户了。通过在浏览器中转到 https://:3000/register、填写表单，然后点击“注册”按钮来测试它。

Showing a user registration form with fields to enter an email. a password, and password confirmation. A gray button labeled Register is below the three stacked fields.

点击“注册”按钮后，如果我们打开浏览器的控制台，我们将看到新注册用户的详细信息。

使用 React Context API 管理用户状态

Context API 是一种与 React 组件树中任何级别的组件共享数据的方法 而无需将其作为 props 传递。由于用户可能需要树中的不同组件，因此使用 Context API 非常适合管理用户状态。

在开始使用 Context API 之前，我们需要设置一些东西

  • 使用 createContext() 方法创建一个上下文对象
  • 将我们希望与之共享用户状态的组件作为 Context.Provider 的子级传递
  • 将我们希望子级/使用组件访问的值作为 props 传递给 Context.Provider

让我们开始吧。在 src 目录中，创建一个 AuthContext.js 文件，并向其中添加以下代码行

// src/AuthContext.js
import React, {useContext} from 'react'

const AuthContext = React.createContext()

export function AuthProvider({children, value}) {
  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  )
}

export function useAuthValue(){
  return useContext(AuthContext)
}

在上面的代码中，我们创建了一个名为 AuthContext 的上下文，除此之外，我们还创建了另外两个函数，使我们能够轻松使用 Context API，即 AuthProvider 和 useAuthValue。

AuthProvider 函数允许我们将用户状态的值共享给 AuthContext.Provider 的所有子组件，而 useAuthValue 允许我们轻松访问传递给 AuthContext.Provider 的值。

现在，要向 AuthProvider 提供 children 和 value 属性，请修改 App.js 文件，使其看起来像这样

// src/App.js
// ...
import {useState} from 'react'
import {AuthProvider} from './AuthContext'

function App() {
  const [currentUser, setCurrentUser] = useState(null)

  return (
    <Router>
      <AuthProvider value={{currentUser}}>
        <Switch>
         ...
        </Switch>
      </AuthProvider>
    </Router>
  );
}

export default App;

在这里，我们将 AuthProvider 包裹在 App 渲染的组件周围。这样，提供给 AuthProvider 的 currentUser 值就可以被我们应用程序中的所有组件使用，除了 App 组件。

关于设置 Context API 就这么多！要使用它，我们必须导入 useAuthValue 函数并在 AuthProvider 的任何子组件（例如 Login）中调用它。代码如下所示

import { useAuthValue } from "./AuthContext"

function childOfAuthProvider(){
  const {currentUser} = useAuthValue()
  console.log(currentUser)

  return ...
}

现在，currentUser 将始终为 null，因为我们没有将其值设置为任何内容。要设置其值，我们需要首先从 Firebase 获取当前用户，这可以通过使用在 firebase.js 文件中初始化的 auth 实例（auth.currentUser）或 onAuthStateChanged 函数来完成，实际上，后者是获取当前用户的推荐方式。这样，我们确保在获取当前用户时，Auth 对象不会处于中间状态（例如初始化）。

在 App.js 文件中，添加 useEffect 导入以及 useState，并添加以下导入

// src/App.js
import {useState, useEffect} from 'react'
import {auth} from './firebase'
import {onAuthStateChanged} from 'firebase/auth'

现在，在 App 组件中的 currentUser 状态之后添加以下代码行

// src/App.js
// ...

useEffect(() => {
  onAuthStateChanged(auth, (user) => {
    setCurrentUser(user)
   })
}, [])

// ...

在上面的代码中，我们在组件渲染时获取当前用户并将其设置到状态中。现在，当我们注册用户时，currentUser 状态将设置为包含用户信息的对象。

向已注册用户发送验证邮件

用户注册后，我们希望他们在能够访问我们网站的主页之前验证其电子邮件地址。我们可以使用 sendEmailVerification 函数来实现这一点。它只接受一个参数，即当前已注册用户的对象。调用后，Firebase 会向已注册用户的电子邮件地址发送一封电子邮件，其中包含一个链接，用户可以通过该链接验证其电子邮件。

让我们转到 Register.js 文件并修改 Link 和 createUserWithEmailAndPassword 导入，使其看起来像这样

// src/Register.js
import {useHistory, Link} from 'react-router-dom'
import {createUserWithEmailAndPassword, sendEmailVerification} from 'firebase/auth'

在上面的代码中，我们还导入了 useHistory 钩子。这将帮助我们访问和操作浏览器的历史记录，简而言之，这意味着我们可以使用它在应用程序中的页面之间切换。但在我们可以使用它之前，我们需要调用它，所以让我们在 error 状态之后添加以下代码行

// src/Register.js
// ...
const history = useHistory()

// ...

现在，修改 createUserWithEmailAndPassword 函数的 .then 方法，使其看起来像这样

// src/Register.js
// ...
.then(() => {
  sendEmailVerification(auth.currentUser)
  .then(() => {
    history.push('/verify-email')
  }).catch((err) => alert(err.message))
})
// ...

这里发生的事情是，当用户注册一个有效的电子邮件地址时，系统会向他们发送一封验证邮件，然后将他们带到 **verify-email** 页面。

在这个页面上，我们需要做几件事

  • 在“已发送验证邮件至：”部分之后显示用户的电子邮件。
  • 使“重新发送邮件”按钮正常工作
  • 创建禁用“重新发送邮件”按钮的功能，使其在单击后 60 秒内保持禁用状态
  • 电子邮件验证后，将用户带到其个人资料页面

我们将从显示已注册用户的电子邮件开始。这需要使用我们之前创建的 AuthContext。在 VerifyEmail.js 文件中，添加以下导入

// src/VerifyEmail.js
import {useAuthValue} from './AuthContext'

然后，在 VerifyEmail 组件的 return 语句之前添加以下代码

// src/VerifyEmail.js
const {currentUser} = useAuthValue()

现在，要显示电子邮件，请在 return 语句中的 <br/> 标记之后添加以下代码。

// src/VerifyEmail.js
// ...
<span>{currentUser?.email}</span>
// ...

在上面的代码中，我们使用可选链来获取用户的电子邮件，以便当电子邮件为空时，我们的代码不会抛出任何错误。

现在，当我们刷新 **verify-email** 页面时，应该会看到已注册用户的电子邮件。

让我们继续下一件事，即使“重新发送邮件”按钮正常工作。首先，让我们进行必要的导入。将以下导入添加到 VerifyEmail.js 文件

// src/VerifyEmail.js
import {useState} from 'react'
import {auth} from './firebase'
import {sendEmailVerification} from 'firebase/auth'

现在，让我们添加一个状态，该状态将负责根据是否已发送验证邮件来禁用和启用“重新发送邮件”按钮。此代码位于 VerifyEmail 组件中的 currentUser 之后

// src/VerifyEmail.js
const [buttonDisabled, setButtonDisabled] = useState(false)

对于处理重新发送验证邮件和禁用/启用按钮的函数，我们需要在 buttonDisabled 状态之后添加它

// src/VerifyEmail.js
// ...

const resendEmailVerification = () => {
  setButtonDisabled(true)
  sendEmailVerification(auth.currentUser)
  .then(() => {
    setButtonDisabled(false)
  }).catch((err) => {
    alert(err.message)
    setButtonDisabled(false)
  })
}

// ...

接下来，在 return 语句中，修改“重新发送邮件”按钮，使其如下所示

// ...
<button 
  onClick={resendEmailVerification}
  disabled={buttonDisabled}
  >Resend Email</button>
// ...

现在，如果我们转到 verify-email 页面并单击该按钮，系统将向我们发送另一封电子邮件。但是我们创建此功能的方式存在问题，因为如果我们尝试在不到一分钟的时间内再次单击该按钮，我们会收到来自 Firebase 的错误，提示我们发送了太多请求。这是因为 Firebase 在能够向同一地址发送另一封电子邮件之前有一分钟的间隔。这是我们需要解决的下一件事。

我们需要做的是在发送验证邮件后使按钮保持禁用状态 60 秒（或更长时间）。我们可以通过在“重新发送邮件”按钮中显示倒计时计时器来稍微增强用户体验，让用户知道该按钮只是暂时禁用的。

在 VerifyEmail.js 文件中，添加 useEffect 导入

import {useState, useEffect} from 'react'

接下来，在 buttonDisabled 状态之后添加以下内容

// src/VerifyEmail.js
const [time, setTime] = useState(60)
const [timeActive, setTimeActive] = useState(false)

在上面的代码中，我们创建了一个 time 状态，它将用于 60 秒倒计时，以及一个 timeActive 状态，它将用于控制倒计时何时开始。

在刚刚创建的状态之后添加以下代码行

// src/VerifyEmail.js
// ...

useEffect(() => {
  let interval = null
  if(timeActive && time !== 0 ){
    interval = setInterval(() => {
      setTime((time) => time - 1)
    }, 1000)
  }else if(time === 0){
    setTimeActive(false)
    setTime(60)
    clearInterval(interval)
  }
  return () => clearInterval(interval);
}, [timeActive, time])

// ...

在上面的代码中，我们创建了一个 useEffect 钩子，它仅在 timeActive 或 time 状态发生变化时运行。在此钩子中，我们使用 setInterval 方法每秒将 time 状态的前一个值减少 1，然后当 time 状态的值等于 0 时，我们停止 time 状态的递减。

由于 useEffect 钩子依赖于 timeActive 和 time 状态，因此在倒计时开始之前，这两个状态之一必须发生变化。更改 time 状态不可取，因为倒计时必须仅在发送验证邮件后才开始。因此，我们需要更改 timeActive 状态。

在 resendEmailVerification 函数中，修改 sendEmailVerification 的 .then 方法，使其如下所示

// src/VerifyEmail.js
// ...
.then(() => {
  setButtonDisabled(false)
  setTimeActive(true)
})
// ...

现在，当发送电子邮件时，timeActive 状态将更改为 **true**，并且倒计时将开始。在上面的代码中，我们需要更改禁用按钮的方式，因为当倒计时处于活动状态时，我们需要禁用按钮。

我们很快就会做到这一点，但现在，让我们使倒计时计时器对用户可见。修改“重新发送邮件”按钮，使其如下所示

// src/VerifyEmail.js
<button 
  onClick={resendEmailVerification}
  disabled={buttonDisabled}
>Resend Email {timeActive && time}</button>

要使按钮在倒计时处于活动状态时保持禁用状态，让我们修改按钮的 disabled 属性，使其如下所示

disabled={timeActive}

这样，在发送验证邮件时，按钮将被禁用一分钟。现在，我们可以继续从代码中删除 buttonDisabled 状态。

尽管此功能有效，但我们实现方式仍然存在一个问题：当用户注册并在尚未收到电子邮件时被带到 **verify-email** 页面时，他们可能会尝试单击“重新发送邮件”按钮，如果他们在不到一分钟的时间内这样做，Firebase 会再次出错，因为我们发送了太多请求。

要解决此问题，我们需要在向新注册的用户发送电子邮件之后使“重新发送邮件”按钮禁用 60 秒。这意味着我们需要一种方法来在 Register 组件中更改 timeActive 状态。我们也可以为此使用 Context API。它将允许我们全局操作和访问 timeActive 状态。

让我们对代码进行一些修改以使事情正常工作。在 VerifyEmail 组件中，剪切 timeActive 状态并将其粘贴到 currentUser 状态之后的 App 组件中。

// src/App.js
function App() {
  // ...
  const [timeActive, setTimeActive] = useState(false)

  // ...

接下来，将 timeActive 和 setTimeActive 放入 AuthProvider value 属性的对象中。它应该如下所示

// src/App.js
// ...
<AuthProvider value={{currentUser, timeActive, setTimeActive}}>
// ...

现在，我们可以在 AuthProvider 的子组件中访问 timeActive 和 setTimeActive。要修复代码中的错误，请转到 VerifyEmail.js 文件并从 useAuthProvider 中解构 timeActive 和 setTimeActive

// src/VerifyEmail.js
const {timeActive, setTimeActive} = useAuthValue()

现在，要更改在已向已注册用户发送验证电子邮件后 timeActive 状态，请在 Register.js 文件中添加以下导入

// src/Register.js
import {useAuthValue} from './AuthContext'

接下来，使用此代码段在 Register 组件中的其他状态之间从 useAuthValue 中解构 setTimeActive

// src/Register.js
const {setTimeActive} = useAuthValue()

最后，在 register 函数中，使用 sendEmailVerification 的 .then 方法设置 timeActive 状态

// src/Register.js
// ...
.then(() => {
  setTimeActive(true)
  history.push('/verify-email')
})
// ...

这样，用户就可以发送验证电子邮件，而不会收到来自 Firebase 的任何错误。

关于用户验证要解决的最后一件事是在用户验证其电子邮件后将其带到其个人资料页面。为此，我们将在 currentUser 对象中使用 reload 函数。它允许我们重新加载来自 Firebase 的用户对象，这样我们就会知道何时发生更改。

首先，让我们进行必要的导入。在 VerifyEmail.js 文件中，让我们添加以下内容

// src/VerifyEmail.js
import {useHistory} from 'react-router-dom'

我们正在导入 useHistory，以便我们可以使用它将用户导航到个人资料页面。接下来，在状态之后添加以下代码行

// src/VerifyEmail.js
const history = useHistory()

最后，在 history 变量之后添加以下代码行

// src/VerifyEmail.js
// ...

useEffect(() => {
  const interval = setInterval(() => {
    currentUser?.reload()
    .then(() => {
      if(currentUser?.emailVerified){
        clearInterval(interval)
        history.push('/')
      }
    })
    .catch((err) => {
      alert(err.message)
    })
  }, 1000)
}, [history, currentUser])

// ...

在上面的代码中，我们每秒运行一次 reload 函数，直到用户的电子邮件已验证，如果已验证，我们将用户导航到其个人资料页面。

要测试此功能，让我们按照 Firebase 发送的电子邮件中的说明验证我们的电子邮件。如果一切正常，我们将自动被带到我们的个人资料页面。

现在，个人资料页面没有显示任何用户数据，并且“注销”链接不起作用。这是你的下一个任务。

处理用户个人资料页面

让我们首先显示“电子邮件”和“电子邮件已验证”值。为此，我们将使用 AuthContext 中的 currentUser 状态。我们需要做的是导入 useAuthValue，从中解构 currentUser，然后从用户对象中显示“电子邮件”和“电子邮件已验证”值。

以下是 Profile.js 文件应有的样子

// src/Profile.js
import './profile.css'
import {useAuthValue} from './AuthContext'

function Profile() {
  const {currentUser} = useAuthValue()

  return (
    <div className='center'>
      <div className='profile'>
        <h1>Profile</h1>
        <p><strong>Email: </strong>{currentUser?.email}</p>
        <p>
          <strong>Email verified: </strong>
          {`${currentUser?.emailVerified}`}
        </p>
        <span>Sign Out</span>
      </div>
    </div>
  )
}

export default Profile

这样，“电子邮件”和“电子邮件已验证”值现在应该会显示在我们的个人资料页面上。

为了使**退出**功能正常工作，我们将使用signOut函数。它只接受一个参数，即auth实例。因此，在Profile.js中，让我们添加这些导入。

// src/Profile.js
import { signOut } from 'firebase/auth' 
import { auth } from './firebase'

现在，在return语句中，修改包含“Sign Out”的<span>，以便在点击时调用signOut函数。

// src/Profile.js
// ...
<span onClick={() => signOut(auth)}>Sign Out</span>
// ...

为Profile组件创建私有路由

现在，即使电子邮件地址未经验证，用户也可以访问个人资料页面。我们不希望这样。未经验证的用户在尝试访问个人资料时应重定向到登录页面。这就是私有路由的用武之地。

在src目录中，让我们创建一个新的PrivateRoute.js文件，并向其中添加以下代码。

// src/PrivateRoute.js
import {Route, Redirect} from 'react-router-dom'
import {useAuthValue} from './AuthContext'

export default function PrivateRoute({component:Component, ...rest}) {
  const {currentUser} = useAuthValue()

  return (
    <Route
      {...rest}
      render={props => {
        return currentUser?.emailVerified ? <Component {...props} /> : <Redirect to='/login' />
    }}>
    </Route>
  )
}

此PrivateRoute与使用Route几乎相同。不同之处在于我们使用render属性在用户的电子邮件未经验证时将其重定向到个人资料页面。

我们希望个人资料页面是私有的，因此我们将导入PrivateRoute。

// src/App.js
import PrivateRoute from './PrivateRoute'

然后，我们可以在Profile组件中用PrivateRoute替换Route。Profile路由现在应如下所示。

// src/App.js
<PrivateRoute exact path="/" component={Profile} />

不错！我们已使个人资料页面仅对电子邮件已验证的用户可访问。

创建登录功能

由于只有电子邮件已验证的用户才能在使用signInWithEmailAndPassword函数登录时访问其个人资料页面，因此我们还需要检查其电子邮件是否已验证，如果未验证，则应将用户重定向到**验证电子邮件**页面，并且六十秒倒计时也应开始。

这些是我们需要添加到Login.js文件中的导入。

import {signInWithEmailAndPassword, sendEmailVerification} from 'firebase/auth'
import {auth} from './firebase'
import {useHistory} from 'react-router-dom'
import {useAuthValue} from './AuthContext'

接下来，在Login组件中的状态之间添加以下代码行。

// src/Login.js
const {setTimeActive} = useAuthValue()
const history = useHistory()

然后在history变量之后添加以下函数。

// src/Login.js
// ...

const login = e => {
  e.preventDefault()
  signInWithEmailAndPassword(auth, email, password)
  .then(() => {
    if(!auth.currentUser.emailVerified) {
      sendEmailVerification(auth.currentUser)
      .then(() => {
        setTimeActive(true)
        history.push('/verify-email')
      })
    .catch(err => alert(err.message))
  }else{
    history.push('/')
  }
  })
  .catch(err => setError(err.message))
}

// ...

这将登录用户，然后检查他们是否已验证。如果已验证，我们将他们导航到其个人资料页面。但如果他们未经验证，我们将发送验证电子邮件，然后将其重定向到**验证电子邮件**页面。

要使此功能正常工作，我们只需在提交表单时调用login函数即可。因此，让我们将login_form的开始标签修改为以下内容。

// src/Login.js
<form onSubmit={login} name='login_form'>

并且，嘿，我们完成了！

结论

在本教程中，我们学习了如何使用 Firebase Authentication 版本 9 在 React 中构建功能齐全的用户注册和身份验证服务。它超级容易吗？不，我们需要处理一些事情。但它是否比从头开始构建我们自己的服务容易得多？当然！我希望你能从阅读本文中获得这一点。

参考文献

嘘！创建一个 DigitalOcean 帐户，并获得$200 的免费信用额度用于基于云的托管和服务。

评论

  1. Lennart
    评论永久链接#

    不错，但我建议改为使用 Google、Facebook 等方式进行授权。Firebase 对此提供了良好的支持。

    回复
  2. Jacob
    评论永久链接#

    这在 React Router V6 中是否可用？还没有尝试过代码，但我知道 V6 版本发生了很多变化。

    回复
    • Taminoturoko Briggs
      评论永久链接#

      不，不是。我使用了 React Router V5。

  3. M
    评论永久链接#

    是否在手动刷新页面后，在登录后会再次提示您登录？在遵循本教程时我遇到了类似的问题，我相信这与在 React Context 中首次传播时用户为空，然后在填充之前重定向已经发生有关。

    回复
    • Taminoturoko Briggs
      评论永久链接#

      嗨，M，在文章中，我没有添加登录用户即使在浏览器刷新后也会重定向到个人资料页面的功能，但如果您想这样做，可以使用三元运算符或 if 语句根据用户的状态有条件地渲染注册和登录页面，例如：

      {
      !currentUser?.emailVerified
      ?
      : }

      我已经用此功能更新了存储库的主分支，因此您可以查看我确切是如何做到的。

  4. usman
    评论永久链接#

    很棒的教程，
    @Taminoturoko Briggs，我完全按照你写的代码操作，我还克隆了你的存储库，但我遇到的问题是，在我传递了自己的 Firebase 项目配置后，我没有在提供的电子邮件上收到电子邮件验证邮件。请告诉我问题出在哪里。

    回复
    • J
      评论永久链接#

      检查你的垃圾邮件文件夹，我在那里找到了它。

  5. react
    评论永久链接#

    下面 {children} 的作用是什么？children 参数从未从任何地方提取，所以它不是空白且什么也不做吗？

    export function AuthProvider({children, value}) {
    return (
    <AuthContext.Provider value={value}>
    {children}
    </AuthContext.Provider>
    )
    }

    回复
    • react
      评论永久链接#

      例如，下面是否会做完全相同的事情？

      export function AuthProvider() {
      return (
      <AuthContext.Provider value={value}>

      </AuthContext.Provider>
      )
      }

  6. Amna
    评论永久链接#

    很棒的文章。我非常喜欢它。上面的代码适用于 react-router-dom 版本 5，但 git 存储库已更新为版本 6。

    回复
  7. Ben
    评论永久链接#

    当开发服务器启动时，我看到了个人资料页面而不是表单，尽管我还没有创建帐户或登录！

    回复
  8. Mihkel
    评论永久链接#

    非常感谢你！一直在寻找 getUserAuth 状态，而你的状态是唯一有效的！

    回复
  9. Aurel
    评论永久链接#

    非常棒且有用的教程，你能否解释一下如何修改注销后的重定向？
    感谢你，也感谢你的教程 :)

    回复

发表回复

Your email address will not be published. Required fields are marked *

© 2024 . All rights reserved.