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

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

您可以使用 Firebase Authentication，讓使用者透過電子郵件地址和密碼驗證 Firebase，並管理應用程式中的密碼帳戶。

事前準備

將 Firebase 新增至 JavaScript 專案。
如果您尚未將應用程式連結至 Firebase 專案，請前往 Firebase 主控台進行連結。
啟用電子郵件/密碼登入功能：
1. 在 Firebase 控制台中開啟「驗證」專區。
2. 在「登入方式」分頁中啟用「電子郵件/密碼」登入方式，然後按一下「儲存」。

建立密碼帳戶

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

當新使用者透過應用程式的註冊表單註冊時，請完成應用程式要求的任何新帳戶驗證步驟，例如驗證新帳戶的密碼是否輸入正確，且符合複雜度規定。

將新使用者的電子郵件地址和密碼傳送至 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

請參閱下方的「後續步驟」一節，取得已登入使用者的詳細資料。

您也可以在這裡捕捉及處理錯誤。如需錯誤代碼清單，請參閱 Auth 參考文件。

建議做法：設定密碼政策

您可以強制規定密碼複雜度，提高帳戶安全性。

如要為專案設定密碼政策，請在 Firebase 主控台的「驗證設定」頁面中，開啟「密碼政策」分頁：

驗證設定

Firebase Authentication 密碼政策支援下列密碼規定：

必須輸入小寫字元
須使用大寫字元
必須輸入數字字元
須有非英數字元

下列字元符合非英數字元規定： ^ $ * . [ ] { } ( ) ? " ! @ # % & / \ , > < ' : ; | _ ~
密碼長度下限 (範圍介於 6 到 30 個字元之間，預設為 6 個字元)
密碼長度上限 (長度上限為 4096 個半形字元)

您可以透過兩種模式啟用密碼政策強制執行功能：

要求：在使用者更新符合政策的密碼之前，嘗試註冊失敗。
通知：使用者可以使用不符規定的密碼註冊。使用這個模式時，您應檢查使用者的密碼是否符合用戶端政策，並在使用者不符合政策時，以某種方式提示他們更新密碼。

新使用者一律須選擇符合政策的密碼。

如果您有活躍使用者，建議不要在登入時啟用強制升級，除非您打算封鎖密碼不符合政策的使用者存取。請改用通知模式，讓使用者以目前的密碼登入，並告知密碼缺少的規定。

在用戶端驗證密碼

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

const status = await validatePassword(getAuth(), passwordFromUser);
if (!status.isValid) {
  // Password could not be validated. Use the status to show what
  // requirements are met and which are missing.

  // If a criterion is undefined, it is not required by policy. If the
  // criterion is defined but false, it is required but not fulfilled by
  // the given password. For example:
  const needsLowerCase = status.containsLowercaseLetter !== true;
}

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

如果電子郵件地址在必須註冊時未註冊 (例如，使用電子郵件地址和密碼登入時)，或是在必須未註冊時註冊 (例如，變更使用者的電子郵件地址時)，則部分採用電子郵件地址做為參數的 Firebase Authentication 方法會擲回特定錯誤。雖然這有助於向使用者建議特定解決方法，但也可能遭到惡意人士濫用，用來找出使用者註冊的電子郵件地址。

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

後續步驟

使用者首次登入後，系統會建立新使用者帳戶，並連結至使用者登入時所使用的憑證 (即使用者名稱和密碼、電話號碼或驗證服務提供者資訊)。這個新帳戶會儲存在 Firebase 專案中，無論使用者如何登入，都可以用於在專案中的每個應用程式中識別使用者。

如要在應用程式中瞭解使用者的驗證狀態，建議在 Auth 物件上設定觀察器。接著，您可以從 User 物件取得使用者的基本個人資料資訊。請參閱「管理使用者」。
在 Firebase Realtime Database 和 Cloud Storage 安全性規則中，您可以從 auth 變數取得已登入使用者的專屬使用者 ID，並利用該 ID 控管使用者可存取的資料。

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

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

Web

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

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

Web

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