احراز هویت کاربران با Firebase و React

دریابید که Firebase چگونه می تواند کار را برای کاربران داخلی آسان کند.

Firebase خدمات احراز هویت را ارائه می دهد که به شما امکان می دهد کاربران را به راحتی ثبت نام کرده و وارد سیستم شوید. می توانید از ایمیل، رمز عبور، شماره تلفن و ارائه دهندگان هویت مانند Google و Facebook استفاده کنید.

در این آموزش یاد می گیرید که چگونه می توانید از Firebase Authentication در React برای احراز هویت کاربران با استفاده از ایمیل و رمز عبور استفاده کنید. داده‌های کاربر جمع‌آوری‌شده را در Firestore، یک پایگاه داده ابری NoSQL نیز از Firebase، ذخیره خواهید کرد.

توجه داشته باشید که این آموزش از Firebase v9 و React Router v6 استفاده می کند.

یک برنامه Firebase ایجاد کنید

برای اتصال برنامه خود به Firebase، برنامه خود را با Firebase ثبت کنید تا یک شی پیکربندی دریافت کنید. این همان چیزی است که برای مقداردهی اولیه Firebase در برنامه React خود استفاده خواهید کرد.

برای ایجاد یک برنامه firebase مراحل زیر را دنبال کنید.

1. به کنسول Firebase بروید و روی ایجاد پروژه کلیک کنید.
2. برای پروژه خود یک نام بگذارید و روی ایجاد کلیک کنید تا فرآیند شروع شود.
3. برای ثبت برنامه روی نماد وب () در صفحه نمای کلی پروژه خود کلیک کنید.
4. نام دلخواه خود را به برنامه خود بدهید و روی ثبت برنامه کلیک کنید. شما نیازی به فعال کردن میزبانی Firebase ندارید.
5. شی پیکربندی را در Add Firebase SDK کپی کنید.

یک React Application بسازید

از Creative-react-app برای ایجاد داربست برنامه React استفاده کنید.

npx create-react-app react-auth-firebase

به پوشه بروید و برنامه را اجرا کنید.

cd react-auth-firebase
npm run start

احراز هویت کاربران با توابع Firebase

قبل از استفاده از Firebase، آن را نصب کنید.

npm i firebase

یک فایل جدید با نام firebase.js ایجاد کنید و Firebase را مقداردهی اولیه کنید.

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: <api_key>,
  authDomain:<auth_domain> ,
  projectId: <project_id>,
  storageBucket: <storage_bucket>,
  messagingSenderId: <messaging_sender_id>,
  appId: <app_id>
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);

از شی پیکربندی که هنگام ثبت برنامه کپی کرده اید استفاده کنید.

سپس ماژول های Firebase را که استفاده می کنید وارد کنید.

import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
} from "firebase/auth";
import { getFirestore, addDoc, collection } from "firebase/firestore";
const db = getFirestore();
const auth = getAuth();

برای احراز هویت کاربران، باید سه عملکرد ایجاد کنید: signUp، signIn و signOut.

تابع signUp ایمیل و رمز عبور را به createUserWithEmailAndPassword ارسال می کند تا یک کاربر جدید ثبت شود. createUserWithEmailAndPassword داده های کاربر را برمی گرداند که از آنها برای ایجاد یک رکورد کاربر جدید در پایگاه داده استفاده خواهید کرد.

const signUp = async (email, password) => {
  try {
    const userCredential = await createUserWithEmailAndPassword(
      auth,
      email,
      password
    );
    const user = userCredential.user;
    await addDoc(collection(db, "users"), {
      uid: user.uid,
      email: user.email,
    });
    return true
  } catch (error) {
    return {error: error.message}
  }
};

توجه داشته باشید که قبل از ثبت نام بررسی نمی کنید که آیا ایمیل قبلاً در حال استفاده است یا خیر، زیرا Firebase این کار را برای شما انجام می دهد.

در مرحله بعد، در تابع signIn، ایمیل و رمز عبور را به تابع signInWithEmailAndPassword ارسال کنید تا وارد یک کاربر ثبت نام شده شوید.

const signIn = async (email, password) => {
  try {
    const userCredential = await signInWithEmailAndPassword(
      auth,
      email,
      password
    );
    const user = userCredential.user;
    return true
  } catch (error) {
    return {error: error.message}
  }
};

هر دو تابع signUp و signOut در صورت موفقیت آمیز بودن، پیغام خطا را در صورت بروز خطا برمی گردند.

عملکرد signOut کاملاً ساده است. تابع signOut() را از Firebase فراخوانی می کند.

const signOut = async() => {
  try {
    await signOut(auth)
    return true
  } catch (error) {
    return false
  }
};

React Forms را ایجاد کنید

فرم های ورود و ثبت نام ایمیل و رمز عبور را از کاربر جمع آوری می کند.

یک کامپوننت جدید Signup.js ایجاد کنید و موارد زیر را اضافه کنید.

import { useState } from "react";
import { Link } from "react-router-dom";
import { signUp } from "./firebase";
const Signup = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, seterror] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (password !== password2) {
      seterror("Passwords do not match");
    } else {
      setEmail("");
      setPassword("");
      const res = await signUp(email, password);
      if (res.error) seterror(res.error)
    }
  };

  return (
    <>
      <h2>Sign Up</h2>
      <div>
        {error ? <div>{error}</div> : null}
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            value={email}
            placeholder="Your Email"
            required
            onChange={(e) => setEmail(e.target.value)}
          />
          <input
            type="password"
            name="password"
            value={password}
            placeholder="Your Password"
            required
            onChange={(e) => setPassword(e.target.value)}
          />
          <button type="submit">Submit</button>
        </form>
        <p>
          already registered? <Link to="/login">Login</Link>
        </p>
      </div>
    </>
  );
};

export default Signup;

در اینجا شما یک فرم ثبت نام ایجاد می کنید و ایمیل و رمز عبور را با استفاده از state پیگیری می کنید. هنگامی که فرم را ارسال می کنید، رویداد onSubmit تابع handleSubmit() را فعال می کند که تابع signUp() را از firebase.js فراخوانی می کند. اگر تابع خطایی را برگرداند، وضعیت خطا را به روز کنید و پیام خطا را نمایش دهید.

برای فرم ورود، Signin.js را ایجاد کنید و موارد زیر را اضافه کنید.

import { useState } from "react";
import { signIn } from "./firebase";

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, seterror] = useState("");
  const handleSubmit = async (e) => {
    e.preventDefault();
    setEmail("");
    setPassword("");
    const res = await signIn(email, password);
    if (res.error) seterror(res.error);
  };
  return (
    <>
      {error ? <div>{error}</div> : null}
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="email"
          value={email}
          placeholder="Your Email"
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          name="password"
          value={password}
          placeholder="Your Password"
          onChange={(e) => setPassword(e.target.value)}
        />
        <input type="submit" value="submit" />
      </form>
    </>
  );
};

export default Login;

فرم ورود به سیستم کاملاً شبیه به صفحه ثبت نام است با این تفاوت که ارسال تابع signIn() را فراخوانی می کند.

در آخر صفحه پروفایل را ایجاد کنید. این صفحه ای است که برنامه پس از احراز هویت موفق، کاربران را به آن هدایت می کند.

Profile.js را ایجاد کنید و موارد زیر را اضافه کنید.

import { signOut } from "./firebase";

const Profile = () => {
  const handleLogout = async () => {
   await signOut();
  };
  return (
    <>
      <h1>Profile</h1>
 <button onClick={handleLogout}>Logout</button>
    </>
  );
};

export default Profile;

در این کامپوننت، عنوان Profile و دکمه خروج را دارید. کنترل کننده onClick روی دکمه عملکرد handleLogout را فعال می کند که کاربر را از سیستم خارج می کند.

ایجاد مسیرهای احراز هویت

برای ارائه صفحاتی که ایجاد کرده اید به مرورگر، react-router-dom را راه اندازی کنید.

react-router-dom را نصب کنید:

npm i react-router-dom

در index.js، react-router-dom را پیکربندی کنید:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import Login from "./Login";
import Profile from "./Profile";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="login" element={<Login />} />
          <Route path="profile" element={<Profile />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

تا این مرحله، برنامه می تواند یک کاربر را ثبت کند، او را ثبت نام کند و از سیستم خارج شود. پس چگونه می توان فهمید که یک کاربر وارد شده است یا خیر؟

در بخش بعدی این آموزش، خواهید دید که چگونه می توانید از React context برای پیگیری وضعیت احراز هویت کاربر در سراسر برنامه استفاده کنید.

احراز هویت را با React Context API مدیریت کنید

React Context یک ابزار مدیریت حالت است که به اشتراک گذاری داده ها را در بین برنامه ها ساده می کند. این یک جایگزین بهتر برای حفاری پایه است، جایی که داده ها درخت را از والدین به فرزند منتقل می کند تا زمانی که به جزء مورد نیاز آن برسد.

ایجاد زمینه احراز هویت

در پوشه src، فایل AuthContext.js را اضافه کنید و AuthContext را ایجاد و صادر کنید.

import { createContext } from "react";
const AuthContext = createContext();
export default AuthContext;

بعد، ارائه دهنده را در AuthProvider.js ایجاد کنید. به کامپوننت ها اجازه می دهد از AuthContext استفاده کنند.

import { getAuth, onAuthStateChanged } from "firebase/auth";
import { useState, useEffect } from 'react';
import AuthContext from './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(null);
    useEffect(() => {
        onAuthStateChanged(auth,(user) => {
            setUser(user)
        })
    }, []);
  
    return (
      <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
    );
  };

در اینجا، با استفاده از متد onAuthStateChanged() از Firebase، مقدار کاربر را دریافت می کنید. این متد در صورتی که کاربر را احراز هویت کند یک شی کاربر را برمی گرداند و اگر نتواند آن را تهی می کند. با استفاده از قلاب useEffect() مقدار کاربر هر بار که وضعیت احراز هویت تغییر می کند به روز می شود.

در index.js، مسیرها را با AuthProvider بپیچید تا اطمینان حاصل کنید که همه اجزا به کاربر در زمینه دسترسی دارند:

import { AuthProvider } from "./AuthProvider";
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="login" element={<Login />} />
          <Route path="profile" element={<Profile />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
    ,
  </React.StrictMode>,
  document.getElementById("root")
);

ایجاد مسیرهای محافظت شده

برای محافظت از مسیرهای حساس، وضعیت احراز هویت کاربری را که سعی دارد به یک صفحه محافظت شده مانند صفحه نمایه پیمایش کند، بررسی کنید.

Profile.js را تغییر دهید تا اگر کاربر احراز هویت نشده باشد.

import { useContext } from "react";
import AuthContext from "./AuthContext";
import { useNavigate, Navigate } from "react-router-dom";
import { signOut } from "./firebase";

const Profile = () => {
  const { user } = useContext(AuthContext);
  const navigate = useNavigate();
  const handleLogout = async () => {
   await signOut();

  };

  if (!user) {
    return <Navigate replace to="/login" />;
  }
  return (
    <>
      <h1>Profile</h1>
 <button onClick={handleLogout}>Logout</button>
    </>
  );
};

export default Profile;

این برنامه به صورت مشروط صفحه نمایه را با هدایت کاربر به صفحه ورود به سیستم در صورت عدم احراز هویت، ارائه می کند.

با احراز هویت Firebase جلوتر بروید

در این آموزش از Firebase برای احراز هویت کاربران با استفاده از ایمیل و رمز عبور آنها استفاده کردید. شما همچنین سوابق کاربری را در Firestore ایجاد کردید. Firebase عملکردهایی را برای کار با ارائه دهندگان احراز هویت مانند Google، Facebook و Twitter ارائه می دهد.

منبع مقاله