Firebase와 React.js로 인증 익히기: Gladiators Battle에서 익명, 등록, 로그인이 쉬워졌습니다.-JS 튜토리얼-php.cn

Firebase와 React.js로 인증 익히기: Gladiators Battle에서 익명, 등록, 로그인이 쉬워졌습니다.

Barbara Streisand

풀어 주다： 2024-11-27 16:44:10

원래의

373명이 탐색했습니다.

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

인증은 모든 최신 웹 애플리케이션의 핵심입니다. 커뮤니티 기반 플랫폼, 전자 상거래 사이트 또는 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;
};

로그인 후 복사

? 인증 모범 사례