Menguasai Pengesahan dengan Firebase dan React.js: Tanpa Nama, Pendaftaran dan Log Masuk Dipermudahkan dalam Pertempuran Gladiators

Pengesahan adalah teras bagi setiap aplikasi web moden. Sama ada anda sedang membina platform dipacu komuniti, tapak e-dagang atau pengalaman permainan interaktif seperti Gladiators Battle, menyediakan sistem pengesahan yang lancar dan selamat adalah penting. Dalam panduan ini, kami akan meneroka cara untuk menyediakan aliran pengesahan yang mantap menggunakan Firebase dan React.js, termasuk pengesahan tanpa nama, pendaftaran pengguna dan log masuk.

? Mengapa Firebase for Authentication?

Tawaran Pengesahan Firebase:

• Penyatuan mudah dengan rangka kerja popular seperti React.js.
• Sokongan untuk berbilang kaedah pengesahan, termasuk e-mel/kata laluan, Google, Facebook dan log masuk tanpa nama.
• API yang selamat, berskala dan mesra pembangun.
• Jika anda sedang membina aplikasi dinamik di mana pengguna boleh berinteraksi serta-merta tanpa halangan, pengesahan tanpa nama adalah pengubah permainan. Ia membolehkan pengguna meneroka apl anda dengan akaun sementara dan beralih kepada akaun penuh kemudian.

? Menyediakan Firebase

1. Buat Projek Firebase
   Pergi ke Firebase Console.
   Cipta projek baharu dan dayakan Pengesahan dalam bahagian Bina.

2. Pasang Firebase SDK
   Jalankan arahan berikut dalam direktori projek React anda:

npm pasang firebase

1. Konfigurasikan Firebase

Buat fail firebase-config.js dalam projek anda:

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);

?️ Melaksanakan Ciri Pengesahan

1. Pengesahan Tanpa Nama Pengesahan tanpa nama membolehkan pengguna meneroka apl anda tanpa membuat akaun.

Persediaan dalam Firebase
Dayakan Log Masuk Tanpa Nama di bawah Pengesahan > Kaedah Log Masuk dalam Firebase Console.

Pelaksanaan Kod
Apabila pengguna mengakses apl anda tanpa log masuk:

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.");
  }
});

1. Pendaftaran Pengguna

Benarkan pengguna mendaftar dengan e-mel dan kata laluan.

Dayakan E-mel/Kata Laluan dalam Firebase
Dalam tab Kaedah Log Masuk, dayakan Pengesahan E-mel/Kata Laluan.

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);
  }
};

Simpan data pengguna tambahan dalam 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);
  }
};

1. Log Masuk Pengguna

Benarkan pengguna log masuk dengan bukti kelayakan mereka.

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);
  }
};

? Menggabungkan Akaun Tanpa Nama dan Penuh

Apabila pengguna tanpa nama memutuskan untuk membuat akaun, gabungkan data mereka dengan lancar.

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);
  }
};

? Mengendalikan Navigasi dan UI

Gunakan Penghala Reaksi untuk mengarahkan pengguna berdasarkan keadaan pengesahan mereka.

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

? Amalan Terbaik untuk Pengesahan

• Data Pengguna Selamat: Gunakan peraturan Firestore untuk menyekat akses data.
• Sahkan Input: Halang kemasukan data yang tidak sah atau berniat jahat semasa pendaftaran.
• Tingkatkan UX: Sediakan mesej ralat yang jelas dan penunjuk kemajuan semasa aliran log masuk/daftar.
• Peralihan Lancar: Pastikan akaun tanpa nama dinaik taraf tanpa kehilangan kemajuan.
• Pengurusan Sesi: Kendalikan tamat tempoh token dan kegigihan sesi dengan cekap.

? Kesimpulan: Pengalaman Permainan Yang Lancar Menanti

Membina sistem pengesahan yang mantap adalah penting untuk aplikasi web moden, terutamanya untuk platform yang menarik seperti Gladiators Battle. Dengan memanfaatkan Firebase dan React.js, anda boleh memberikan pengguna pengalaman yang intuitif, selamat dan fleksibel.

Sama ada mereka meneroka tanpa nama, mendaftar buat kali pertama atau kembali untuk pertempuran epik, pengguna anda akan berasa selesa.

? Terokai Pertempuran Gladiator

• Tapak web: https://gladiatorsbattle.com/
• X (dahulunya Twitter): https://x.com/GladiatorsBT
• LinkedIn: https://www.linkedin.com/in/pierre-romain-lopez/
• Discord: https://discord.gg/YBNF7KjGwx

Terima kasih kerana membaca, dan selamat mengekod! ?

Beri tahu saya pendapat atau soalan anda dalam ulasan di bawah.

Atas ialah kandungan terperinci Menguasai Pengesahan dengan Firebase dan React.js: Tanpa Nama, Pendaftaran dan Log Masuk Dipermudahkan dalam Pertempuran Gladiators. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!