אפשר לאפשר למשתמשים לבצע אימות ב-Firebase באמצעות חשבונות Facebook שלהם על ידי שילוב Facebook Login באפליקציה. אפשר לשלב את Facebook Login להשתמש ב-Firebase SDK כדי לבצע את תהליך הכניסה, או לבצע את תהליך ההתחברות ל-Facebook באופן ידני, ומעבירים את אסימון הגישה שנוצר Firebase.
לפני שמתחילים
- מוסיפים את Firebase לפרויקט JavaScript.
- באתר Facebook למפתחים, מקבלים את מזהה האפליקציה ואת סוד האפליקציה.
- אפשר התחברות ל-Facebook:
- במסוף Firebase, פותחים את הקטע Auth.
- בכרטיסייה שיטת כניסה, מפעילים את הכניסה ל-Facebook ומציינים את מזהה האפליקציה ואת הסוד של האפליקציה שקיבלתם מ-Facebook.
- לאחר מכן מוודאים שה-URI של OAuth להפניה אוטומטית (למשל
my-app-12345.firebaseapp.com/__/auth/handler
) רשום כאחד ממזהי ה-URI להפניה אוטומטית של OAuth בדף ההגדרות של אפליקציית Facebook ב באתר של Facebook for Developers הגדרות מוצר > הגדרת Facebook Login.
איך מבצעים את תהליך הכניסה באמצעות Firebase SDK
אם אתם מפתחים אפליקציית אינטרנט, הדרך הקלה ביותר לאמת את המשתמשים ב-Firebase באמצעות חשבונות Facebook שלהם היא לטפל בתהליך הכניסה באמצעות Firebase JavaScript SDK. (אם רוצים לאמת משתמש ב-Node.js או סביבה אחרת שאינה דפדפן, צריך לטפל בתהליך הכניסה באופן ידני).
כדי לטפל בתהליך הכניסה באמצעות Firebase JavaScript SDK:
- יוצרים מכונה של אובייקט הספק של Facebook:
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
var provider = new firebase.auth.FacebookAuthProvider();
- אופציונלי: מציינים היקפי הרשאות OAuth 2.0 נוספים
שרוצים לבקש מספק האימות. כדי להוסיף היקף, קוראים ל-
addScope
. לדוגמה:provider.addScope('user_birthday');
provider.addScope('user_birthday');
- אופציונלי: אפשר להתאים את זרימת ה-OAuth של הספק לשוק המקומי בהתאם להעדפות המשתמש
מבלי להעביר באופן מפורש את הפרמטרים המותאמים אישית הרלוונטיים של OAuth, מעדכנים את השפה
במופע האימות לפני שמתחילים בתהליך OAuth. לדוגמה:
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- אופציונלי: ציון פרמטרים מותאמים אישית נוספים של ספק OAuth
שרוצים לשלוח בבקשת ה-OAuth. כדי להוסיף פרמטר מותאם אישית, צריך להפעיל את
setCustomParameters
במסגרת הספק שהותחל עם אובייקט שמכיל את המפתח כפי שמפורט במסמכי העזרה של ספק OAuth, ואת הערך התואם. לדוגמה:provider.setCustomParameters({ 'display': 'popup' });
provider.setCustomParameters({ 'display': 'popup' });
- אימות באמצעות Firebase באמצעות אובייקט הספק של Facebook. אפשר
ולבקש מהמשתמשים להיכנס עם חשבונות Facebook שלהם, על ידי פתיחת
חלון קופץ או על ידי הפניה אוטומטית לדף הכניסה. השיטה להפניה אוטומטית היא המועדפת במכשירים ניידים.
- כדי להיכנס באמצעות חלון קופץ, צריך להתקשר אל
signInWithPopup
: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); // ... });
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; // ... });
כאן אפשר גם לזהות ולטפל בשגיאות. רשימה של קודי שגיאה מופיעה במסמכי העזר לאימות.
- כדי להיכנס באמצעות הפניה אוטומטית לדף הכניסה, צריך לבצע קריאה אל
signInWithRedirect
: יש לפעול לפי השיטות המומלצות כשמשתמשים ב-'signInWithRedirect'.import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
getRedirectResult
כשהדף נטען: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); // ... });
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; // ... });
- כדי להיכנס באמצעות חלון קופץ, צריך להתקשר אל
טיפול בשגיאות מסוג 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 Login באמצעות מזהה האפליקציה שלכם ב-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>
-
אנחנו גם מגדירים מאזין למצב האימות ב-Facebook:
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
-
אחרי שתשלבו את Facebook Login, תוכלו להוסיף לחצן התחברות ל-Facebook בדפי האינטרנט:
<fb:login-button data-auto-logout-link="true" scope="public_profile,email" size="large" ></fb:login-button>
- בקריאה החוזרת (callback) של מצב האימות ב-Facebook, מחליפים את אסימון האימות מתגובת האימות של Facebook בפרטי הכניסה ובפרטי הכניסה ל-Firebase:
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); } }
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 עדיין לא מחובר ל-Firebase כדי למנוע אימות מחדש שלא צריך:
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; }
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; }
מתקדם: אימות באמצעות Firebase ב-Node.js
כדי לבצע אימות באמצעות Firebase באפליקציה של Node.js:
- מתחברים את המשתמש באמצעות חשבון Facebook שלו ומקבלים את אסימון הגישה של המשתמש ב-Facebook. לדוגמה, אפשר להכניס את המשתמש לחשבון בדפדפן כפי שמתואר בקטע טיפול בתהליך הכניסה באופן ידני, אבל לשלוח את אסימון הגישה לאפליקציית Node.js במקום להשתמש בו באפליקציית הלקוח.
- אחרי שמקבלים את אסימון הגישה של המשתמש ב-Facebook, משתמשים בו כדי ליצור אובייקט Credential ולאחר מכן נכנסים עם פרטי הכניסה של המשתמש:
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); // ... });
// 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; // ... });
אימות באמצעות Firebase בתוסף ל-Chrome
אם אתם בונים אפליקציית תוסף ל-Chrome, תוכלו לעיין ב מדריך לעבודה מחוץ למסך.
התאמה אישית של דומיין הניתוב החוזר לכניסה באמצעות Facebook
בזמן יצירת הפרויקט, מערכת 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 Developer Console או בדף ההגדרה של OAuth, הוסף את כתובת האתר של דף ההפניה מחדש לרשימת ההיתרים,
שיהיה זמין בדומיין המותאם אישית:
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: ' ', messagingSenderId: 'PROJECT_ID .firebasestorage.appSENDER_ID ' }; firebase.initializeApp(config);
השלבים הבאים
אחרי שמשתמש נכנס בפעם הראשונה, נוצר חשבון משתמש חדש שמקושרות לפרטי הכניסה - כלומר שם המשתמש והסיסמה, מספר הטלפון מספר, או פרטים של ספק אימות – המשתמש נכנס באמצעותו. החדש הזה מאוחסנים כחלק מפרויקט Firebase, וניתן להשתמש בהם כדי לזהות משתמש בכל האפליקציות בפרויקט, בלי קשר לאופן שבו המשתמשים נכנסים לחשבון.
-
באפליקציות, הדרך המומלצת לדעת את סטטוס האימות של המשתמש היא להגדיר משתמש מעקב באובייקט
Auth
. לאחר מכן תוכלו לקבל את פרטי הפרופיל הבסיסיים של המשתמש מהאובייקטUser
. למידע נוסף, ראו ניהול משתמשים. בכללי האבטחה של Firebase Realtime Database ו-Cloud Storage, אפשר לקבל את מזהה המשתמש הייחודי של המשתמש שנכנס לחשבון מהמשתנה
auth
, ולהשתמש בו כדי לקבוע לאילו נתונים למשתמש תהיה גישה.
כדי לאפשר למשתמשים להיכנס לאפליקציה באמצעות כמה ספקי אימות, אפשר לקשר את פרטי הכניסה של ספק האימות לחשבון משתמש קיים.
כדי לנתק משתמש מהחשבון, יש להתקשר אל
signOut
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });