אימות באמצעות ספקי 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, מוסיפים את האפליקציה ל-מסוף 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, פותחים את הקטע Auth.
    2. בכרטיסייה Sign in method, מפעילים את השיטה Google sign-in ולוחצים על 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 הוא הדומיין משלב (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" />

טיפול בתהליך הכניסה באמצעות 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.