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

אימות באמצעות התחברות לפייסבוק עם JavaScript

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

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

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

טפל בזרימת הכניסה עם Firebase SDK

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

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

צור מופע של אובייקט ספק פייסבוק:
Web modular API
למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.
```
import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();auth_facebook_provider_create.js
```
Web namespaced API
```
var provider = new firebase.auth.FacebookAuthProvider();facebook.js
```
אופציונלי : ציין היקפי OAuth 2.0 נוספים שברצונך לבקש מספק האימות. כדי להוסיף היקף, התקשר ל- addScope . לדוגמה:
Web modular API
למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.
```
provider.addScope('user_birthday');auth_facebook_provider_scopes.js
```
Web namespaced API
```
provider.addScope('user_birthday');facebook.js
```
עיין בתיעוד של ספק האימות .
אופציונלי : כדי להתאים את זרימת ה-OAuth של הספק לשפה המועדפת על המשתמש מבלי להעביר במפורש את פרמטרי ה-OAuth המותאמים אישית הרלוונטיים, עדכן את קוד השפה במופע ה-Auth לפני התחלת זרימת ה-OAuth. לדוגמה:
Web modular API
למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.
```
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 namespaced API
```
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 modular API
למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.
```
provider.setCustomParameters({
  'display': 'popup'
});auth_facebook_provider_params.js
```
Web namespaced API
```
provider.setCustomParameters({
  'display': 'popup'
});facebook.js
```
פרמטרי OAuth נדרשים שמורים אינם מותרים ויתעלמו מהם. עיין בהפניה של ספק האימות לפרטים נוספים.

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

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

Web modular API

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 namespaced API

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 של פייסבוק.

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

כדי להיכנס על ידי הפנייה מחדש לדף הכניסה, התקשר ל- signInWithRedirect : פעל לפי השיטות המומלצות בעת השימוש ב-'signInWithRedirect'.

Web modular API

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

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

Web namespaced API

firebase.auth().signInWithRedirect(provider);index.js

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

Web modular API

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 namespaced API

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 .

טיפול בחשבון-קיים-עם-שגיאות-אישורים-שונות

אם הפעלת את ההגדרה חשבון אחד לכל כתובת אימייל במסוף Firebase , כאשר משתמש מנסה להיכנס לספק (כגון Facebook) עם אימייל שכבר קיים עבור ספק אחר של משתמש Firebase (כגון Google), השגיאה auth/account-exists-with-different-credential נזרק יחד עם אובייקט AuthCredential (אסימון גישה לפייסבוק). כדי להשלים את הכניסה לספק המיועד, המשתמש צריך להיכנס תחילה לספק הקיים (גוגל) ולאחר מכן לקשר ל- 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 על ידי טיפול בזרימת הכניסה עם Facebook Login JavaScript SDK:

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

<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);
```
לאחר שילוב Facebook Login, הוסף כפתור התחברות לפייסבוק בדפי האינטרנט שלך:
```
<fb:login-button
  data-auto-logout-link="true"
  scope="public_profile,email"
  size="large"
></fb:login-button>
```

בהתקשרות חוזרת של מצב האימות של פייסבוק, החלף את אסימון האישור מתגובת האישור של פייסבוק עבור אישור Firebase וכניסה ל-Firebase:

Web modular API

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 namespaced API

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 .

כמו כן, עליך לבדוק שמשתמש פייסבוק עדיין לא מחובר ל-Firebase כדי למנוע אימות חוזר בלתי נחוץ:

Web modular API

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 namespaced API

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 שלך במקום להשתמש בו באפליקציית הלקוח.

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

Web modular API

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 namespaced API

// 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 מספקת אישור SSL עבור הדומיין המותאם אישית שלך.
הוסף את הדומיין המותאם אישית שלך לרשימת הדומיינים המורשים במסוף Firebase : auth.custom.domain.com .
במסוף המפתחים של Facebook או בדף ההגדרות של OAuth, רשום את כתובת האתר של דף ההפניה מחדש, שיהיה נגיש בדומיין המותאם אישית שלך: https://auth.custom.domain.com/__/auth/handler .

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

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

הצעדים הבאים

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

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

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

כדי לצאת ממשתמש, התקשר ל- signOut :

Web modular API

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 namespaced API

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

אימות באמצעות התחברות לפייסבוק עם JavaScript

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

טפל בזרימת הכניסה עם Firebase SDK

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

טיפול בחשבון-קיים-עם-שגיאות-אישורים-שונות

מצב קופץ

מצב הפניה מחדש

מתקדם: טפל בזרימת הכניסה באופן ידני

Web modular API

Web namespaced API

Web modular API

Web namespaced API

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

Web modular API

Web namespaced API

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

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

הצעדים הבאים

Web modular API

Web namespaced API