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

FirebaseUI היא ספרייה שנבנתה על גבי ה-SDK של Firebase Authentication המספקת זרימות ממשק משתמש נפתחות לשימוש באפליקציה שלך. FirebaseUI מספק את היתרונות הבאים:

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

לפני שאתה מתחיל

  1. הוסף אימות Firebase ליישום האינטרנט שלך , וודא שאתה משתמש ב-v9 compat (מומלץ) או 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. רכיב באוור

      התקן את FirebaseUI והתלות שלו דרך Bower באמצעות הפקודה הבאה:

      $ bower install firebaseui --save
      

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

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

אתחול FirebaseUI

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

// 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. באותו קטע, הפעל את שיטת הכניסה של קישור דוא"ל (כניסה ללא סיסמה) ולחץ על שמור .

  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() כדי לזהות אם כתובת האתר מתאימה לכניסה עם קישור דוא"ל ויש לעבד את ממשק המשתמש כדי להשלים את הכניסה.

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

    ניתן להגדיר התקשרות חוזרת 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 (גוגל, פייסבוק, טוויטר ו-GitHub)

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

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

  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 (נתמכים בספקים והתאמות אישיות של ממשק המשתמש, כמו גם התקשרויות חוזרות להצלחה וכו').

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 יפעיל את הקריאה לאחור 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 .