此页面由 Cloud Translation API 翻译。

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

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

添加并初始化 Authentication SDK

如果您还没有，请安装 Firebase JS SDK 并初始化 Firebase 。
添加 Firebase 身份验证 JS SDK 并初始化 Firebase 身份验证：

Web version 9

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 version 8

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 本地模拟器套件进行原型设计和测试

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

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

使用身份验证模拟器只需几个步骤：

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

将您的应用程序连接到身份验证模拟器中提供了详细指南。有关详细信息，请参阅本地仿真器套件介绍。

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

注册新用户

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

Web version 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 version 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 version 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 version 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 version 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 version 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

下一步

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