使用 Firebase 和 React.js 掌握身份驗證：角鬥士之戰中的匿名、註冊和登入變得輕鬆-js教程-PHP中文網

Mastering Authentication with Firebase and React.js: Anonymous, Registration, and Login Made Easy in Gladiators Battle

身份驗證是每個現代 Web 應用程式的核心。無論您是要建立社群驅動的平台、電子商務網站，還是像 Gladiators Battle 這樣的互動式遊戲體驗，提供無縫且安全的身份驗證系統都至關重要。在本指南中，我們將探索如何使用 Firebase 和 React.js 設定強大的身份驗證流程，包括匿名身份驗證、使用者註冊和登入。

？為什麼要使用 Firebase 進行身份驗證？

Firebase 驗證提供：

與 React.js 等流行框架輕鬆整合。
支援多種驗證方式，包括電子郵件/密碼、Google、Facebook、匿名登入。
安全、可擴充且對開發人員友善的 API。
如果您正在建立一個動態應用程序，讓用戶可以毫無障礙地即時交互，那麼匿名身份驗證將改變遊戲規則。它允許用戶使用臨時帳戶探索您的應用程序，並在稍後過渡到完整帳戶。

？設定 Firebase

建立 Firebase 專案
前往 Firebase 控制台。
建立一個新專案並在“建置”部分中啟用“身份驗證”。
安裝 Firebase SDK
在 React 專案目錄中執行以下命令：

npm 安裝 firebase

配置 Firebase

在專案中建立 firebase-config.js 檔案：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

登入後複製

?️ 實作身分驗證功能

匿名身份驗證匿名身份驗證允許用戶無需建立帳戶即可探索您的應用程式。

Firebase 中的設定
在驗證 > 下啟用匿名登入Firebase 控制台中的登入方法。

程式碼實作
當使用者在未登入的情況下存取您的應用程式時：

import { signInAnonymously, onAuthStateChanged } from "firebase/auth";

const handleAnonymousLogin = async () => {
  try {
    const userCredential = await signInAnonymously(auth);
    console.log("Anonymous user ID:", userCredential.user.uid);
  } catch (error) {
    console.error("Error with anonymous login:", error);
  }
};

onAuthStateChanged(auth, (user) => {
  if (user?.isAnonymous) {
    console.log("User is browsing anonymously.");
  }
});

登入後複製

用戶註冊

允許使用者使用電子郵件和密碼註冊。

在 Firebase 中啟用電子郵件/密碼
在「登入方法」標籤中，啟用電子郵件/密碼驗證。

import { createUserWithEmailAndPassword } from "firebase/auth";

const handleRegister = async (email, password) => {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log("Registered user:", userCredential.user);
  } catch (error) {
    console.error("Error during registration:", error);
  }
};

登入後複製

在 Firestore 中儲存其他使用者資料：

import { doc, setDoc } from "firebase/firestore";

const saveUserData = async (userId, userData) => {
  try {
    await setDoc(doc(db, "users", userId), userData);
    console.log("User data saved.");
  } catch (error) {
    console.error("Error saving user data:", error);
  }
};

登入後複製

使用者登入

允許使用者使用其憑證登入。

import { signInWithEmailAndPassword } from "firebase/auth";

const handleLogin = async (email, password) => {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    console.log("Logged-in user:", userCredential.user);
  } catch (error) {
    console.error("Error during login:", error);
  }
};

登入後複製

？結合匿名帳戶和完整帳戶

當匿名使用者決定建立帳戶時，無縫合併他們的資料。

import { linkWithCredential, EmailAuthProvider } from "firebase/auth";

const upgradeAnonymousAccount = async (email, password) => {
  try {
    const credential = EmailAuthProvider.credential(email, password);
    const user = auth.currentUser;

    if (user?.isAnonymous) {
      const linkedUser = await linkWithCredential(user, credential);
      console.log("Anonymous account upgraded:", linkedUser.user);
    }
  } catch (error) {
    console.error("Error upgrading anonymous account:", error);
  }
};

登入後複製

？處理導航和 UI

使用 React Router 根據使用者的驗證狀態來引導使用者。

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const AuthHandler = () => {
  const navigate = useNavigate();

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      if (user?.isAnonymous) {
        navigate("/create-character");
      } else if (user) {
        navigate("/dashboard");
      } else {
        navigate("/login");
      }
    });
  }, [navigate]);

  return null;
};

登入後複製

？身份驗證的最佳實踐