使用 JavaScript 以密碼式帳戶向 Firebase 驗證

您可以使用 Firebase 驗證，讓使用者以自己的電子郵件地址和密碼透過 Firebase 進行驗證，以及管理應用程式的密碼帳戶。

事前準備

  1. 將 Firebase 新增至您的 JavaScript 專案。
  2. 如果您尚未將應用程式連結至 Firebase 專案，請透過 Firebase 控制台進行。
  3. 啟用電子郵件/密碼登入功能：
    1. 在 Firebase 控制台開啟「驗證」專區。
    2. 在「Sign in method」分頁中，啟用「Email/password」登入方式，然後按一下「Save」。

建立以密碼為基礎的帳戶

如要使用密碼建立新的使用者帳戶，請在應用程式的註冊頁面中完成下列步驟：

  1. 當新使用者透過應用程式的註冊表單註冊時，請完成應用程式所需的新帳戶驗證步驟，例如確認新帳戶的密碼是否正確輸入，並且符合複雜性的要求。
  2. 將新使用者的電子郵件地址和密碼傳送至 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
    如果新帳戶建立完成，使用者會自動登入。請參閱下方的「後續步驟」一節，取得登入使用者的詳細資料。

    您也能在這裡找出並處理錯誤。如需錯誤代碼清單，請參閱驗證參考文件。

透過電子郵件地址和密碼登入使用者帳戶

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

  1. 當使用者登入應用程式時，請將使用者的電子郵件地址和密碼傳遞至 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
    請參閱下方的「後續步驟」一節，取得登入使用者的詳細資料。

    您也能在這裡找出並處理錯誤。如需錯誤代碼清單，請參閱驗證參考文件。

建議：啟用電子郵件列舉防護功能

有些 Firebase 驗證方法會將電子郵件地址當做參數，在需要註冊的情況下 (例如使用電子郵件地址和密碼登入時)，或是因電子郵件地址和密碼不能使用而註冊時 (例如變更使用者電子郵件地址時)，就會擲回特定錯誤。儘管這有助於向使用者建議特定補救方式，但也可能遭不肖人士濫用，找出使用者註冊的電子郵件地址。

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

後續步驟

使用者首次登入時，系統會建立新的使用者帳戶，並連結至憑證 (即使用者名稱與密碼、電話號碼或驗證提供者資訊)，也就是使用者登入時使用的憑證。這個新帳戶會儲存在您的 Firebase 專案中，可用來識別專案中各個應用程式的使用者 (無論使用者登入方式為何)。

  • 如要在應用程式中瞭解使用者的驗證狀態，建議在 Auth 物件上設定觀察器。接著，您就能從 User 物件取得使用者的基本個人資料資訊。請參閱管理使用者一文。

  • 在 Firebase 即時資料庫和 Cloud Storage 安全性規則中，您可以透過 auth 變數取得登入使用者的專屬 ID，並使用該 ID 控管使用者可存取哪些資料。

您可以將驗證供應商憑證連結至現有的使用者帳戶，讓使用者透過多個驗證服務提供者登入您的應用程式。

如要登出使用者，請呼叫 signOut：

網頁模組 API

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

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

網路命名空間 API

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