前言
谈到 web 开发，我们不得不提到的一些东西，其中之一就是用户身份验证。而 @firebase/auth 就是一个非常方便的用来完成身份验证的 npm 包。它基于 firebase 平台，并且提供了很多易于使用且安全的功能，可以让您在您的 web 应用程序中轻松地集成身份验证。本文将向您展示如何使用 @firebase/auth 完成用户身份验证。
安装
首先，我们需要通过 npm 安装 @firebase/auth。
npm install firebase @firebase/auth --save
集成和配置
要使用 @firebase/auth 包，您需要在您的项目中先集成 Firebase SDK。方法是在您的项目的 HTML 文件中添加以下 JavaScript 代码：
<!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js"></script> <!-- Add Firebase products that you want to use --> <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-auth.js"></script>
然后，在您的应用程序中，您需要在初始化 Firebase app 后，使用以下的 JavaScript 代码来初始化 @firebase/auth：
-- -------------------- ---- ------- ------ -------- ---- ---------- ------ --------------- -- --- -------- --- ------------------------ -- ---- -- -- --- -------------- ----- ---- - ---------------
firebase.initializeApp 接受一个参数对象，其中包括一些配置选项。详细的配置选项可以参考官方文档。
身份验证
现在您已经准备好使用 @firebase/auth 了。要完成身份验证，您需要使用以下语句中的一个或多个方法：
createUserWithEmailAndPassword(email, password)- 用指定的邮箱和密码创建一个新账户。如果成功，会自动登陆并返回一个用户对象。signInWithEmailAndPassword(email, password)- 使用指定的邮箱和密码登陆。如果成功，会返回一个用户对象。signInWithPopup(provider)- 使用弹出窗口的方式通过指定的 provider（比如 Google，Facebook）登陆。如果成功，会返回一个用户对象。signOut()- 退出登录状态。
例如，以下是一个简单的登陆表单，该表单将用户名和密码传递给 signInWithEmailAndPassword 方法，以进行身份验证：
-- -------------------- ---- -------
---- ---- ---
------
-------
---
------ ------------ ------------ ---------
--------
----
-------
---
------ --------------- --------------- ---------
--------
----
------- -------------------------
--------- -------------------- ---- -------
-- -- --
----- ---- - ------------------------------
----- ----- - ----------------
----- -------- - -------------------
-------------------------------------- ---------
---------- -- -
-----------------
--
------------ -- -
--------------------
--上述代码会把获取到的用户名和密码以及引入 @firebase/auth 的实例 auth 的方法 signInWithEmailAndPassword 来进行身份认证操作。该方法返回 Promise，成功则返回用户对象，失败则返回错误信息。
监听身份验证状态的变化
有时您需要在身份验证状态更改时执行某些操作。例如，当一个用户首次登陆应用程序时，您可能需要将其自动重定向到应用程序的首页。为此，我们可以使用 onAuthStateChanged 方法来监听身份验证状态的变化。
auth.onAuthStateChanged(user => {
if (user) {
console.log('用户已登录')
} else {
console.log('用户已注销')
}
})确认电子邮件/更改密码
@firebase/auth 还支持确认电子邮件和更改密码等功能，可通过 currentUser 对象来完成。例如，以下是一个更改密码的示例：
-- -------------------- ---- -------
----- ----------- - --------
--------------------------------------------
-------- -- -
--------------------
--
------------ -- -
--------------------
--结语
在本文中，我们介绍了如何使用 @firebase/auth 实现用户身份验证。我们讨论了如何集成和配置 @firebase/auth、如何执行身份验证、如何监听身份验证状态的变化以及如何执行其他任务，例如确认电子邮件和更改密码。希望这篇文章能对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc14bb5cbfe1ea0611d56