在网站上开始使用 Firebase Authentication

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

添加并初始化 Authentication SDK

1. 如果您尚未安装 Firebase JS SDK 并初始化 Firebase，请先完成该过程。

2. 添加 Firebase Authentication JS SDK 并初始化 Firebase Authentication：

Web 模块化 API

详细了解可实现摇树优化的模块化 Web API，并从命名空间型 API 升级。

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

Web 命名空间型 API

详细了解可实现摇树优化的模块化 Web API，并从命名空间型 API 升级。

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

（可选）使用 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 模块化 API

详细了解可实现摇树优化的模块化 Web API，并从命名空间型 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;
    // ..
  });
auth_signup_password.js

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

现有用户登录

创建一个表单，允许现有用户使用自己的电子邮件地址和密码登录。当用户填好该表单后，调用 signInWithEmailAndPassword 方法：

Web 模块化 API

详细了解可实现摇树优化的模块化 Web API，并从命名空间型 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;
  });
auth_signin_password.js

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

设置身份验证状态观测器 (observer) 并获取用户数据

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

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

Web 模块化 API

详细了解可实现摇树优化的模块化 Web API，并从命名空间型 API 升级。

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/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
auth_state_listener.js

Web 命名空间型 API

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/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

后续步骤

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

• Google 登录
• Facebook 登录
• Twitter 登录
• GitHub 登录
• 匿名登录