Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

准备工作

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

创建基于密码的帐号

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

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

    Web 版本 9

    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 版本 8

    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 版本 9

    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 版本 8

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

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

后续步骤

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

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

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

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

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

Web 版本 9

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

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

Web 版本 8

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