開始在網站上使用 Firebase 驗證

您可以使用 Firebase Authentication，讓使用者透過一或多種登入方式登入應用程式，包括電子郵件地址和密碼登入，以及 Google 登入和 Facebook 登入等聯合識別資訊提供者。本教學課程將說明如何在應用程式中加入電子郵件地址和密碼登入功能，讓您開始使用 Firebase Authentication。

新增及初始化 Authentication SDK

  1. 如果您尚未安裝，請 安裝 Firebase JS SDK 並初始化 Firebase。

  2. 新增 Firebase Authentication JS SDK 並初始化 Firebase Authentication：

Web 

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 

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 Security Rules，嘗試使用公開和私人資料的不同資料模型，或製作登入使用者介面設計的原型。如果您不想部署實際服務，也可以在本機上進行驗證，這麼做可以讓您在本機上進行驗證，而無需部署實際服務。

Authentication 模擬器是 Local Emulator Suite 的一部分，可讓應用程式與模擬資料庫內容和設定互動，以及視需要與模擬的專案資源 (函式、其他資料庫和安全性規則) 互動。

使用 Authentication 模擬器只需幾個步驟：

  1. 在應用程式的測試設定中加入一行程式碼，以便連線至模擬器。
  2. 在本機專案目錄的根目錄中執行 firebase emulators:start。
  3. 使用 Local Emulator Suite UI 進行互動式原型設計，或使用 Authentication 模擬器 REST API 進行非互動式測試。

如需詳細指南，請參閱「將應用程式連結至 Authentication 模擬器」。詳情請參閱 Local Emulator Suite 簡介。

接下來，我們將繼續說明如何驗證使用者。

註冊新使用者

建立表單，讓新使用者可使用電子郵件地址和密碼註冊應用程式。使用者填寫表單後，請驗證使用者提供的電子郵件地址和密碼，然後將這些資料傳遞至 createUserWithEmailAndPassword 方法：

Web

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

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
auth_signup_password.js

Web

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

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

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

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

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

後續步驟

瞭解如何新增其他身分識別資訊提供者和匿名訪客帳戶的支援功能：