您可以使用 Firebase 驗證功能,讓使用者透過一或多種登入方式登入應用程式,包括電子郵件地址和密碼登入,以及 Google 登入和 Facebook 登入等聯合識別資訊提供者登入。本教學課程說明如何在應用程式中新增電子郵件地址和密碼登入,以開始使用 Firebase 驗證功能。
新增並初始化 Authentication SDK
如果您尚未 安裝 Firebase JS SDK 並初始化 Firebase,請先完成這項操作。
新增 Firebase 驗證 JS SDK 並初始化 Firebase 驗證:
Web
import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase const app = initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = getAuth(app);
Web
import firebase from "firebase/compat/app"; import "firebase/compat/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = firebase.auth();
(選用) 使用 Firebase 本機模擬器套件設計原型並進行測試
在說明應用程式驗證使用者的方式之前,讓我們先介紹一組工具,可用來設計原型及測試驗證功能:Firebase 本機模擬器套件。如果您正在考慮驗證技術與供應商,建議您使用驗證和 Firebase 安全性規則,以公開和私人資料來嘗試不同的資料模型,或是設計登入 UI 的原型,而無需部署上線的服務,也能在本機運作。
驗證模擬器是本機模擬器套件的一部分,可讓應用程式與模擬資料庫內容和設定互動,並視需要選擇模擬專案資源 (函式、其他資料庫和安全性規則)。
使用驗證模擬器只需完成幾個步驟:
- 將一行程式碼新增至應用程式的測試設定,即可與模擬器連線。
- 從本機專案目錄的根目錄中執行
firebase emulators:start
。 - 使用本機模擬器套件 UI 進行互動式原型設計,或使用 Authentication Emulator REST API 進行非互動式測試。
如需詳細指南,請參閱「將應用程式連線至驗證模擬器」一文。詳情請參閱「本機模擬器套件簡介」。
接下來說明如何驗證使用者。
註冊新使用者
建立表單,讓新使用者可以使用自己的電子郵件地址和密碼註冊您的應用程式。使用者填妥表單後,請驗證使用者提供的電子郵件地址和密碼,然後傳遞至 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; // .. });
Web
firebase.auth().createUserWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // .. });
登入現有使用者
建立表單,讓現有使用者能夠用自己的電子郵件地址和密碼登入。使用者填妥表單時,請呼叫 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; });
Web
firebase.auth().signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });
設定驗證狀態觀察器並取得使用者資料
針對每個需要登入使用者相關資訊的應用程式頁面,將觀察器附加至全域驗證物件。每當使用者的登入狀態變更時,系統就會呼叫這個觀察器。
使用 onAuthStateChanged
方法附加觀察器。使用者成功登入後,您就可以在觀察器中取得使用者的相關資訊。
Web
import { getAuth, onAuthStateChanged } from "firebase/auth"; const auth = getAuth(); onAuthStateChanged(auth, (user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/auth.user const uid = user.uid; // ... } else { // User is signed out // ... } });
Web
firebase.auth().onAuthStateChanged((user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/v8/firebase.User var uid = user.uid; // ... } else { // User is signed out // ... } });
後續步驟
瞭解如何新增對其他識別資訊提供者和匿名訪客帳戶的支援: