דף זה תורגם על ידי Cloud Translation API.

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

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

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

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

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

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

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

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

Web

import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();auth_facebook_provider_create.js

Web

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

אופציונלי: מציינים היקפי הרשאות נוספים של OAuth 2.0 שרוצים לבקש מספק האימות. כדי להוסיף היקף, קוראים ל-addScope. לדוגמה:
Web
```
provider.addScope('user_birthday');auth_facebook_provider_scopes.js
```
Web
```
provider.addScope('user_birthday');facebook.js
```
אפשר לעיין במסמכי התיעוד של ספק האימות.

אופציונלי: כדי להתאים את תהליך OAuth של הספק לשפה המועדפת של המשתמש בלי להעביר במפורש את הפרמטרים הרלוונטיים של OAuth בהתאמה אישית, צריך לעדכן את קוד השפה במופע האימות לפני שמתחילים את תהליך 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

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

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

כדי להיכנס באמצעות חלון קופץ, מתקשרים אל signInWithPopup:

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

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

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

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

טיפול בשגיאות מסוג account-exists-with-different-credential

אם הפעלתם את ההגדרה חשבון אחד לכל כתובת אימייל במסוף Firebase, כשמשתמש מנסה להיכנס לספק (כמו פייסבוק) עם כתובת אימייל שכבר קיימת אצל ספק אחר של משתמש Firebase (כמו Google), מוצגת השגיאה auth/account-exists-with-different-credential יחד עם אובייקט AuthCredential (אסימון גישה לפייסבוק). כדי להשלים את הכניסה לספק הרצוי, המשתמש צריך קודם להיכנס לספק הקיים (Google) ואז לקשר לספק הקודם AuthCredential (טוקן גישה לפייסבוק).

אם משתמשים ב-signInWithPopup, אפשר לטפל בשגיאות auth/account-exists-with-different-credential באמצעות קוד כמו בדוגמה הבאה:

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

try {
  // Step 1: User tries to sign in using Facebook.
  let result = await signInWithPopup(getAuth(), new FacebookAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Facebook credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Facebook credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

מצב הפניה אוטומטית

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

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

משלבים את התכונה 'התחברות באמצעות פייסבוק' באפליקציה שלכם בעזרת מסמכי הפיתוח. חשוב להגדיר את הכניסה באמצעות Facebook עם מזהה האפליקציה שלכם ב-Facebook:

<script src="//connect.facebook.net/en_US/sdk.js"></script>
<script>
  FB.init({
    /**********************************************************************
     * TODO(Developer): Change the value below with your Facebook app ID. *
     **********************************************************************/
    appId: '<YOUR_FACEBOOK_APP_ID>',
    status: true,
    xfbml: true,
    version: 'v2.6',
  });
</script>

הגדרנו גם מאזין למצב האימות של פייסבוק:
```
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
```
אחרי שמטמיעים את התכונה 'כניסה באמצעות פייסבוק', מוסיפים כפתור 'כניסה באמצעות פייסבוק' לדפי האינטרנט:
```
<fb:login-button
  data-auto-logout-link="true"
  scope="public_profile,email"
  size="large"
></fb:login-button>
```

ב-callback של מצב האימות ב-Facebook, מחליפים את אסימון האימות מתגובת האימות של Facebook בפרטי כניסה ל-Firebase ונכנסים ל-Firebase:

Web

import { getAuth, onAuthStateChanged, signInWithCredential, signOut, FacebookAuthProvider } from "firebase/auth";
const auth = getAuth();

function checkLoginState(response) {
  if (response.authResponse) {
    // User is signed-in Facebook.
    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
      unsubscribe();
      // Check if we are already signed-in Firebase with the correct user.
      if (!isUserEqual(response.authResponse, firebaseUser)) {
        // Build Firebase credential with the Facebook auth token.
        const credential = FacebookAuthProvider.credential(
            response.authResponse.accessToken);

        // Sign in with the credential from the Facebook user.
        signInWithCredential(auth, credential)
          .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);
            // ...
          });
      } else {
        // User is already signed-in Firebase with the correct user.
      }
    });
  } else {
    // User is signed-out of Facebook.
    signOut(auth);
  }
}auth_facebook_callback.js

Web

function checkLoginState(response) {
  if (response.authResponse) {
    // User is signed-in Facebook.
    var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => {
      unsubscribe();
      // Check if we are already signed-in Firebase with the correct user.
      if (!isUserEqual(response.authResponse, firebaseUser)) {
        // Build Firebase credential with the Facebook auth token.
        var credential = firebase.auth.FacebookAuthProvider.credential(
            response.authResponse.accessToken);

        // Sign in with the credential from the Facebook user.
        firebase.auth().signInWithCredential(credential)
          .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;
            // ...
          });
      } else {
        // User is already signed-in Firebase with the correct user.
      }
    });
  } else {
    // User is signed-out of Facebook.
    firebase.auth().signOut();
  }
}facebook.js

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

כדאי גם לוודא שהמשתמש בפייסבוק לא מחובר כבר ל-Firebase כדי להימנע מאימות מחדש שלא נחוץ:

Web

import { FacebookAuthProvider } from "firebase/auth";

function isUserEqual(facebookAuthResponse, firebaseUser) {
  if (firebaseUser) {
    const providerData = firebaseUser.providerData;
    for (let i = 0; i < providerData.length; i++) {
      if (providerData[i].providerId === FacebookAuthProvider.PROVIDER_ID &&
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}auth_facebook_checksameuser.js

Web

function isUserEqual(facebookAuthResponse, firebaseUser) {
  if (firebaseUser) {
    var providerData = firebaseUser.providerData;
    for (var i = 0; i < providerData.length; i++) {
      if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID &&
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}facebook.js

למתקדמים: אימות באמצעות Firebase ב-Node.js

כדי לבצע אימות באמצעות Firebase באפליקציית Node.js:

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

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

Web

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

// Sign in with the credential from the Facebook user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    const credential = FacebookAuthProvider.credentialFromResult(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_credential.js

Web

// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)
  .then((result) => {
    // Signed in       
    var credential = result.credential;
    // ...
  })
  .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 מקצה לפרויקט תת-דומיין ייחודי: https://my-app-12345.firebaseapp.com.

הכתובת הזו תשמש גם כמנגנון ההפניה לכניסה באמצעות OAuth. צריך לאפשר את הדומיין הזה לכל ספקי ה-OAuth הנתמכים. עם זאת, המשמעות היא שמשתמשים עשויים לראות את הדומיין הזה כשהם נכנסים לחשבון שלהם בפייסבוק לפני שהם מופנים בחזרה לאפליקציה: המשך אל: https://my-app-12345.firebaseapp.com.

כדי להימנע מהצגת תת-הדומיין, אפשר להגדיר דומיין מותאם אישית עם Firebase Hosting:

פועלים לפי שלבים 1 עד 3 במאמר בנושא הגדרת הדומיין ל-Hosting. כשאתם מאמתים את הבעלות על הדומיין, Hosting מקצה אישור SSL לדומיין המותאם אישית.
מוסיפים את הדומיין המותאם אישית לרשימת הדומיינים המורשים במסוף Firebase: auth.custom.domain.com.
במסוף הפיתוח של פייסבוק או בדף ההגדרה של OAuth, מוסיפים את כתובת ה-URL של דף ההפניה לרשימת ההיתרים, שתהיה נגישה בדומיין המותאם אישית: https://auth.custom.domain.com/__/auth/handler.

כשמפעילים את ספריית JavaScript, מציינים את הדומיין המותאם אישית בשדה authDomain:

var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

השלבים הבאים

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

באפליקציות, הדרך המומלצת לדעת מה סטטוס האימות של המשתמש היא להגדיר אובייקט observer ב-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

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

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

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

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

טיפול בשגיאות מסוג account-exists-with-different-credential

מצב חלון קופץ

מצב הפניה אוטומטית

למתקדמים: ניהול ידני של תהליך הכניסה

Web

Web

Web

Web

למתקדמים: אימות באמצעות Firebase ב-Node.js

Web

Web

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

התאמה אישית של דומיין ההפניה לכניסה באמצעות פייסבוק

השלבים הבאים

Web

Web

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