開始在網站上進行 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/compat/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/auth.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/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

下一步

了解如何添加對其他身份提供者和匿名訪客帳戶的支持：

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