يوفر Firebase خدمات المصادقة التي تتيح لك تسجيل المستخدمين وتسجيل الدخول بسهولة. يمكنك استخدام البريد الإلكتروني وكلمات المرور وأرقام الهواتف وموفري الهوية مثل Google و Facebook.

في هذا البرنامج التعليمي ، ستتعلم كيف يمكنك استخدام مصادقة Firebase في React لمصادقة المستخدمين باستخدام بريد إلكتروني وكلمة مرور. ستخزن بيانات المستخدم التي تم جمعها في Firestore ، وهي قاعدة بيانات سحابية NoSQL أيضًا من Firebase.

لاحظ أن هذا البرنامج التعليمي يستخدم Firebase v9 و React Router v6.

أنشئ تطبيق Firebase

لتوصيل تطبيقك بـ Firebase، قم بتسجيل تطبيقك في Firebase للحصول على كائن تكوين. هذا ما ستستخدمه لتهيئة Firebase في تطبيق React الخاص بك.

لإنشاء تطبيق Firebase ، اتبع الخطوات التالية.

  1. توجه إلى وحدة تحكم Firebase وانقر أنشئ مشروعًا.
  2. امنح مشروعك اسما وانقر يزيد لبدء العملية.
  3. اضغط على الويب أيقونة (
  4. امنح تطبيقك اسمًا من اختيارك وانقر تسجيل التطبيق. لست بحاجة إلى تمكين استضافة Firebase.
  5. انسخ كائن التكوين أسفل أضف Firebase SDK.

أنشئ تطبيق React

يستخدم إنشاء رد فعل التطبيق لدعم تطبيق React.

npx إنشاء-رد فعل-تطبيق رد فعل-تأليف-فايربيز
instagram viewer

انتقل إلى المجلد وابدأ تشغيل التطبيق.

cd رد فعل- المصادقة- Firebase
بدء تشغيل npm

مصادقة المستخدمين باستخدام وظائف Firebase

قبل استخدام Firebase ، قم بتثبيته.

npm أنا Firebase

قم بإنشاء ملف جديد ، firebase.js ، وتهيئة Firebase.

استيراد {initializeApp} من "firebase / app" ؛
const firebaseConfig = {
 مفتاح API: ,
 نطاق التأليف: ,
 معرف المشروع: ,
 التخزين ,
 المراسلة ,
 معرف التطبيق: 
};
// تهيئة Firebase
تطبيق const = initializeApp (firebaseConfig) ؛

استخدم كائن التكوين الذي نسخته عند تسجيل التطبيق.

قم بعد ذلك باستيراد وحدات Firebase التي ستستخدمها.

يستورد {
 getAuth ،
 createUserWithEmailAndPassword،
 تسجيل الدخول باستخدام البريد الإلكتروني وكلمة المرور ،
 خروج،
} من "firebase / auth" ؛
استيراد {getFirestore، addDoc، collection} من "firebase / firestore" ؛
const db = getFirestore () ،
const auth = getAuth () ؛

ل مصادقة المستخدمين، تحتاج إلى إنشاء ثلاث وظائف: تسجيل الدخول وتسجيل الدخول وتسجيل الخروج.

ال اشتراك وظيفة تمرر البريد الإلكتروني وكلمة المرور إلى createUserWithEmailAndPassword لتسجيل مستخدم جديد. createUserWithEmailAndPassword إرجاع بيانات المستخدم التي ستستخدمها لإنشاء سجل مستخدم جديد في قاعدة البيانات.

const signUp = غير متزامن (البريد الإلكتروني ، كلمة المرور) => {
 يحاول {
 const userCredential = انتظار createUserWithEmailAndPassword (
 المصادقة ،
 البريد الإلكتروني،
 كلمه السر
 );
 مستخدم const = userCredential.user ؛
 في انتظار addDoc (مجموعة (db، "users")، {
 uid: user.uid ،
 البريد الإلكتروني: user.email ،
 });
 العودة صحيحة
 } catch (خطأ) {
 إرجاع {error: error.message}
 }
};

لاحظ أنك لا تتحقق مما إذا كان البريد الإلكتروني قيد الاستخدام بالفعل قبل التسجيل لأن Firebase يتولى ذلك نيابة عنك.

بعد ذلك ، في تسجيل الدخول وظيفة تمرير البريد الإلكتروني وكلمة المرور إلى تسجيل الدخول مع البريد الإلكتروني وكلمة المرور وظيفة لتسجيل الدخول مستخدم مسجل.

const تسجيل الدخول = غير متزامن (البريد الإلكتروني ، كلمة المرور) => {
 يحاول {
 const userCredential = انتظار SignInWithEmailAndPassword (
 المصادقة ،
 البريد الإلكتروني،
 كلمه السر
 );
 مستخدم const = userCredential.user ؛
 العودة صحيحة
 } catch (خطأ) {
 إرجاع {error: error.message}
 }
};

تعود كل من الدالتين SignUp و SignOut إلى true إذا نجحت ورسالة خطأ في حالة حدوث خطأ.

وظيفة SignOut واضحة تمامًا. يستدعي ال خروج() وظيفة من Firebase.

const signOut = غير متزامن () => {
 يحاول {
 في انتظار التوقيع (المصادقة)
 العودة صحيحة
 } catch (خطأ) {
 عودة كاذبة
 }
};

إنشاء نماذج رد الفعل

ستجمع نماذج تسجيل الدخول والاشتراك البريد الإلكتروني وكلمة المرور من المستخدم.

قم بإنشاء مكون جديد Signup.js وأضف ما يلي.

استيراد {useState} من "رد فعل" ؛
استيراد {Link} من "React-router-dom" ؛
استيراد {SignUp} من "./firebase" ؛
الاشتراك في const = () => {
 const [email، setEmail] = useState ("") ؛
 const [password، setPassword] = useState ("") ؛
 const [error، seterror] = useState ("") ؛
 const handleSubmit = غير متزامن (e) => {
 e.preventDefault () ؛
 إذا (كلمة المرور! == password2) {
 seterror ("كلمات المرور لا تتطابق") ؛
 } آخر {
 تعيين البريد الإلكتروني ("") ؛
 ضبط كلمة السر("")؛
 الدقة الثابتة = انتظار التسجيل (البريد الإلكتروني ، كلمة المرور) ؛
 إذا (خطأ الدقة) ضبط الخطأ (خطأ الدقة)
 }
 };
 إرجاع (
 <>
اشتراك




 {خطأ؟ 
{خطأ}
: باطل}


 اكتب = "البريد الإلكتروني"
 الاسم = "البريد الإلكتروني"
 القيمة = {البريد الإلكتروني}
 placeholder = "بريدك الإلكتروني"
 مطلوب
 onChange = {(e) => setEmail (e.target.value)}
 />
 اكتب = "كلمة المرور"
 الاسم = "كلمة المرور"
 القيمة = {كلمة المرور}
 placeholder = "كلمة مرورك"
 مطلوب
 onChange = {(e) => setPassword (e.target.value)}
 />






 مسجل بالفعل؟ تسجيل الدخول






 );
};
تصدير التسجيل الافتراضي ؛

هنا تقوم بإنشاء نموذج تسجيل وتتبع البريد الإلكتروني وكلمة المرور باستخدام الحالة. بمجرد إرسال النموذج ، فإن عند تقديم يؤدي الحدث إلى تشغيل مقبض الوظيفة التي تستدعي اشتراك() وظيفة من firebase.js. إذا قامت الوظيفة بإرجاع خطأ ، فقم بتحديث حالة الخطأ وعرض رسالة الخطأ.

بالنسبة إلى نموذج تسجيل الدخول ، قم بإنشاء Signin.js وأضف ما يلي.

استيراد {useState} من "رد فعل" ؛
استيراد {تسجيل الدخول} من "./firebase" ؛
const تسجيل الدخول = () => {
 const [email، setEmail] = useState ("") ؛
 const [password، setPassword] = useState ("") ؛
 const [error، seterror] = useState ("") ؛
 const handleSubmit = غير متزامن (e) => {
 e.preventDefault () ؛
 تعيين البريد الإلكتروني ("") ؛
 ضبط كلمة السر("")؛
 الدقة الثابتة = انتظار تسجيل الدخول (البريد الإلكتروني ، كلمة المرور) ؛
 إذا (خطأ الدقة) تعيين الخطأ (خطأ الدقة) ؛
 };
 إرجاع (
 <>
 {خطأ؟ 
{خطأ}
: باطل}


 اكتب = "نص"
 الاسم = "البريد الإلكتروني"
 القيمة = {البريد الإلكتروني}
 placeholder = "بريدك الإلكتروني"
 onChange = {(e) => setEmail (e.target.value)}
 />
 اكتب = "كلمة المرور"
 الاسم = "كلمة المرور"
 القيمة = {كلمة المرور}
 placeholder = "كلمة مرورك"
 onChange = {(e) => setPassword (e.target.value)}
 />





 );
};
تصدير تسجيل الدخول الافتراضي ؛

نموذج تسجيل الدخول مشابه تمامًا لصفحة التسجيل فيما عدا أن الإرسال يستدعي ملف تسجيل الدخول() وظيفة.

أخيرًا ، قم بإنشاء صفحة الملف الشخصي. هذه هي الصفحة التي سيعيد التطبيق توجيه المستخدمين إليها بعد المصادقة الناجحة.

خلق Profile.js وأضف ما يلي.

استيراد {تسجيل الخروج} من "./firebase" ؛
ملف تعريف const = () => {
 const handleLogout = غير متزامن () => {
 في انتظار التوقيع () ؛
 };
 إرجاع (
 <>
حساب تعريفي



 );
};
تصدير ملف التعريف الافتراضي ؛

في هذا المكون ، لديك عنوان ملف التعريف وزر تسجيل الخروج. ال عند النقر المعالج الموجود على الزر يؤدي إلى تشغيل ملف مقبض الوظيفة التي تقوم بتسجيل خروج المستخدم.

إنشاء طرق المصادقة

لخدمة الصفحات التي قمت بإنشائها في المتصفح ، قم بإعداد rايكنت راوتر دوم.

ثبت رد فعل جهاز التوجيه دوم:

npm أنا رد فعل جهاز التوجيه دوم

في index.js ، تهيئة رد فعل جهاز التوجيه دوم:

استيراد رد من "رد فعل" ؛
استيراد ReactDOM من "رد فعل دوم" ؛
استيراد {BrowserRouter، Routes، Route} من "response-router-dom" ؛
استيراد التطبيق من "./App" ؛
استيراد تسجيل الدخول من ". / تسجيل الدخول" ؛
استيراد ملف التعريف من ". / الملف الشخصي" ؛
ReactDOM.render (




} />
} />
} />



,
 document.getElementById ("root")
);

حتى هذه اللحظة ، يمكن للتطبيق تسجيل مستخدم وتسجيله وتسجيل الخروج منه. إذن كيف تعرف ما إذا كان المستخدم قد قام بتسجيل الدخول أم لا؟

في القسم التالي من هذا البرنامج التعليمي ، سترى كيف يمكنك استخدام سياق React لتتبع حالة مصادقة المستخدم عبر التطبيق.

إدارة المصادقة باستخدام واجهة برمجة تطبيقات سياق React

React Context هي أداة لإدارة الحالة تعمل على تبسيط مشاركة البيانات عبر التطبيقات. إنه بديل أفضل لحفر الدعامة ، حيث تنتقل البيانات إلى أسفل الشجرة من الأب إلى الطفل حتى تصل إلى المكون الذي يحتاجها.

تكوين سياق المصادقة

في ال src مجلد ، إضافة AuthContext.js ملف وإنشاء وتصدير AuthContext.

استيراد {createContext} من "رد فعل" ؛
const AuthContext = createContext () ،
تصدير AuthContext الافتراضي ؛

بعد ذلك ، أنشئ الموفر بتنسيق AuthProvider.js. سيسمح باستخدام المكونات AuthContext.

استيراد {getAuth، onAuthStateChanged} من "firebase / auth" ؛
استيراد {useState، useEffect} من 'رد فعل'؛
استيراد AuthContext من "./AuthContext"
const auth = getAuth ()
تصدير const AuthProvider = ({children}) => {
 const [user، setUser] = useState (خالية) ؛
 useEffect (() => {
 onAuthStateChanged (المصادقة ، (المستخدم) => {
 setUser (مستخدم)
 })
 }, []);
إرجاع (
{الأطفال}
 );
 };

هنا ، تحصل على قيمة المستخدم باستخدام ملف onAuthStateChanged () طريقة من Firebase. تقوم هذه الطريقة بإرجاع كائن مستخدم إذا كان يصادق على المستخدم ويكون فارغًا إذا لم يستطع ذلك. باستخدام ملف خطاف useEffect ()، يتم تحديث قيمة المستخدم في كل مرة تتغير فيها حالة المصادقة.

في index.js، التفاف المسارات مع مقدم المؤلف لضمان وصول جميع المكونات إلى المستخدم في السياق:

استيراد {AuthProvider} من "./AuthProvider" ؛
ReactDOM.render (




} />
} />
} />



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

إنشاء طرق محمية

ل حماية الطرق الحساسة، تحقق من حالة المصادقة لمستخدم يحاول الانتقال إلى صفحة محمية مثل صفحة الملف الشخصي.

تعديل Profile.js لإعادة توجيه المستخدم إذا لم تتم مصادقته.

استيراد {useContext} من "رد فعل" ؛
استيراد AuthContext من "./AuthContext" ؛
استيراد {useNavigate، Navigate} من "رد فعل جهاز التوجيه-dom"؛
استيراد {تسجيل الخروج} من "./firebase" ؛
ملف تعريف const = () => {
 const {user} = useContext (AuthContext) ،
 const navigate = useNavigate () ؛
 const handleLogout = غير متزامن () => {
 في انتظار التوقيع () ؛
 };
 إذا (! مستخدم) {
 إرجاع ;
 }
 إرجاع (
 <>
حساب تعريفي



 );
};
تصدير ملف التعريف الافتراضي ؛

التطبيق يعرض بشروط صفحة الملف الشخصي عن طريق إعادة توجيه المستخدم إلى صفحة تسجيل الدخول إذا لم تتم مصادقته.

المضي قدمًا مع مصادقة Firebase

في هذا البرنامج التعليمي ، استخدمت Firebase لمصادقة المستخدمين باستخدام بريدهم الإلكتروني وكلمة المرور. لقد قمت أيضًا بإنشاء سجلات مستخدم في Firestore. يوفر Firebase وظائف للعمل مع موفري المصادقة مثل Google و Facebook و Twitter.

أفضل 10 ممارسات تفاعلية يجب اتباعها في عام 2022

اقرأ التالي

يشاركسقسقةيشاركبريد الالكتروني

مواضيع ذات صلة

  • برمجة
  • تتفاعل
  • برمجة
  • جافا سكريبت

عن المؤلف

ماري جاثوني (تم نشر 12 مقالة)

ماري جاثوني هي مطورة برامج لديها شغف لإنشاء محتوى تقني ليس إعلاميًا فحسب ، بل جذابًا أيضًا. عندما لا تقوم بالبرمجة أو الكتابة ، فإنها تستمتع بالتسكع مع الأصدقاء والتواجد في الهواء الطلق.

المزيد من Mary Gathoni

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك