使用基于密码的帐号进行 Firebase 身份验证 (JavaScript)

借助 Firebase 身份验证,您可以让您的用户使用其电子邮件地址和密码进行 Firebase 身份验证,还可以管理您的应用的基于密码的帐号。

准备工作

  1. 将 Firebase 添加至您的 JavaScript 项目
  2. 如果您尚未将应用关联至您的 Firebase 项目,请在 Firebase 控制台中进行关联。
  3. 启用电子邮件地址/密码登录方法:
    1. Firebase 控制台中,打开 Auth 部分。
    2. 登录方法标签页中,启用电子邮件地址/密码登录方法,然后点击保存

创建基于密码的帐号

如需创建使用密码的新用户帐号,请在您的应用的登录页面中完成以下步骤:

  1. 在新用户使用您的应用注册表单注册时,完成您的应用要求的所有新帐号验证步骤,例如验证新帐号的密码是否输入正确并且符合您的密码复杂度要求。
  2. 将新用户的电子邮件地址和密码传递给 createUserWithEmailAndPassword 方法,以创建一个新帐号:

    Web 模块化 API

    import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
    
    const auth = getAuth();
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in 
        const user = userCredential.user;
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ..
      });

    Web 命名空间型 API

    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // Signed in 
        var user = userCredential.user;
        // ...
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        // ..
      });
    创建新帐号后,用户会自动登录。查看下面的“后续步骤”部分,了解如何获取有关已登录用户的详细信息。

    您还可以在此处捕获并处理错误。如需获取错误代码列表,请参阅身份验证参考文档

让用户使用电子邮件地址和密码登录

让用户使用密码登录的步骤与创建新帐号的步骤类似。在您的应用的登录页面中,执行以下操作:

  1. 在用户登录您的应用时,将该用户的电子邮件地址和密码传递给 signInWithEmailAndPassword

    Web 模块化 API

    import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
    
    const auth = getAuth();
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in 
        const user = userCredential.user;
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
      });

    Web 命名空间型 API

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // Signed in
        var user = userCredential.user;
        // ...
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
      });
    查看下面的“后续步骤”部分,了解如何获取有关已登录用户的详细信息。

    您还可以在此处捕获并处理错误。如需获取错误代码列表,请参阅身份验证参考文档

推荐做法:启用电子邮件枚举保护

如果您必须注册一个电子邮件地址(例如,当使用电子邮件地址和密码登录时)但未注册,或者如果电子邮件地址不应该被使用(例如,当更改用户的电子邮件地址时)但已注册,一些将电子邮件地址作为参数的 Firebase Authentication 方法会抛出具体的错误。 虽然这对于向用户建议具体的补救措施非常有用,但恶意操作者也可能会滥用该功能,以发现用户注册的电子邮件地址。

为了降低这种风险,我们建议您使用 Google Cloud gcloud 工具为您的项目启用电子邮件枚举保护。请注意,启用此功能会更改 Firebase Authentication 的错误报告行为:请确保您的应用不依赖于更具体的错误。

后续步骤

在用户首次登录后,系统会创建一个新的用户帐号,并将其与该用户登录时使用的凭据(即用户名和密码、电话号码或者身份验证提供方信息)相关联。此新帐号存储在您的 Firebase 项目中,无论用户采用何种方式登录,您项目中的每个应用都可以使用此帐号来识别用户。

  • 在您的应用中,建议通过在 Auth 对象上设置观测者 (observer) 来了解用户的身份验证状态。然后,您便可从 User 对象获取用户的基本个人资料信息。请参阅管理用户

  • 在您的 Firebase Realtime Database 和 Cloud Storage 安全规则中,您可以从 auth 变量获取已登录用户的唯一用户 ID,然后利用此 ID 来控制用户可以访问哪些数据。

您可以将多个身份验证提供方凭据与一个现有用户帐号关联,让用户可以使用多个身份验证提供方登录您的应用。

如需让用户退出登录,请调用 signOut

Web 模块化 API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web 命名空间型 API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});