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

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

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

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

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

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

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

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

    אינטרנט v8

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

    אינטרנט v9

    import { FacebookAuthProvider } from "firebase/auth";
    
    const provider = new FacebookAuthProvider();
  2. אופציונלי: ציין OAuth נוסף 2.0 ההיקפים שברצונך בקשה מספק אימות. כדי להוסיף היקף, קוראים addScope . לדוגמה:

    אינטרנט v8

    provider.addScope('user_birthday');

    אינטרנט v9

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

    אינטרנט v8

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

    אינטרנט v9

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

    אינטרנט v8

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

    אינטרנט v9

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

      אינטרנט v8

      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;
      
          // ...
        });

      אינטרנט v9

      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;
      
          // ...
        })
        .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;
          // The AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
      
          // ...
        });
      שימו לב גם שתוכלו לאחזר את אסימון ה- OAuth של ספק הפייסבוק שבו ניתן להשתמש בכדי לאסוף נתונים נוספים באמצעות ממשקי ה- API של פייסבוק.

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

    • כדי להיכנס ידי פנייה אל דף כניסה, קורא signInWithRedirect :

      אינטרנט v8

      firebase.auth().signInWithRedirect(provider);

      אינטרנט v9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);
      לאחר מכן, תוכל גם לאחזר את אסימון OAuth של ספק פייסבוק על ידי התקשרות getRedirectResult כאשר הדף נטען שלך:

      אינטרנט v8

      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;
          // ...
        });

      אינטרנט v9

      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;
        }).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;
          // AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
          // ...
        });
      זה גם המקום בו תוכלו לתפוס ולטפל בשגיאות. לקבלת רשימה של קודי שגיאה להעיף מבט לעבר Docs פניית המחבר .

אמת עם Firebase בתוסף Chrome

אם אתה בונה אפליקציית תוספים ל- Chrome, עליך להוסיף את מזהה התוסף שלך ל- Chrome:

  1. פתח הפרויקט שלך קונסולת Firebase .
  2. במקטע אימות, לפתוח את דף הכניסה השיטה.
  3. הוספת URI כמו הבאה לרשימת הדומיינים שמורשים:
    chrome-extension://CHROME_EXTENSION_ID

רק פעולות קופצות ( signInWithPopup ו linkWithPopup ) זמינות רחבים לכרום, כתוספות Chrome לא יכולות להשתמש HTTP הפניות. עליך להתקשר לשיטות אלה מתסריט רקע ולא מקופץ לפעולה בדפדפן, מכיוון שקופץ האימות יבטל את חלון הקופץ של פעולת הדפדפן.

הופכים את הקובץ במניפסט של תוסף Chrome שלך בטוח שאתה מוסיף את https://apis.google.com URL אלי content_security_policy allowlist.

הצעדים הבאים

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

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

  • בבסיס הנתונים בזמן אמת Firebase שלך לאחסון בענן אבטחה חוקי , אתה יכול לקבל את שנכנסים למערכת זיהוי המשתמש הייחודי של המשתמש מן auth משתנה, ולהשתמש בו כדי לקבוע אילו נתונים גישה יכול משתמש.

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

כדי לצאת מהחשבון משתמש, קוראים signOut :

אינטרנט v8

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

אינטרנט v9

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

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