在网站上开始使用 Firebase Authentication

利用 Firebase Authentication，您可以允许用户通过一种或多种方式登录到您的应用，其中包括电子邮件地址和密码登录以及联合身份提供方（如 Google 登录和 Facebook 登录）。本教程将向您展示如何为自己的应用添加电子邮件地址和密码登录功能，以开始使用 Firebase Authentication。

将您的应用关联至 Firebase

安装 Firebase SDK。请务必按照说明将配置代码粘贴到您的网页中。

（可选）使用 Firebase Local Emulator Suite 进行原型设计和测试

在介绍应用如何对用户进行身份验证之前，我们先介绍一套可用于对 Authentication 功能进行原型设计和测试的工具：Firebase Local Emulator Suite。如果您要从不同身份验证方法和提供方中做出选择、对使用 Authentication 和 Firebase 安全规则的公共和私有数据尝试不同的数据模型，或者想要对登录界面进行原型设计，那么无需实际部署即可在本地进行以上工作是非常理想的。

Authentication 模拟器是 Local Emulator Suite 的一部分，可让您的应用与模拟的数据库内容和配置进行交互，以及视需要与您的模拟项目资源（函数、其他数据库和安全规则）进行交互。

如需使用 Authentication 模拟器，只需完成几个步骤：

  1. 向应用的测试配置添加一行代码以连接到模拟器。
  2. 从本地项目的根目录运行命令 firebase emulators:start。
  3. 使用 Local Emulator Suite 界面进行交互式原型设计，或使用 Authentication 模拟器 REST API 进行非交互式测试。

如需查看详细指南，请参阅将您的应用连接到 Authentication 模拟器。如需了解详情，请参阅 Local Emulator Suite 简介。

接下来，我们来看看如何对用户进行身份验证。

注册新用户

创建一个表单，允许新用户使用自己的电子邮件地址和密码注册您的应用。当用户填好该表单后，验证用户提供的电子邮件地址和密码，然后将其传递给 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;
    // ..
  });
auth_signup_password.js

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;
    // ..
  });
email.js

登录现有用户

创建一个表单，允许现有用户使用自己的电子邮件地址和密码登录。当用户填好该表单后，调用 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;
  });
auth_signin_password.js

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;
  });
email.js

设置身份验证状态观察者并获取用户数据

针对应用中需要已登录用户的信息的每个页面，将观察者附加到全局身份验证对象。每当用户的登录状态发生变化时，系统都会调用此观察者。

请使用 onAuthStateChanged 方法附加观察者。当用户成功登录时，您可以从观察者中获取用户的相关信息。

Web 版本 9

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

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
auth_state_listener.js

Web 版本 8

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

后续步骤

了解如何添加对其他身份提供方服务和匿名访客帐号的支持：