开始在网站上进行 Firebase 身份验证

您可以使用 Firebase 身份验证允许用户使用一种或多种登录方法登录您的应用程序，包括电子邮件地址和密码登录，以及联合身份提供商，例如 Google 登录和 Facebook 登录。本教程通过向您展示如何向您的应用程序添加电子邮件地址和密码登录，帮助您开始使用 Firebase 身份验证。

添加并初始化Authentication SDK

1. 如果您还没有安装 Firebase JS SDK 并初始化 Firebase 。

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

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);

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


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

（可选）使用 Firebase Local Emulator Suite 制作原型并进行测试

在讨论您的应用程序如何对用户进行身份验证之前，让我们先介绍一组可用于制作原型和测试身份验证功能的工具：Firebase Local Emulator Suite。如果您要在身份验证技术和提供者之间做出决定，使用身份验证和 Firebase 安全规则尝试使用公共和私有数据的不同数据模型，或者对登录 UI 设计进行原型设计，那么能够在不部署实时服务的情况下在本地工作可能是个好主意.

身份验证模拟器是本地模拟器套件的一部分，它使您的应用程序能够与模拟的数据库内容和配置以及可选的模拟项目资源（函数、其他数据库和安全规则）进行交互。

使用 Authentication 模拟器只需要几个步骤：

1. 在您的应用程序的测试配置中添加一行代码以连接到模拟器。
2. 从本地项目目录的根目录运行firebase emulators:start 。
3. 使用本地模拟器套件 UI 进行交互式原型设计，或使用身份验证模拟器 REST API 进行非交互式测试。

详细指南可在将您的应用程序连接到身份验证模拟器中找到。有关详细信息，请参阅Local Emulator Suite 介绍。

现在让我们继续介绍如何对用户进行身份验证。

注册新用户

创建一个表单，允许新用户使用他们的电子邮件地址和密码在您的应用程序中注册。当用户完成表单时，验证用户提供的电子邮件地址和密码，然后将它们传递给createUserWithEmailAndPassword方法：

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

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方法：

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

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方法附加观察者。当用户登录成功后，您可以在观察者中获取用户的相关信息。

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

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

下一步

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

• 谷歌登录
• Facebook登入
• 推特登录
• 登录
• 匿名登录