使用 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;
};

登录后复制

？身份验证的最佳实践