מוסיפים בקלות כניסה לאפליקציית האינטרנט באמצעות FirebaseUI

FirebaseUI היא ספרייה שמבוססת על בחלק העליון של ה-SDK כדי לאמת ב-Firebase, שמספק תהליכי עבודה נפתחים בממשק המשתמש באפליקציה שלך. אלה היתרונות שאפשר להפיק מ-FirebaseUI:

  • ספקים מרובים - תהליכי כניסה לכתובת אימייל/סיסמה, קישור לאימייל, טלפון אימות, כניסה ל-Google, ל-Facebook, ל-Twitter ול-GitHub.
  • קישור חשבונות – בתהליך לקישור בטוח של חשבונות משתמשים בין זהויות לספקים שונים.
  • התאמה אישית – שינוי של סגנונות ה-CSS של FirebaseUI בהתאם לדרישות האפליקציה. בנוסף, מכיוון ש-FirebaseUI הוא קוד פתוח, אפשר לחבר ולהתאים אותו אישית בדיוק לפי הצרכים שלכם.
  • הרשמה בהקשה אחת וכניסה אוטומטית – שילוב אוטומטי עם הרשמה בהקשה אחת כדי להיכנס לחשבון במהירות במכשירים שונים.
  • ממשק משתמש מקומי – התאמה לשוק הבינלאומי ליותר מ-40 שפות.
  • שדרוג משתמשים אנונימיים – אפשרות לשדרג משתמשים אנונימיים באמצעות כניסה/הרשמה. לקבלת מידע נוסף, אפשר לעיין במאמר שדרוג משתמשים אנונימיים. .

לפני שמתחילים

  1. מוסיפים את Firebase Authentication לאפליקציית האינטרנט, ומוודאים שמשתמשים ב-SDK התואמת לגרסה 9 (מומלץ) או ב-SDK ישנה יותר (ראו סרגל הצד למעלה).

  2. מוסיפים את FirebaseUI באחת מהאפשרויות הבאות:

    1. CDN

      יש לכלול את הסקריפט ואת קובץ ה-CSS הבאים בתג <head> תג של של הדף, מתחת לקטע הקוד של האתחול ממסוף Firebase:

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

    2. מודול npm

      מתקינים את FirebaseUI ואת יחסי התלות שלו דרך npm באמצעות הקוד הבא הפקודה:

      $ npm install firebaseui --save

      require את המודולים הבאים בקובצי המקור:

      var firebase = require('firebase');
var firebaseui = require('firebaseui');

    3. רכיב Bower

      מתקינים את FirebaseUI ואת יחסי התלות שלה דרך Bower דרך Bower באמצעות הפקודה:

      $ bower install firebaseui --save

      אם שרת ה-HTTP שלכם מציג את הקבצים ב-bower_components/, צריך לכלול את הקבצים הנדרשים ב-HTML:

      <script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />

אתחול FirebaseUI

אחרי שמייבאים את ה-SDK, מאתחלים את ממשק המשתמש של האימות.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

הגדרה של שיטות כניסה

כדי שתוכלו להשתמש ב-Firebase כדי להכניס משתמשים לחשבון, עליכם להפעיל ולהגדיר את שיטות הכניסה שבהן אתם רוצים לתמוך.

כתובת אימייל וסיסמה

  1. במסוף Firebase, פותחים את הקטע אימות ומפעילים אימות באמצעות אימייל וסיסמה.

  2. מוסיפים את המזהה של ספק האימייל לרשימה של FirebaseUI signInOptions.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  3. אופציונלי: אפשר להגדיר את השדה EmailAuthProvider כך שהמשתמש יצטרך להזין שם מוצג (ברירת המחדל היא true).

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false
    }
  ]
});

  1. במסוף Firebase, פותחים את הקטע אימות. ב הכרטיסייה שיטת כניסה, מפעילים את ספק האימייל/סיסמה. הערה שכדי להשתמש בכניסה באמצעות קישור לאימייל, צריך להפעיל את הכניסה לחשבון באמצעות האימייל או הסיסמה.

  2. באותו קטע, מפעילים את האפשרות קישור לאימייל (כניסה ללא סיסמה). ולוחצים על Save.

  3. מוסיפים את המזהה של ספק האימייל לרשימה של FirebaseUI signInOptions. עם הקישור לאימייל signInMethod.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
    }
  ],
  // Other config options...
});

  4. כשמריצים עיבוד מותנה של ממשק המשתמש לכניסה (רלוונטי לאפליקציות של דף יחיד), צריך להשתמש ב-ui.isPendingRedirect() כדי לזהות אם כתובת ה-URL תואמת לכניסה באמצעות קישור לאימייל, ואם צריך להריץ עיבוד של ממשק המשתמש כדי להשלים את הכניסה.

    // Is there an email link sign-in?
if (ui.isPendingRedirect()) {
  ui.start('#firebaseui-auth-container', uiConfig);
}
// This can also be done via:
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  ui.start('#firebaseui-auth-container', uiConfig);
}

  5. אופציונלי: EmailAuthProvider לכניסה באמצעות קישור לאימייל יכול להיות מוגדרת לאפשר או לחסום את האפשרות של המשתמש להשלים כניסה בין מכשירים.

    אפשר להגדיר קריאה חוזרת (callback) אופציונלית של emailLinkSignIn כדי להחזיר את firebase.auth.ActionCodeSettings תצורה שישמשו לשליחת הקישור. כך תוכלו לציין איך המערכת תפעל את הקישור, קישור דינמי בהתאמה אישית, מצב נוסף בקישור העומק וכו'. אם לא תספקו את הפרמטר הזה, המערכת תשתמש בכתובת ה-URL הנוכחית ותפעיל תהליך לגלישה באינטרנט בלבד.

    הכניסה עם קישור לאימייל ב-FirebaseUI-web תואמת FirebaseUI ל-Android וגם FirebaseUI-iOS שבו משתמש אחד שמתחיל את התהליך מ-FirebaseUI-Android יכול לפתוח את הקישור והשלימו את הכניסה באמצעות FirebaseUI-web. גם ההפך נכון .

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
      // Allow the user the ability to complete sign-in cross device,
      // including the mobile apps specified in the ActionCodeSettings
      // object below.
      forceSameDevice: false,
      // Used to define the optional firebase.auth.ActionCodeSettings if
      // additional state needs to be passed along request and whether to open
      // the link in a mobile app if it is installed.
      emailLinkSignIn: function() {
        return {
          // Additional state showPromo=1234 can be retrieved from URL on
          // sign-in completion in signInSuccess callback by checking
          // window.location.href.
          url: 'https://www.example.com/completeSignIn?showPromo=1234',
          // Custom FDL domain.
          dynamicLinkDomain: 'example.page.link',
          // Always true for email link sign-in.
          handleCodeInApp: true,
          // Whether to handle link in iOS app if installed.
          iOS: {
            bundleId: 'com.example.ios'
          },
          // Whether to handle link in Android app if opened in an Android
          // device.
          android: {
            packageName: 'com.example.android',
            installApp: true,
            minimumVersion: '12'
          }
        };
      }
    }
  ]
});

ספקי OAuth (Google,‏ Facebook,‏ Twitter ו-GitHub)

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

  2. בנוסף, בקטע Authentication, מוודאים את הדומיין שבו דף הכניסה לחשבון יתווסף גם לרשימת הדומיינים המורשים.

  3. מוסיפים את המזהה של ספק OAuth לרשימה של FirebaseUI signInOptions.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    // List of OAuth providers supported.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. אופציונלי: כדי לציין היקפים מותאמים אישית או פרמטרים מותאמים אישית של OAuth עבור בספק: אפשר להעביר אובייקט במקום רק את ערך הספק:

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      scopes: [
        'https://www.googleapis.com/auth/contacts.readonly'
      ],
      customParameters: {
        // Forces account selection even when one account
        // is available.
        prompt: 'select_account'
      }
    },
    {
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      scopes: [
        'public_profile',
        'email',
        'user_likes',
        'user_friends'
      ],
      customParameters: {
        // Forces password re-entry.
        auth_type: 'reauthenticate'
      }
    },
    firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter does not support scopes.
    firebase.auth.EmailAuthProvider.PROVIDER_ID // Other providers don't need to be given as object.
  ]
});

מספר טלפון

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

  2. צריך לוודא שהדומיין שבו יוצג דף הכניסה נוסף לרשימת הדומיינים המורשים.

  3. מוסיפים את המזהה של ספק מספר הטלפון לרשימה של FirebaseUI signInOptions.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. אופציונלי: אפשר להגדיר את PhoneAuthProvider עם פרמטרים מותאמים אישית של reCAPTCHA, גם אם reCAPTCHA גלוי וגם אם הוא בלתי נראה (ברירת המחדל היא 'רגיל'). למידע נוסף, קראו את מסמכי העזרה של reCAPTCHA API.

    אפשר גם להגדיר את מדינת ברירת המחדל לבחירה בקלט של מספר הטלפון. רשימת קודי המדינות הנתמכים אם לא צוין מספר טלפון, ערך ברירת המחדל של מספר הטלפון הוא ארצות הברית. (+1).

    כרגע יש תמיכה באפשרויות הבאות.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      recaptchaParameters: {
        type: 'image', // 'audio'
        size: 'normal', // 'invisible' or 'compact'
        badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
      },
      defaultCountry: 'GB', // Set default country to the United Kingdom (+44).
      // For prefilling the national number, set defaultNationNumber.
      // This will only be observed if only phone Auth provider is used since
      // for multiple providers, the NASCAR screen will always render first
      // with a 'sign in with phone number' button.
      defaultNationalNumber: '1234567890',
      // You can also pass the full phone number string instead of the
      // 'defaultCountry' and 'defaultNationalNumber'. However, in this case,
      // the first country ID that matches the country code will be used to
      // populate the country selector. So for countries that share the same
      // country code, the selected country may not be the expected one.
      // In that case, pass the 'defaultCountry' instead to ensure the exact
      // country is selected. The 'defaultCountry' and 'defaultNationaNumber'
      // will always have higher priority than 'loginHint' which will be ignored
      // in their favor. In this case, the default country will be 'GB' even
      // though 'loginHint' specified the country code as '+1'.
      loginHint: '+11234567890'
    }
  ]
});

כניסה

כדי להתחיל את תהליך הכניסה של FirebaseUI, מאתחלים את מכונת FirebaseUI על ידי העברת המופע הבסיסי של Auth.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

מגדירים את רכיב ה-HTML שבו יופיע הווידג'ט של FirebaseUI לכניסה.

<!-- The surrounding HTML is left untouched by FirebaseUI.
     Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>

קביעת ההגדרה של FirebaseUI (ספקים נתמכים והתאמות אישיות של ממשק המשתמש) וגם קריאות חוזרות (callback) ללא הצלחה וכו').

var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      // The widget is rendered.
      // Hide the loader.
      document.getElementById('loader').style.display = 'none';
    }
  },
  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>',
  // Privacy policy url.
  privacyPolicyUrl: '<your-privacy-policy-url>'
};

לבסוף, מעבדים את הממשק של FirebaseUI Auth:

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

שדרוג משתמשים אנונימיים

הפעלת שדרוג של משתמשים אנונימיים

כשמשתמש אנונימי נכנס לחשבון או נרשם עם חשבון קבוע, רצוי כדי לוודא שהמשתמש יכול להמשיך במה שהוא עשה לפני ההרשמה. כדי לעשות זאת, צריך להגדיר את autoUpgradeAnonymousUsers לערך true כשמגדירים את ממשק המשתמש של הכניסה (האפשרות הזו מושבתת כברירת מחדל).

טיפול בהתנגשויות במיזוגים של שדרוגים אנונימיים של משתמשים

יש מקרים שבהם משתמש, שנכנס באופן אנונימי בהתחלה, ינסה לשדרג למשתמש קיים ב-Firebase. מכיוון שאי אפשר לקשר משתמש קיים למשתמש קיים אחר, FirebaseUI יפעיל את פונקציית ה-call back‏ signInFailure עם קוד השגיאה firebaseui/anonymous-upgrade-merge-conflict במקרה כזה. אובייקט השגיאה יכיל גם את פרטי הכניסה הקבועים. כדי להשלים את הכניסה, צריך להפעיל את הכניסה באמצעות פרטי הכניסה הקבועים בקריאה החוזרת. לפני שניתן להשלים את הכניסה דרך auth.signInWithCredential(error.credential), עליך לשמור את האנונימיות הנתונים של המשתמש ולמחוק את המשתמש האנונימי. לאחר מכן, בסיום תהליך הכניסה, מעתיקים את את הנתונים בחזרה למשתמש הלא אנונימי. הדוגמה הבאה ממחישה איך התהליך הזה עובד.

// Temp variable to hold the anonymous user data if needed.
var data = null;
// Hold a reference to the anonymous current user.
var anonymousUser = firebase.auth().currentUser;
ui.start('#firebaseui-auth-container', {
  // Whether to upgrade anonymous users should be explicitly provided.
  // The user must already be signed in anonymously before FirebaseUI is
  // rendered.
  autoUpgradeAnonymousUsers: true,
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    // signInFailure callback must be provided to handle merge conflicts which
    // occur when an existing credential is linked to an anonymous user.
    signInFailure: function(error) {
      // For merge conflicts, the error.code will be
      // 'firebaseui/anonymous-upgrade-merge-conflict'.
      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
        return Promise.resolve();
      }
      // The credential the user tried to sign in with.
      var cred = error.credential;
      // Copy data from anonymous user to permanent user and delete anonymous
      // user.
      // ...
      // Finish sign-in after data is copied.
      return firebase.auth().signInWithCredential(cred);
    }
  }
});

השלבים הבאים

  • למידע נוסף על שימוש ב-FirebaseUI בהתאמה אישית ועל התאמה אישית, אפשר להיכנס אל קובץ README.
  • אם נתקלתם בבעיה ב-FirebaseUI ואתם רוצים לדווח עליה, תוכלו להשתמש מעקב אחר בעיות ב-GitHub.