開始在網站上使用 Firebase 驗證

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

新增並初始化 Authentication SDK

如果您尚未安裝 Firebase JS SDK 並初始化 Firebase，請先完成這項操作。
新增 Firebase 驗證 JS SDK 並初始化 Firebase 驗證：

網頁模組 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);

網路命名空間 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 本機模擬器套件設計原型並進行測試

在說明應用程式驗證使用者的方式之前，讓我們先介紹一組工具，可用來設計原型及測試驗證功能：Firebase 本機模擬器套件。如果您正在考慮驗證技術與供應商，建議您使用驗證和 Firebase 安全性規則，以公開和私人資料來嘗試不同的資料模型，或是設計登入 UI 的原型，而無需部署上線的服務，也能在本機運作。

驗證模擬器是本機模擬器套件的一部分，可讓應用程式與模擬資料庫內容和設定互動，並視需要選擇模擬專案資源 (函式、其他資料庫和安全性規則)。

使用驗證模擬器只需完成幾個步驟：

將一行程式碼新增至應用程式的測試設定，即可與模擬器連線。
從本機專案目錄的根目錄中執行 firebase emulators:start。
使用本機模擬器套件 UI 進行互動式原型設計，或使用 Authentication Emulator REST API 進行非互動式測試。

如需詳細指南，請參閱「將應用程式連線至驗證模擬器」一文。詳情請參閱「本機模擬器套件簡介」。

接下來說明如何驗證使用者。

註冊新使用者

建立表單，讓新使用者可以使用自己的電子郵件地址和密碼註冊您的應用程式。使用者填妥表單後，請驗證使用者提供的電子郵件地址和密碼，然後傳遞至 createUserWithEmailAndPassword 方法：

網頁模組 API

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

網路命名空間 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 方法：

網頁模組 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

網路命名空間 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

設定驗證狀態觀察器並取得使用者資料

針對每個需要登入使用者相關資訊的應用程式頁面，將觀察器附加至全域驗證物件。每當使用者的登入狀態變更時，系統就會呼叫這個觀察器。

使用 onAuthStateChanged 方法附加觀察器。使用者成功登入後，您就可以在觀察器中取得使用者的相關資訊。

網頁模組 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

網路命名空間 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

後續步驟

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