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

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

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

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

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

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

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

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

יוצרים מכונה של אובייקט הספק של 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

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

אופציונלי: כדי להתאים את תהליך ה-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

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

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

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

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

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

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

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

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

אם אתם משתמשים ב-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, על ידי טיפול בתהליך הכניסה באמצעות ה-SDK של Facebook Login ב-JavaScript:

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

אנחנו גם מגדירים listener למצב האימות ב-Facebook:
```
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
```

אחרי שמשלבים את Facebook Login, מוסיפים כפתור של Facebook Login לדפי האינטרנט:

<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

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

בנוסף, צריך לבדוק שמשתמש Facebook כבר לא מחובר ל-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:

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

אחרי שמקבלים את אסימון הגישה של המשתמש ב-Facebook, משתמשים בו כדי ליצור אובייקט 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 הנתמכים. עם זאת, המשמעות היא שהמשתמשים עשויים לראות את הדומיין הזה בזמן הכניסה ל-Facebook, לפני ההפניה האוטומטית חזרה לאפליקציה: המשך אל: https://my-app-12345.firebaseapp.com.

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

פועלים לפי השלבים 1 עד 3 במאמר הגדרת הדומיין ל-Hosting. כשמאמתים את הבעלות על הדומיין, Hosting מקצה אישור SSL לדומיין המותאם אישית.
מוסיפים את הדומיין המותאם אישית לרשימת הדומיינים המורשים במסוף Firebase: auth.custom.domain.com.
במסוף הפיתוח של Facebook או בדף ההגדרה של 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, וניתן להשתמש בו כדי לזהות משתמש בכל האפליקציות בפרויקט, ללא קשר לאופן שבו המשתמש נכנס לחשבון.

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

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

השלבים הבאים

Web

Web

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