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

您可以使用 Firebase Authentication 讓使用者透過 Firebase 使用自己的電子郵件地址和密碼，管理應用程式的 使用 API

事前準備

  1. 將 Firebase 新增至您的 JavaScript 專案。
  2. 如果您尚未將應用程式連結至 Firebase 專案，請前往 Firebase 控制台。
  3. 啟用電子郵件/密碼登入功能：
    1. 在 Firebase 控制台中開啟 找到「Auth」專區。
    2. 在「Sign in method」分頁中啟用「Email/password」登入 方法並點選「儲存」。

建立以密碼為基礎的帳戶

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

  1. 當新使用者透過應用程式的註冊表單註冊時，請完成新的使用者 帳戶驗證步驟，例如驗證 已正確輸入新帳戶的密碼，符合您的複雜程度 Google Cloud 就是最佳選擇
  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
    如果新帳戶建立完成，使用者會自動登入。請參閱下方的「後續步驟」一節，取得登入使用者的詳細資料。

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

，瞭解如何調查及移除這項存取權。

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

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

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

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

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

部分 Firebase Authentication 方法會將電子郵件地址做為參數擲回 特定錯誤 (在必須註冊該電子郵件地址時取消註冊) (例如，使用電子郵件地址和密碼登入時) ，哪些情況不能使用 (例如變更使用者的電子郵件地址)。 雖然這麼做有助於向使用者建議具體的解決方法， 以免不肖人士濫用，以找出您註冊的電子郵件地址 使用者。

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

後續步驟

使用者首次登入後，系統會建立新的使用者帳戶 也就是使用者的名稱和密碼 號碼或驗證提供者資訊，也就是使用者登入時使用的網址。這項新功能 帳戶儲存為 Firebase 專案的一部分，可用來識別 即可限制使用者登入專案中的所有應用程式

  • 在應用程式中得知使用者的驗證狀態，建議做法是 在 Auth 物件上設定觀察器。接著，您就能取得使用者的 User 物件的基本個人資料資訊。詳情請見 管理使用者。

  • 在你的Firebase Realtime Database和Cloud Storage中 查看安全性規則 透過 auth 變數取得已登入使用者的不重複使用者 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