كيفية إعداد مصادقة Firebase مع React في 5 دقائق (ربما 10)

React + Firebase (المصدر: https://css-tricks.com/wp-content/uploads/2017/06/reactfirebase.png)

يا هذا! من الجميل أن نرى لك حولها!

أردت أن أكتب دليلًا بسيطًا لإنجاز المصادقة باستخدام Firebase و React بسرعة.

سأكون مباشرة ومباشرة إلى حد ما هنا. لن أغطي حالات الحافة مثل الطرق المصادق عليها أو تظهر رسائل الخطأ بشكل صحيح.

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

سنستخدم بعض المشاريع المفتوحة المصدر:

  • https://github.com/nodejs/node
  • https://github.com/facebook/react
  • https://github.com/facebook/create-react-app
  • https://github.com/armand1m/react-with-firebase-auth

إعداد التنمية

تأكد من تثبيت:

  • Node.js أحدث LTS

وهذا هو عليه.

التمهيد مشروع عينة

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

قم بتشغيل الأوامر التالية في الجهاز:

# bootstrap تطبيق رد فعل جديد
npx إنشاء رد فعل التطبيق ، رد فعل firebase المصادقة
# الوصول إلى المشروع
مؤتمر نزع السلاح. /react - firebase - المصادقة
# بدء المشروع في وضع التطوير
npm البداية

إعداد Firebase

ابدأ في إنشاء مشروع Firebase إذا لم يكن لديك مشروع بالفعل.

انتقل إلى صفحة المصادقة.

انقر فوق علامة التبويب "طريقة تسجيل الدخول" وتأكد من تمكين Google كموفر لتسجيل الدخول.

هناك الكثير ولكن دعنا نجعل الأمر بسيطًا الآن

مرر لأسفل قليلاً وتأكد أيضًا من وجود مضيف محلي كنطاق معتمد:

في الجزء العلوي من صفحة المصادقة ، انقر على زر "Web Setup".

وسوف تظهر مشروط تماما مثل هذا:

التكوين firebase الخاص بك.

انسخ متغير التكوين والصقه في ملف يسمى firebaseConfig.js. تصديرها بعد ذلك. يجب أن يبدو شيء مثل هذا:

const config = {
    مفتاح API: "***"،
    authDomain: "***" ،
    databaseURL: "***" ،
    معرف المشروع: "***"،
    storageBucket: "***" ،
    messagingSenderId: "***"،
}؛
التكوين الافتراضي التصدير ؛

احتفظ بهذا الملف مخزّنًا في src / firebaseConfig.js.

نحن الآن بصدد تثبيت مكتبات Firebase ومكون أعلى ترتيب من خلال NPM.

قم بتشغيل الأمر التالي:

تثبيت npm - حفظ firebase تتفاعل مع firebase- مصادقة

الشفرة

الآن يمكننا أخيرًا بدء الجزء الرائع.

حاليًا ، تطبيقك هو تطبيق افتراضي لـ CRA بدون أي شيء بارد عليه. سنقوم بتعديل مكون src / App.js.

أدخل هذه الواردات الأربعة في الجزء العلوي من الملف:

استيراد withFirebaseAuth من 'react-with-firebase-auth'
استيراد * كـ firebase من 'firebase / app' ؛
استيراد 'firebase / المصادقة' ؛
استيراد firebaseConfig من './firebaseConfig' ؛

قم بتهيئة تطبيق Firebase باستخدام التكوين:

const firebaseApp = firebase.initializeApp (firebaseConfig) ؛

قم بإعداد الموفرين الذين نريد دعمهم والوصول إلى مكتبة المصادقة:

const firebaseAppAuth = firebaseApp.auth ()؛
مزودو الخدمة
  googleProvider: new firebase.auth.GoogleAuthProvider () ،
}؛

التفاف تصدير مكون التطبيق باستخدام withFirebaseAuth HOC:

تصدير افتراضي مع FirebaseAuth ({
  مقدمي الخدمات،
  firebaseAppAuth،
})(تطبيق)؛

الآن يمكننا الوصول إلى الخصائص التي توفرها withFirebaseAuth HOC في مكون التطبيق.

يوفر لنا المستخدم والخطأ وبعض أساليب تسجيل الدخول وتسجيل الخروج كخصائص.

حتى نتمكن من إضافة هذا إلى طريقة العرض لدينا:

مقدار ثابت {
  المستعمل،
  خروج،
  الدخول مع جوجل،
} = this.props؛

وقم بتغيير الترميز ليطلب من المستخدم تسجيل الدخول أو الخروج:

إرجاع (
  
    
      logo       {         المستعمل           ؟

مرحبًا ، {user.displayName}

          :

يرجى تسجيل الدخول.       }       {         المستعمل           ؟       }        

وهذا هو عليه!

إذا قمت بالتحقق من https: // localhost: 3000 ، فربما ترى هذا:

حالة غير مصادقة

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

بعد منح حق الوصول ، سترى شيئًا مثل هذا:

حالة مصادقة. على الأرجح سيكون اسمك هناك بدلاً من ذلك.

إذا قمت بتحديث الصفحة ، فستبقي المستخدم الخاص بك بتسجيل الدخول طالما يعتبر Firebase أن بيانات الاعتماد لا تزال صالحة.

هذا هو!

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

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

يمكنك العثور على شفرة المصدر الناتجة هنا: https://github.com/armand1m/react-firebase-authentication-medium

شكرا للقراءة ، cya! ❤

تعديل:

تتوفر هذه المقالة أيضًا باللغة الفيتنامية هنا https://viblo.asia/p/cai-dat-firebase-authenticantion-bang-react-trong-5-phut-naQZRpe05vx