אימות באמצעות ספקי OAuth ב-Cordova

באמצעות Firebase JS SDK, אתם יכולים לאפשר למשתמשים ב-Firebase לבצע אימות באמצעות כל ספק OAuth נתמך בסביבת Cordova. אפשר לשלב כל ספק OAuth נתמך באמצעות Firebase SDK, כדי לבצע בכניסה לחשבון, או על ידי ביצוע ידני של זרימת OAuth והעברת את פרטי הכניסה שהתקבלו ב-OAuth ל-Firebase.

איך מגדירים אימות ב-Firebase לקורדובה

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. לוחצים על Save.

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. מוסיפים את ההגדרות הבאות לקובץ config.xml ב-Cordova, כאשר 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

   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.