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

باستخدام Firebase JS SDK، يمكنك السماح لمستخدمي Firebase بالمصادقة باستخدام أي موفر OAuth مدعوم في بيئة Cordova. يمكنك دمج أي موفر OAuth مدعوم إما باستخدام Firebase SDK لتنفيذ تدفق تسجيل الدخول، أو عن طريق تنفيذ تدفق 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 ، افتح قسم الروابط الديناميكية .

   2. إذا لم تكن قد قبلت شروط الارتباطات الديناميكية بعد وقمت بإنشاء مجال الارتباطات الديناميكية، فقم بذلك الآن.

      إذا قمت بالفعل بإنشاء مجال الارتباطات الديناميكية، فلاحظ ذلك. عادةً ما يبدو مجال الارتباطات الديناميكية كالمثال التالي:

      example.page.link

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

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

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

6. قم بتثبيت المكونات الإضافية المطلوبة في مشروع كوردوفا الخاص بك.

   # 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 هو المجال من الخطوة (3ج).

   <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" />
   

تعامل مع تدفق تسجيل الدخول باستخدام Firebase SDK

1. تعتمد مصادقة Firebase على حدث deviceReady لتحديد بيئة Cordova الحالية بشكل صحيح. تأكد من تهيئة مثيل تطبيق Firebase بعد تشغيل هذا الحدث.

2. قم بإنشاء مثيل لكائن موفر Google:

   Web modular API

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

   Web namespaced API

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

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

   Web modular API

   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 namespaced API

   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 modular API

   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 namespaced API

   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 .