כניסה לחשבון של משתמשים באמצעות Facebook

במאמר הזה מוסבר איך להשתמש ב-Identity Platform כדי לאפשר למשתמשים להיכנס באמצעות פייסבוק.

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

ההדרכה הזו מיועדת למשתמשים שכבר הפעילו את Identity Platform, ויש להם אפליקציית אינטרנט בסיסית שנכתבה באמצעות HTML ו-JavaScript. במדריך למתחילים מוסבר איך עושים את זה.

הגדרת פייסבוק כספק

כדי להגדיר את פייסבוק כספק זהויות:

  1. נכנסים לדף Identity Providers במסוף Google Cloud .

    כניסה לדף Identity Providers

  2. לוחצים על הוספת ספק.

  3. בוחרים באפשרות Facebook מהרשימה.

  4. מזינים את מזהה האפליקציה ואת סוד האפליקציה ב-Facebook. אם עדיין אין לכם מזהה וסוד, תוכלו לקבל אותם מהדף Facebook for Developers.

  5. מגדירים את ה-URI שמופיע בקטע הגדרה של פייסבוק כ-URI תקף להפניה אוטומטית של OAuth באפליקציית פייסבוק. אם הגדרתם דומיין בהתאמה אישית ב-Identity Platform, צריך לעדכן את ה-URI להפניה אוטומטית בהגדרות של אפליקציית פייסבוק כדי להשתמש בדומיין המותאם אישית במקום בדומיין שמוגדר כברירת מחדל. לדוגמה, שינוי של https://myproject.firebaseapp.com/__/auth/handler ל-https://auth.myownpersonaldomain.com/__/auth/handler.

  6. לוחצים על הוספת דומיין בקטע דומיינים מורשים כדי לרשום את הדומיינים של האפליקציה. למטרות פיתוח, localhost כבר מופעל כברירת מחדל.

  7. בקטע הגדרת האפליקציה, לוחצים על פרטי ההגדרה. מעתיקים את קטע הקוד לקוד של האפליקציה כדי להפעיל את Identity Platform client SDK.

  8. לוחצים על Save.

כניסה של משתמשים באמצעות ה-SDK של הלקוח

  1. יוצרים מופע של אובייקט הספק של פייסבוק:

    JavaScript 

    var provider = new firebase.auth.FacebookAuthProvider();

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

    JavaScript 

    provider.addScope('user_birthday');

  3. אופציונלי: התאמה לשפה המקומית של תהליך האימות. אפשר לציין שפה או להשתמש בשפת ברירת המחדל של המכשיר:

    JavaScript 

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

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

    JavaScript 

    provider.setCustomParameters({
'display': 'popup'
});

  5. משתמשים באובייקט של ספק Facebook כדי שהמשתמש ייכנס לחשבון. אפשר לפתוח חלון קופץ או להפנות לדף הנוכחי. ההפניה קלה יותר למשתמשים במכשירים ניידים.

    כדי להציג חלון קופץ, מתקשרים אל signInWithPopup():

    JavaScript 

    firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // The signed-in user info.
    var user = result.user;

    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    var accessToken = credential.accessToken;

    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;

    // ...
  });

    כדי להפנות את הדף, קודם קוראים ל-signInWithRedirect().

    כדאי לפעול לפי השיטות המומלצות כשמשתמשים ב-signInWithRedirect, ב-linkWithRedirect או ב-reauthenticateWithRedirect.

    JavaScript 

    firebase.auth().signInWithRedirect(provider);

    לאחר מכן, מאחזרים את טוקן הפייסבוק על ידי קריאה ל-getRedirectResult() כשהדף נטען:

    JavaScript 

    firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a Facebook Access Token. You can use it to access the Facebook 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;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });

אחרי שמקבלים אסימון גישה, אפשר להשתמש בו כדי להפעיל את Facebook API. לדוגמה:

REST

curl "https://graph.facebook.com/me?fields=id,name&access_token=[TOKEN]"

כניסה ידנית לחשבון של משתמשים

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

שיטת הכניסה הזו תומכת גם בכניסה לחשבון פייסבוק למשחקים כספק זהויות (IdP). פלטפורמת Identity Platform לא תומכת בהטמעה ידנית של התכונה 'כניסה באמצעות פייסבוק' למשחקים. הוא מקבל רק את האסימונים להחלפת פרטי הכניסה של Identity Platform.

  1. כדי לשלב את Facebook או את Facebook Login for Gaming לצורך אימות באפליקציה, פועלים לפי השלבים שמפורטים במסמכי התיעוד למפתחים:

  2. נכנסים עם חשבון המשתמש באמצעות Facebook או Facebook Login for Gaming באמצעות התהליך שהטמעתם בשלב הקודם.

  3. המרת האסימון שמתקבל מ-Facebook או מ-Facebook Login for Gaming לפרטי כניסה ב-Identity Platform:

    JavaScript 

    var credential = firebase.auth.FacebookAuthProvider.credential(accessToken);

  4. משתמשים באמצעי האימות כדי להכניס את המשתמש באמצעות Identity Platform:

    JavaScript 

    // Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // ...
  });

המאמרים הבאים