كيفية إضافة المصادقة للرد على المحتوى الأصلي في ثلاث خطوات باستخدام Firebase

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

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

1 تثبيت فايربيز الأصلي التفاعل

أول شيء نقوم به هو تثبيت Firebase وتهيئته داخل تطبيقنا. في React Native ، نحتاج إلى استخدام حاوية Firebase لـ React Native. سنستخدم قاعدة تفاعلية أصلية.

إذا كنت على وشك بدء تطبيق React Native جديد من البداية وترغب في استخدام Firebase ، فأنت محظوظ - يمكنك تثبيت رد فعل أصلي-فايربيز مدمج مسبقًا باستخدام React Native CLI.

// npx @react-native-community/cli init [email protected]/template authenticationFirebase //** source: //invertase.io/oss/react-native-firebase/quick-start/new-project 

ثم قم فقط بتثبيت pod لنظام iOS عن طريق تشغيل الأمر التالي داخل الدليل الجذر لتطبيقك.

cd ios && pod install 

إذا كنت تواجه مشكلات في تثبيت مشروع جديد باستخدام Firebase ، فيرجى الرجوع إلى مستندات رد فعل-أصلية-فايربيز

إضافة رد فعل أصلي فايربيز لمشروع قائم

قم بتثبيت react-native-firebaseالحزمة باستخدام الغزل أو npm

 yarn add @react-native-firebase/app 

أو:

 npm install @react-native-firebase/app 

ثم قم بتثبيت البودات لنظام iOS.

shell cd ios && pod install

تشغيل التطبيق

بالنسبة لنظام iOS ، هناك طريقتان للقيام بذلك: أنا شخصياً أستخدم Xcode ، لأنه يعطيني فكرة واضحة إذا حدث خطأ ما وفشل التصميم.

تأكد دائمًا من تشغيل الحزمة - اضغط yarn startلبدء التطبيق.

الطريقة الثانية لتشغيل التطبيق على نظام التشغيل iOS هي تشغيل الأمر التفاعلي run-ios - وهذا كل شيء.

إضافة بيانات اعتماد Firebase

تتطلب هذه الخطوة منا إنشاء مشروع جديد في وحدة تحكم Firebase.

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

يتكون من بضع خطوات:

  • قم بتنزيل GoogleService-info.plistالملف ووضعه داخل مجلد iOS داخل مشروعك.

    إضافة Firebase-ios

  • تهيئة Firebase

تهيئة- Firebase

لأجهزة الأندرويد

يحتوي Android على إعداد مختلف لـ Firebase. في إعدادات المشروع في وحدة تحكم Firebase ، حدد إضافة Firebase إلى Android .

Firebase-to-android

يمكنك وضع أي اسم تريده في إدخال اسم التطبيق - فقط تأكد من توافقه مع متطلبات Firebase. ثم انقر فوق تسجيل .

بعد ذلك ، تحتاج إلى تنزيل google-services.jsonالملف ووضعه في مجلد android / app.

ثم الخطوة التالية هي تهيئة Android SDK.

إضافة الروبوت sdk

الخطوة الأخيرة هي لتطبيق البرنامج المساعد داخل Firebase: android/app/build.gradle .

apply plugin: 'com.google.gms.google-services' 

إذا كانت لديك أية مشكلات في تنفيذ الخطوات المذكورة أعلاه ، فيمكنك دائمًا الرجوع إلى مستندات Firebase أو مواقع الويب التفاعلية الخاصة بـ Firebase.

الآن وقد انتهينا من التكامل ، فإن الخطوة التالية هي تنفيذ وظائف Firebase لإنشاء مستخدمين وتسجيل الدخول إلى React Native.

إضافة تسجيل الدخول ، تسجيل الدخول

هذه المرحلة بسيطة: فقط بعض كود React و JavaScript لاستدعاء وظائف Firebase. سأقوم بإنشاء واجهة مستخدم بسيطة لتسجيل الدخول والاشتراك (هذا ليس ضروريًا لهذا البرنامج التعليمي حتى تتمكن من تخطي هذه الخطوة).

تسجيل الدخول

سأضع الكود المصدري كاملاً في نهاية المقال *

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

التحقق من صحة النموذج

عندما يضغط المستخدم على زر "متابعة" ، __doSignUpسيتم الاتصال به وسيبدو الرمز كما يلي:

const __doSignUp = () => { if (!email) { setError("Email required *") setValid(false) return } else if (!password && password.trim() && password.length > 6) { setError("Weak password, minimum 5 chars") setValid(false) return } else if (!__isValidEmail(email)) { setError("Invalid Email") setValid(false) return } __doCreateUser(email, password) } const __doCreateUser = async (email, password) => { try { let response = await auth().createUserWithEmailAndPassword(email, password) if (response) { console.log(tag, "?", response) } } catch (e) { console.error(e.message) } } 

تأكد من التثبيت @react-native-firebase/authلتتمكن من الاتصالauth().createUserWithEmailAndPassword(email, password)

// import auth import auth from "@react-native-firebase/auth" 

تبدو الوظيفة التي تنشئ مستخدمًا جديدًا في Firebase كما يلي:

const __doCreateUser = async (email, password) =>{ try { let response = await auth().createUserWithEmailAndPassword(email, password); if(response){ console.log(tag,"?",response) } } catch (e) { console.error(e.message); } 

إذا ألقت الوظيفة خطأً ، فتأكد من تمكين طريقة البريد الإلكتروني / كلمة المرور في قسم المصادقة في وحدة تحكم Firebase.

تمكين مصادقة البريد الإلكتروني

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

تسجيل الدخول

هنا هو الكود المصدري لـ SignInComponent.

const SigInComponent = () => { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [fetching, setFetching] = useState(false) const [error, setError] = useState("") const [isValid, setValid] = useState(true) const __doSignUp = () => { if (!email) { setError("Email required *") setValid(false) return } else if (!password && password.trim() && password.length > 6) { setError("Weak password, minimum 5 chars") setValid(false) return } else if (!__isValidEmail(email)) { setError("Invalid Email") setValid(false) return } __doCreateUser(email, password) } const __doCreateUser = async (email, password) => { try { let response = await auth().createUserWithEmailAndPassword( email, password ) if (response && response.user) { Alert.alert("Success ✅", "Account created successfully") } } catch (e) { console.error(e.message) } } return (   {!!fetching && }    Sign Up     { setError setEmail(text) }} error={isValid} />  setPassword(text)} />  {error ? (  {error}  ) : null}    Continue     ) } 

ل LoginComponentانها في معظمها نفس الشيء فقط نحن بحاجة إلى التغيير نستخدم signInWithEmailAndPasswordطريقة بدلا من ذلك.

const __doSingIn = async (email, password) => { try { let response = await auth().signInWithEmailAndPassword(email, password) if (response && response.user) { Alert.alert("Success ✅", "Authenticated successfully") } } catch (e) { console.error(e.message) } } 

! [loginSuccess] (loginSuccess.gif

وقد تم تنفيذ المصادقة بنجاح في تطبيقنا ؟؟

Just one last thing: if we have to verify if the user is already logged in, we need to display something else instead of the Login or SignIn screens. For example, we can display the Home screen.

We can use a Firebase module to verify a session. It can be imported from the auth module.

import auth, { firebase } from "@react-native-firebase/auth" 
 componentDidMount() { // this.register("[email protected]", "123456"); this.__isTheUserAuthenticated(); } __isTheUserAuthenticated = () => { let user = firebase.auth().currentUser.uid; if (user) { console.log(tag, user); this.setState({ authenticated: true }); } else { this.setState({ authenticated: false }); } }; 

And we can change the UI based on if the user is authenticated or not. We can display user info by just using the same method.

firebase.auth().currentUser.email // [email protected] 

And to logout, you can just call await firebase.auth().signOut();

I’m sure integrating navigation like react-navigation would be awesome, but it was not our focus in this article. So feel free to add navigation so you can just navigate based on the user status.

Feel free to check out the full source code ?on GitHub

Thanks for reading.

Originally published on saidhayani.com

Learn more about React native.

  • Twitter
  • GitHub
  • Instagram
  • انضم إلى قائمة البريد