אימות באמצעות ספקי 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 כדי להוסיף מאוחר יותר בעת התקנת הפלאגין של סכימת כתובת האתר המותאמת אישית.

  4. הפעל קישורים דינמיים של Firebase:

    1. במסוף Firebase , פתח את הקטע קישורים דינמיים .

    2. אם עדיין לא הסכמתם לתנאי ה-Dynamic Links ויצרתם תחום Dynamic Links, עשו זאת כעת.

      אם כבר יצרת דומיין Dynamic Links, שים לב לזה. תחום קישורים דינמיים נראה בדרך כלל כמו הדוגמה הבאה:

      example.page.link

      תזדקק לערך זה כאשר תגדיר את אפליקציית Apple או Android ליירט את הקישור הנכנס.

  5. הפעל כניסה של Google במסוף Firebase:

    1. במסוף Firebase , פתח את הקטע Auth .
    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 בזה.

    עבור יישום אנדרואיד יש להשתמש 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 .