Firebase מספקת שירותי אימות המאפשרים לך לרשום ולהיכנס למשתמשים בקלות. אתה יכול להשתמש באימייל, סיסמאות, מספרי טלפון וספקי זהות כמו גוגל ופייסבוק.

במדריך זה תלמד כיצד אתה יכול להשתמש באימות Firebase ב-React כדי לאמת משתמשים באמצעות דואר אלקטרוני וסיסמה. אתה תשמור את נתוני המשתמש שנאספו ב-Firestore, מסד נתונים של NoSQL בענן גם מ-Firebase.

שים לב שמדריך זה משתמש ב-Firebase v9 וב-React Router v6.

צור אפליקציית Firebase

כדי לחבר את האפליקציה שלך ל Firebase, רשום את האפליקציה שלך ב-Firebase כדי לקבל אובייקט תצורה. זה מה שתשתמש כדי לאתחל את Firebase באפליקציית React שלך.

כדי ליצור יישום Firebase, בצע את השלבים הבאים.

1. פנה אל ה קונסולת Firebase ולחץ צור פרויקט.
2. תן לפרויקט שלך שם ולחץ לִיצוֹר כדי להתחיל את התהליך.
3. הקלק על ה אינטרנט סמל (
4. תן לאפליקציה שלך שם לבחירתך ולחץ הרשמה אפליקציה. אינך צריך להפעיל את Firebase Hosting.
5. העתק את אובייקט התצורה תחת הוסף Firebase SDK.

צור אפליקציית React

להשתמש ליצור-להגיב-אפליקציה לפיגום אפליקציית React.

npx create-react-app react-auth-firebase

נווט אל התיקיה והפעל את האפליקציה.

cd react-auth-firebase
הפעלת npm run

אימות משתמשים עם פונקציות Firebase

לפני השימוש ב-Firebase, התקן אותו.

npm i firebase

צור קובץ חדש, firebase.js, ואתחול Firebase.

לייבא את { initializeApp } מ-"firebase/app";
const firebaseConfig = {
 apiKey: ,
 authDomain: ,
 מזהה פרויקט: ,
 דלי אחסון: ,
 messagingSenderId: ,
 appId: 
};
// אתחול Firebase
const app = initializeApp (firebaseConfig);

השתמש באובייקט התצורה שהעתקת כשרשמת את האפליקציה.

בשלב הבא ייבא את מודולי Firebase שבהם תשתמש.

ייבוא ​​{
 getAuth,
 createUserWithEmailAndPassword,
 signInWithEmailAndPassword,
 התנתק,
} מתוך "firebase/auth";
ייבא { getFirestore, addDoc, collection } מ-"firebase/firestore";
const db = getFirestore();
const auth = getAuth();

ל לאמת משתמשים, עליך ליצור שלוש פונקציות: SignUp, SignIn ו-signOut.

ה הירשם הפונקציה מעבירה את האימייל והסיסמה ל createUserWithEmailAndPassword כדי לרשום משתמש חדש. createUserWithEmailAndPassword מחזירה את נתוני המשתמש שבהם תשתמש כדי ליצור רשומת משתמש חדשה במסד הנתונים.

const signUp = אסינכרון (אימייל, סיסמה) => {
 נסה {
 const userCredential = await createUserWithEmailAndPassword(
 אות,
 אימייל,
 סיסמה
 );
 const user = userCredential.user;
 await addDoc (אוסף (db, "משתמשים"), {
 uid: user.uid,
 דוא"ל: user.email,
 });
 להחזיר אמת
 } תפוס (שגיאה) {
 החזר {שגיאה: error.message}
 }
};

שים לב שאתה לא בודק אם האימייל כבר בשימוש לפני ההרשמה מכיוון ש-Firebase מטפל בזה בשבילך.

לאחר מכן, ב- להתחבר הפונקציה להעביר את האימייל והסיסמה ל- signInWithEmailAndPassword פונקציה לכניסה למשתמש רשום.

const signIn = אסינכרון (אימייל, סיסמה) => {
 נסה {
 const userCredential = await signInWithEmailAndPassword(
 אות,
 אימייל,
 סיסמה
 );
 const user = userCredential.user;
 להחזיר אמת
 } תפוס (שגיאה) {
 החזר {שגיאה: error.message}
 }
};

גם הפונקציות SignUp וגם SignOut מחזירות true אם מצליחים והודעת שגיאה אם ​​מתרחשת שגיאה.

פונקציית היציאה היא די פשוטה. זה קורא ל התנתק() פונקציה מ-Firebase.

const signOut = async() => {
 נסה {
 ממתין ליציאה (אישור)
 להחזיר אמת
 } תפוס (שגיאה) {
 החזר false
 }
};

צור טפסי תגובה

טפסי הכניסה וההרשמה יאספו את האימייל והסיסמה מהמשתמש.

צור רכיב חדש Signup.js והוסיפו את הדברים הבאים.

ייבוא ​​{ useState } מ-"react";
ייבוא ​​{ Link } מ-"react-router-dom";
ייבוא ​​{ signUp } מ-"./firebase";
const הרשמה = () => {
 const [email, setEmail] = useState("");
 const [סיסמה, setPassword] = useState("");
 const [error, seterror] = useState("");
 const handleSubmit = אסינכרון (ה) => {
 e.preventDefault();
 if (סיסמה !== סיסמה2) {
 seterror("סיסמאות אינן תואמות");
 } אחר {
 setEmail("");
 הגדר סיסמא("");
 const res = await signUp (אימייל, סיסמה);
 if (res.error) seterror (res.error)
 }
 };
 לחזור (
 <>
הירשם



 {שְׁגִיאָה? 
{שְׁגִיאָה}
: ריק}


 type="email"
 name="email"
 value={email}
 placeholder="אימייל שלך"
 נדרש
 onChange={(e) => setEmail (e.target.value)}
 />
 type="סיסמה"
 name="סיסמה"
 value={סיסמה}
 placeholder="הסיסמה שלך"
 נדרש
 onChange={(e) => setPassword (e.target.value)}
 />
שלח




 כבר רשום? התחברות





 );
};
ייצוא הרשמה כברירת מחדל;

כאן אתה יוצר טופס הרשמה ועוקב אחר המייל והסיסמה באמצעות מצב. לאחר שליחת הטופס, ה ב-Submit אירוע מפעיל את handleSubmit() פונקציה הקוראת ל- הירשם() לתפקד מ firebase.js. אם הפונקציה מחזירה שגיאה, עדכן את מצב השגיאה והצג את הודעת השגיאה.

עבור טופס הכניסה, צור Signin.js והוסיפו את הדברים הבאים.

ייבוא ​​{ useState } מ-"react";
ייבוא ​​{ signIn } מ-"./firebase";
const כניסה = () => {
 const [email, setEmail] = useState("");
 const [סיסמה, setPassword] = useState("");
 const [error, seterror] = useState("");
 const handleSubmit = אסינכרון (ה) => {
 e.preventDefault();
 setEmail("");
 הגדר סיסמא("");
 const res = await signIn (אימייל, סיסמה);
 if (res.error) seterror (res.error);
 };
 לחזור (
 <>
 {שְׁגִיאָה? 
{שְׁגִיאָה}
: ריק}


 type="text"
 name="email"
 value={email}
 placeholder="אימייל שלך"
 onChange={(e) => setEmail (e.target.value)}
 />
 type="סיסמה"
 name="סיסמה"
 value={סיסמה}
 placeholder="הסיסמה שלך"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
ייצוא ברירת מחדל כניסה;

טופס הכניסה דומה למדי לדף ההרשמה, אלא שההגשה קוראת ל- להתחבר() פוּנקצִיָה.

לבסוף, צור את דף הפרופיל. זהו הדף שאליו האפליקציה תפנה משתמשים לאחר אימות מוצלח.

לִיצוֹר Profile.js והוסיפו את הדברים הבאים.

ייבוא ​​{ signOut } מ-"./firebase";
const Profile = () => {
 const handleLogout = אסינכרון () => {
 await signOut();
 };
 לחזור (
 <>
פּרוֹפִיל

להתנתק
 );
};
ייצוא פרופיל ברירת מחדל;

ברכיב זה, יש לך את כותרת הפרופיל ואת כפתור היציאה. ה בלחיצה המטפל על הכפתור מפעיל את handleLogout פונקציה שמוציאה את המשתמש.

צור נתיבי אימות

כדי להגיש את הדפים שיצרת לדפדפן, הגדר את react-router-dom.

להתקין תגובה-נתב-דום:

npm אני מגיב-נתב-דום

ב index.js, להגדיר תגובה-נתב-דום:

ייבוא ​​תגובה מ-"react";
ייבוא ​​ReactDOM מ-"react-dom";
לייבא { BrowserRouter, Routes, Route } מ-"react-router-dom";
ייבוא ​​אפליקציה מ-"./App";
ייבוא ​​התחברות מ-"./Login";
ייבוא ​​פרופיל מ-"./Profile";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("root")
);

עד לנקודה זו, האפליקציה יכולה לרשום משתמש, להירשם ולנתק אותו. אז איך יודעים אם משתמש מחובר או לא?

בחלק הבא של מדריך זה, תראה כיצד תוכל להשתמש בהקשר של React כדי לעקוב אחר סטטוס האימות של משתמש בכל האפליקציה.

נהל אימות באמצעות ממשק API של React Context

React Context הוא כלי לניהול מצב המפשט את שיתוף הנתונים בין אפליקציות. זוהי אלטרנטיבה טובה יותר לקידוח משענת, כאשר הנתונים עוברים על העץ מהורה לילד עד שהם מגיעים לרכיב שזקוק להם.

צור הקשר אימות

בתוך ה src תיקייה, הוסף AuthContext.js קובץ וצור וייצא AuthContext.

ייבוא ​​{ createContext } מ-"react";
const AuthContext = createContext();
ייצוא ברירת מחדל AuthContext;

לאחר מכן, צור את הספק ב AuthProvider.js. זה יאפשר שימוש ברכיבים AuthContext.

ייבא { getAuth, onAuthStateChanged } מ-"firebase/auth";
ייבוא ​​{ useState, useEffect } מ-'react';
ייבוא ​​AuthContext מ-'./AuthContext'
const auth = getAuth()
ייצוא const AuthProvider = ({ ילדים }) => {
 const [משתמש, setUser] = useState (null);
 useEffect(() => {
 onAuthStateChanged (auth,(משתמש) => {
 setUser (משתמש)
 })
 }, []);
לחזור (
{יְלָדִים}
 );
 };

כאן, אתה מקבל את ערך המשתמש על ידי שימוש ב- onAuthStateChanged() שיטה מ-Firebase. שיטה זו מחזירה אובייקט משתמש אם הוא מאמת את המשתמש ו-null אם הוא לא יכול. על ידי שימוש ב הוק של useEffect()., ערך המשתמש מתעדכן בכל פעם שסטטוס האימות משתנה.

ב index.js, עוטפים את המסלולים עם AuthProvider כדי להבטיח שכל הרכיבים ניגשים למשתמש בהקשר:

לייבא את { AuthProvider } מ-"./AuthProvider";
ReactDOM.render(




} />
} />
} />



 ,
,
 document.getElementById("root")
);

צור מסלולים מוגנים

ל להגן על מסלולים רגישים, בדוק את סטטוס האימות של משתמש שמנסה לנווט לדף מוגן כמו דף הפרופיל.

לְשַׁנוֹת Profile.js כדי להפנות מחדש משתמש אם הוא לא מאומת.

ייבוא ​​{ useContext } מ-"react";
ייבוא ​​AuthContext מ-"./AuthContext";
ייבוא ​​{ useNavigate, Navigate } מ-"react-router-dom";
ייבוא ​​{ signOut } מ-"./firebase";
const Profile = () => {
 const { משתמש } = useContext (AuthContext);
 const navigate = useNavigate();
 const handleLogout = אסינכרון () => {
 await signOut();
 };
 if (!user) {
 לַחֲזוֹר ;
 }
 לחזור (
 <>
פּרוֹפִיל

להתנתק
 );
};
ייצוא פרופיל ברירת מחדל;

האפליקציה מעבד באופן מותנה דף הפרופיל על ידי הפניית המשתמש לדף הכניסה אם הוא לא מאומת.

הולכים רחוק יותר עם אימות Firebase

במדריך זה, השתמשת ב-Firebase כדי לאמת משתמשים באמצעות הדוא"ל והסיסמה שלהם. יצרת גם רשומות משתמש ב-Firestore. Firebase מספק פונקציות לעבודה עם ספקי אימות כמו גוגל, פייסבוק וטוויטר.

10 שיטות עבודה מומלצות להגיב שאתה צריך לבצע בשנת 2022

קרא הבא

על הסופר