本頁面由 Cloud Translation API 翻譯而成。

開始在網站上使用 Firebase 驗證

您可透過 Firebase 驗證功能，讓使用者使用更多登入方式，包括電子郵件地址和密碼登入聯合識別資訊提供者，例如 Google 登入和 Facebook 登入。這個教學課程會介紹如何使用 Firebase 驗證功能電子郵件地址和密碼登入應用程式。

新增並初始化 Authentication SDK

如果您還沒有這樣做，安裝 Firebase JS SDK 並初始化 Firebase。
新增 Firebase 驗證 JS SDK 並初始化 Firebase 驗證：

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

在說明應用程式如何驗證使用者之前，我們先介紹一組可用來設計驗證原型及測試驗證功能的工具： Firebase 本機模擬器套件。如果你正在考慮採用驗證方法並嘗試運用公開和私人資料，嘗試不同的資料模型運用驗證和 Firebase 安全性規則，或是設計登入使用者介面的原型，無需部署有效服務就在本機上運作，會是個好主意。

驗證模擬器屬於本機模擬器套件的一部分，可讓應用程式與模擬的資料庫內容和設定互動，例如：以及選用的模擬專案資源 (函式、其他資料庫和安全性規則)。

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

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

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

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

註冊新使用者

建立表單，讓新使用者透過電子郵件使用您的應用程式註冊位址和密碼使用者填妥表單後，請驗證電子郵件地址和密碼，然後將這些資訊傳遞至 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

後續步驟

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