אימות באמצעות התחברות ל-Facebook באמצעות JavaScript

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

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

  1. מוסיפים את Firebase לפרויקט JavaScript.
  2. באתר Facebook למפתחים, מקבלים את מזהה האפליקציה ואת סוד האפליקציה.
  3. אפשר התחברות ל-Facebook:
    1. במסוף Firebase, פותחים את הקטע אימות.
    2. בכרטיסייה שיטת כניסה, מפעילים את הכניסה ל-Facebook ומציינים את מזהה האפליקציה ואת הסוד של האפליקציה שקיבלתם מ-Facebook.
    3. לאחר מכן, מוודאים שה-URI של ההפניה האוטומטית ב-OAuth (למשל my-app-12345.firebaseapp.com/__/auth/handler) מופיע כאחד מכתובות ה-URI של ההפניה האוטומטית ב-OAuth בדף ההגדרות של אפליקציית Facebook באתר Facebook for Developers, בקטע הגדרות המוצר > כניסה באמצעות Facebook.

טיפול בתהליך הכניסה באמצעות Firebase SDK

אם מפתחים אפליקציית אינטרנט, הדרך הקלה ביותר לאמת את המשתמשים עם Firebase באמצעות חשבונות Facebook, Firebase JavaScript SDK. (אם רוצים לאמת משתמש ב-Node.js או בסביבה אחרת שאינה דפדפן, צריך לטפל בתהליך הכניסה באופן ידני).

כדי לטפל בתהליך הכניסה באמצעות Firebase JavaScript SDK, צריך לפעול לפי שלבים:

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

    Web

    import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();
    auth_facebook_provider_create.js

    Web

    var provider = new firebase.auth.FacebookAuthProvider();
    facebook.js
  2. אופציונלי: מציינים היקפי הרשאות OAuth 2.0 נוספים שרוצים לבקש מספק האימות. כדי להוסיף היקף, קוראים addScope לדוגמה:

    Web

    provider.addScope('user_birthday');
    auth_facebook_provider_scopes.js

    Web

    provider.addScope('user_birthday');
    facebook.js
    במסמכי התיעוד של ספק האימות
  3. אופציונלי: כדי להתאים את תהליך ה-OAuth של הספק לשפה המועדפת על המשתמש בלי להעביר באופן מפורש את הפרמטרים המותאמים אישית הרלוונטיים של OAuth, מעדכנים את קוד השפה במכונה של Auth לפני שמתחילים את תהליך ה-OAuth. לדוגמה:

    Web

    import { getAuth } from "firebase/auth";

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

    Web

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. אופציונלי: מציינים פרמטרים מותאמים אישית נוספים של ספק OAuth שרוצים לשלוח עם בקשת ה-OAuth. כדי להוסיף פרמטר מותאם אישית, צריך להפעיל את setCustomParameters במסגרת הספק שהותחל עם אובייקט שמכיל את המפתח כפי שמפורט במסמכי העזרה של ספק OAuth, ואת הערך התואם. לדוגמה:

    Web

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

    Web

    provider.setCustomParameters({
  'display': 'popup'
});
    facebook.js
    פרמטרים נדרשים של OAuth שמורים אינם מותרים והמערכת תתעלם מהם. פרטים נוספים על ספק האימות.
  5. מבצעים אימות עם Firebase באמצעות אובייקט הספק של Facebook. אתם יכולים לבקש מהמשתמשים להיכנס באמצעות חשבונות Facebook שלהם על ידי פתיחת חלון קופץ או על ידי הפניה לדף הכניסה. שיטת ההפניה האוטומטית היא במכשירים ניידים.
    • כדי להיכנס באמצעות חלון קופץ, צריך לבצע את הפעולות הבאות:

      Web

      import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // The signed-in user info.
    const user = result.user;

    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    const credential = FacebookAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;

    // IdP data available using getAdditionalUserInfo(result)
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);

    // ...
  });
      auth_facebook_signin_popup.js

      Web

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

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...

    // 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;

    // ...
  });
      facebook.js
      שימו לב שאפשר גם לאחזר את אסימון OAuth של ספק Facebook, שבאמצעותו ניתן לאחזר נתונים נוספים באמצעות ממשקי ה-API של Facebook.

      כאן אפשר גם לזהות ולטפל בשגיאות. רשימה של קודי שגיאה מופיעה במסמכי העזרה בנושא אימות.

    • כדי להיכנס לחשבון על ידי הפניה לדף הכניסה, צריך לבצע קריאה ל-signInWithRedirect: יש לפעול לפי השיטות המומלצות כשמשתמשים ב-`signInWithRedirect`.

      Web

      import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      Web

      firebase.auth().signInWithRedirect(provider);
      index.js
      לאחר מכן, תוכלו גם לאחזר את אסימון ה-OAuth של ספק Facebook על ידי קריאה ל-getRedirectResult כשהדף נטען:

      Web

      import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    const credential = FacebookAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);
    // ...
  });
      auth_facebook_signin_redirect_result.js

      Web

      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;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).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.js
      כאן גם תוכלו לזהות שגיאות ולטפל בהן. רשימה של קודי שגיאה מופיעה במסמכי העזר לאימות.

אימות באמצעות Firebase בתוסף ל-Chrome

אם אתם מפתחים אפליקציה לתוסף ל-Chrome, כדאי לעיין במדריך בנושא מסמכים מחוץ למסך.

השלבים הבאים

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

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

  • בכללי האבטחה של Firebase Realtime Database ו-Cloud Storage, אפשר לקבל את מזהה המשתמש הייחודי של המשתמש שנכנס לחשבון מהמשתנה auth, ולהשתמש בו כדי לקבוע לאילו נתונים למשתמש תהיה גישה.

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

כדי להוציא משתמש, קוראים לפונקציה signOut:

Web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js