您可以使用 Firebase 驗證讓您的使用者使用其電子郵件地址和密碼透過 Firebase 進行身份驗證,並管理您套用的基於密碼的帳戶。
在你開始之前
- 將 Firebase 新增到您的 JavaScript 專案。
- 如果您尚未將應用程式連線至 Firebase 項目,請從Firebase 控制台執行此操作。
- 啟用電子郵件/密碼登入:
- 在Firebase 控制台中,開啟「驗證」部分。
- 在登入方法標籤上,啟用電子郵件/密碼登入方法,然後按一下儲存。
建立基於密碼的帳戶
若要建立具有密碼的新使用者帳戶,請在應用程式的註冊頁面中完成以下步驟:
- 當新使用者使用應用程式的註冊表單進行註冊時,請完成應用程式要求的所有新帳戶驗證步驟,例如驗證新帳戶的密碼是否已正確輸入並滿足您的複雜性要求。
- 透過將新使用者的電子郵件地址和密碼傳遞給
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 。
使用電子郵件地址和密碼登入用戶
使用密碼登入使用者的步驟與建立新帳戶的步驟類似。在應用程式的登入頁面中,執行以下操作:
- 當使用者登入您的應用程式時,將使用者的電子郵件地址和密碼傳遞給
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. });