المصادقة باستخدام موفري OAuth مع Cordova

باستخدام حزمة تطوير البرامج (SDK) لـ Firebase JS، يمكنك السماح لمستخدمي Firebase بالمصادقة باستخدام موفِّر بروتوكول OAuth المتوافق في بيئة Cordova. يمكنك دمج أي موفِّر OAuth متوافق، سواء من خلال استخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase لتنفيذ أو تسجيل الدخول أو من خلال تنفيذ مسار OAuth يدويًا وتمرير بيانات اعتماد OAuth الناتجة إلى Firebase.

إعداد مصادقة Firebase لتطبيق Cordova

1. أضِف Firebase إلى مشروع JavaScript. عند إضافة مقتطف من Firebase، فدوِّن متغير الضبط authDomain، الذي يُفترض أن يشبه my-app.firebaseapp.com. في حال استخدام نطاق خاص بدلاً من نطاق firebaseapp.com الذي يديره Firebase، استخدام النطاق بدلاً من ذلك.

2. لإعداد تطبيق Android، أضِف تطبيق Android إلى وحدة تحكّم Firebase. وأدخِل تفاصيل تطبيقك. لا تحتاج إلى الملف الذي تم إنشاؤه google-services.json.

3. لإعداد تطبيق iOS، يمكنك إنشاء تطبيق iOS وإضافته إلى وحدة تحكّم Firebase. ستحتاج إلى معرّف حزمة iOS لإضافته لاحقًا. تثبيت المكوّن الإضافي لنظام عنوان URL المخصص.

4. تفعيل روابط Firebase الديناميكية:

   1. في وحدة تحكُّم Firebase، افتح القسم Dynamic Links.

   2. في حال عدم قبولك بنود "Dynamic Links" بعد وإنشاء Dynamic Links مجالك، قم بذلك الآن.

      إذا سبق لك إنشاء نطاق Dynamic Links، يُرجى تدوينه. Dynamic Links على النحو التالي:

      example.page.link

      ستحتاج إلى هذه القيمة عند ضبط تطبيق Apple أو Android على لاعتراض الرابط الوارد.

5. تفعيل "تسجيل الدخول بحساب Google" في وحدة تحكُّم Firebase:

   1. في وحدة تحكُّم Firebase، افتح قسم المصادقة.
   2. في علامة التبويب طريقة تسجيل الدخول، فعِّل طريقة تسجيل الدخول باستخدام حساب Google مع انقر على حفظ.

6. ثبِّت المكوّنات الإضافية المطلوبة في مشروع Cordova.

   # Plugin to pass application build info (app name, ID, etc) to the OAuth widget.
   cordova plugin add cordova-plugin-buildinfo --save
   # Plugin to handle Universal Links (Android app link redirects)
   cordova plugin add cordova-universal-links-plugin-fix --save
   # Plugin to handle opening secure browser views on iOS/Android mobile devices
   cordova plugin add cordova-plugin-browsertab --save
   # Plugin to handle opening a browser view in older versions of iOS and Android
   cordova plugin add cordova-plugin-inappbrowser --save
   # Plugin to handle deep linking through Custom Scheme for iOS
   # Substitute *com.firebase.cordova* with the iOS bundle ID of your app.
   cordova plugin add cordova-plugin-customurlscheme --variable \
       URL_SCHEME=com.firebase.cordova --save

7. أضِف الإعدادات التالية إلى ملف Cordova config.xml، حيث AUTH_DOMAIN هو النطاق من الخطوة (1)، وDYNAMIC_LINK_DOMAIN هو النطاق النطاق من الخطوة (3c).

   <universal-links>
       <host name="DYNAMIC_LINK_DOMAIN" scheme="https" />
       <host name="AUTH_DOMAIN" scheme="https">
           <path url="/__/auth/callback"/>
       </host>
   </universal-links>
   

   قد يظهر أحد الأمثلة على الإعدادات على النحو التالي:

   <universal-links>
       <host name="example.page.link" scheme="https" />
       <host name="example-app.firebaseapp.com" scheme="https">
           <path url="/__/auth/callback"/>
       </host>
   </universal-links>
   

   في حال استخدام نطاق خاص auth.custom.domain.com، يُرجى استبدال my-app.firebaseapp.com مع ذلك.

   في تطبيق Android، يجب استخدام singleTask مع launchMode.

   <preference name="AndroidLaunchMode" value="singleTask" />
   

معالجة عملية تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase

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

2. إنشاء مثيل لعنصر موفّر الخدمة من Google:

   Web

   import { GoogleAuthProvider } from "firebase/auth/cordova";
   
   const provider = new GoogleAuthProvider();
   auth_create_google_provider.js

   Web

   var provider = new firebase.auth.GoogleAuthProvider();
   cordova.js

3. المصادقة مع Firebase باستخدام كائن موفّر Google باستخدام signInWithRedirect لاحظ أن signInWithPopup غير متاح في Cordova.

   Web

   import { getAuth, signInWithRedirect, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";
   
   const auth = getAuth();
   signInWithRedirect(auth, new GoogleAuthProvider())
     .then(() => {
       return getRedirectResult(auth);
     })
     .then((result) => {
       const credential = GoogleAuthProvider.credentialFromResult(result);
   
       // This gives you a Google Access Token.
       // You can use it to access the Google API.
       const token = credential.accessToken;
   
       // The signed-in user info.
       const user = result.user;
       // ...
     }).catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
     });
   auth_cordova_sign_in_redirect.js

   Web

   firebase.auth().signInWithRedirect(provider).then(() => {
     return firebase.auth().getRedirectResult();
   }).then((result) => {
     /** @type {firebase.auth.OAuthCredential} */
     var credential = result.credential;
   
     // This gives you a Google Access Token.
     // You can use it to access the Google API.
     var token = credential.accessToken;
     // The signed-in user info.
     var user = result.user;
     // ...
   }).catch((error) => {
     // Handle Errors here.
     var errorCode = error.code;
     var errorMessage = error.message;
   });
   cordova.js

4. لمعالجة الحالة التي يتم فيها إتلاف النشاط على التطبيق قبل تسجيل الدخول اكتملت العملية، يمكنك طلب الرقم getRedirectResult عند استخدام تطبيقك التحميل.

   Web

   import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       const credential = GoogleAuthProvider.credentialFromResult(result);
       if (credential) {        
         // This gives you a Google Access Token.
         // You can use it to access the Google API.
         const token = credential.accessToken;
         // The signed-in user info.
         const user = result.user;
         // ...
       }
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
     });
   auth_cordova_redirect_result.js

   Web

   firebase.auth().getRedirectResult().then((result) => {
     if (result.credential) {
       /** @type {firebase.auth.OAuthCredential} */
       var credential = result.credential;
   
       // This gives you a Google Access Token.
       // You can use it to access the Google API.
       var token = credential.accessToken;
       // The signed-in user info.
       var user = result.user;
       // ...
     }
   }).catch((error) => {
     // Handle Errors here.
     var errorCode = error.code;
     var errorMessage = error.message;
   });
   cordova.js

   يمكن استخدام الآلية نفسها لربط موفِّر خدمة جديد من خلال linkWithRedirect أو إعادة المصادقة مع مقدم خدمة حالي باستخدام reauthenticateWithRedirect.