使用 Javascript 使用基於密碼的帳戶透過 Firebase 進行身份驗證

您可以使用 Firebase 驗證讓您的使用者使用其電子郵件地址和密碼透過 Firebase 進行身份驗證,並管理您套用的基於密碼的帳戶。

在你開始之前

  1. 將 Firebase 新增到您的 JavaScript 專案
  2. 如果您尚未將應用程式連線至 Firebase 項目,請從Firebase 控制台執行此操作。
  3. 啟用電子郵件/密碼登入:
    1. Firebase 控制台中,開啟「驗證」部分。
    2. 登入方法標籤上,啟用電子郵件/密碼登入方法,然後按一下儲存

建立基於密碼的帳戶

若要建立具有密碼的新使用者帳戶,請在應用程式的註冊頁面中完成以下步驟:

  1. 當新使用者使用應用程式的註冊表單進行註冊時,請完成應用程式要求的所有新帳戶驗證步驟,例如驗證新帳戶的密碼是否已正確輸入並滿足您的複雜性要求。
  2. 透過將新使用者的電子郵件地址和密碼傳遞給createUserWithEmailAndPassword來建立新帳戶:

    Web modular 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;
        // ..
      });

    Web namespaced API

    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // Signed in 
        var user = userCredential.user;
        // ...
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        // ..
      });
    如果建立了新帳戶,使用者將自動登入。請查看下面的「後續步驟」部分以取得登入使用者的詳細資訊。

    這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼的列表,請查看Auth Reference Docs

使用電子郵件地址和密碼登入用戶

使用密碼登入使用者的步驟與建立新帳戶的步驟類似。在應用程式的登入頁面中,執行以下操作:

  1. 當使用者登入您的應用程式時,將使用者的電子郵件地址和密碼傳遞給signInWithEmailAndPassword

    Web modular 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;
      });

    Web namespaced API

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // Signed in
        var user = userCredential.user;
        // ...
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
      });
    請查看下面的「後續步驟」部分以取得登入使用者的詳細資訊。

    這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼的列表,請查看Auth Reference Docs

建議:啟用電子郵件枚舉保護

如果電子郵件地址在必須註冊時未註冊(例如,使用電子郵件地址和密碼登入時)或在必須未使用時已註冊(例如,更改使用者的電子郵件地址時)。雖然這有助於向用戶建議具體補救措施,但惡意行為者也可能濫用它來發現用戶註冊的電子郵件地址。

為了降低此風險,我們建議您使用 Google Cloud gcloud工具為您的專案啟用電子郵件枚舉保護。請注意,啟用此功能會變更 Firebase 驗證的錯誤報告行為:確保您的應用程式不依賴更具體的錯誤。

下一步

使用者首次登入後,系統會建立新的使用者帳戶,並將其連結到使用者登入時所使用的憑證(即使用者名稱和密碼、電話號碼或驗證提供者資訊)。此新帳戶將作為 Firebase 專案的一部分存儲,並且可用於識別專案中每個應用程式中的用戶,無論用戶如何登入。

  • 在您的應用程式中,了解使用者身份驗證狀態的建議方法是在Auth物件上設定觀察者。然後,您可以從User物件中取得使用者的基本個人資料資訊。請參閱管理用戶

  • 在 Firebase 即時資料庫和雲端儲存安全性規則中,您可以從auth變數取得登入使用者的唯一使用者 ID,並使用它來控制使用者可以存取哪些資料。

您可以透過將身分驗證提供者憑證連結到現有使用者帳戶,允許使用者使用多個驗證提供者登入您的應用程式。

若要登出用戶,請呼叫signOut

Web modular API

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});