אתם יכולים לאפשר למשתמשים לבצע אימות ב-Firebase באמצעות ספקי OAuth כמו Yahoo. לשם כך, משלבים את OAuth Login הגנרי באפליקציה באמצעות Firebase SDK כדי לבצע את תהליך הכניסה מקצה לקצה.
לפני שמתחילים
כדי לאפשר למשתמשים להיכנס באמצעות חשבונות Yahoo, קודם צריך להפעיל את Yahoo כספק כניסה לפרויקט Firebase:
- מוסיפים את Firebase לפרויקט JavaScript.
- במסוף Firebase, פותחים את הקטע Auth.
- בכרטיסייה Sign in method (שיטת כניסה), מפעילים את הספק Yahoo.
- מוסיפים את מזהה הלקוח ואת סוד הלקוח ממסוף הפיתוח של הספק להגדרות הספק:
-
כדי לרשום לקוח OAuth של Yahoo, פועלים לפי ההוראות במסמכי העזרה למפתחים של Yahoo בנושא רישום אפליקציית אינטרנט ב-Yahoo.
חשוב לבחור את שתי ההרשאות של OpenID Connect API:
profile
ו-email
. - כשרושמים אפליקציות אצל הספקים האלה, חשוב לרשום את הדומיין
*.firebaseapp.com
של הפרויקט כדומיין להפניה אוטומטית של האפליקציה.
-
- לוחצים על שמירה.
טיפול בתהליך הכניסה באמצעות Firebase SDK
אם אתם מפתחים אפליקציית אינטרנט, הדרך הקלה ביותר לאמת את המשתמשים ב-Firebase באמצעות חשבונות Yahoo שלהם היא לטפל בתהליך הכניסה כולו באמצעות ה-SDK של Firebase ל-JavaScript.
כדי לטפל בתהליך הכניסה באמצעות Firebase JavaScript SDK:
יוצרים מופע של OAuthProvider באמצעות מזהה הספק yahoo.com.
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com');
var provider = new firebase.auth.OAuthProvider('yahoo.com');
אופציונלי: מציינים פרמטרים מותאמים אישית נוספים של OAuth שרוצים לשלוח עם בקשת ה-OAuth.
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
הפרמטרים שבהם Yahoo תומכת מפורטים במסמכי התיעוד של Yahoo OAuth. שימו לב: אי אפשר להעביר פרמטרים שנדרשים ל-Firebase באמצעות
setCustomParameters()
. הפרמטרים האלה הם client_id, redirect_uri, response_type, scope ו-state.אופציונלי: מציינים היקפי הרשאות נוספים של OAuth 2.0, מעבר ל-
profile
ול-email
, שרוצים לבקש מספק האימות. אם האפליקציה שלכם זקוקה לגישה לנתוני משתמשים פרטיים מממשקי Yahoo API, תצטרכו לבקש הרשאות לממשקי Yahoo API בקטע API Permissions במסוף הפיתוח של Yahoo. היקפי ה-OAuth המבוקשים חייבים להיות זהים להיקפים שהוגדרו מראש בהרשאות ה-API של האפליקציה. לדוגמה, אם מבקשים גישה לקריאה וכתיבה לאנשי הקשר של המשתמש והיא מוגדרת מראש בהרשאות ה-API של האפליקציה, צריך להעביר את הערךsdct-w
במקום את היקף הרשאת ה-OAuth לקריאה בלבדsdct-r
. אחרת, התהליך ייכשל ותוצג הודעת שגיאה למשתמש הקצה.// Request access to Yahoo Mail API. provider.addScope('mail-r'); // Request read/write access to user contacts. // This must be preconfigured in the app's API permissions. provider.addScope('sdct-w');
// Request access to Yahoo Mail API. provider.addScope('mail-r'); // Request read/write access to user contacts. // This must be preconfigured in the app's API permissions. provider.addScope('sdct-w');
למידע נוסף, אפשר לעיין במסמכי התיעוד בנושא היקפי הרשאה ב-Yahoo.
אימות באמצעות Firebase באמצעות אובייקט הספק של OAuth. אתם יכולים לבקש מהמשתמשים להיכנס באמצעות חשבונות Yahoo שלהם על ידי פתיחת חלון קופץ או על ידי הפניה לדף הכניסה. השיטה להפניה אוטומטית היא המועדפת במכשירים ניידים.
כדי להיכנס באמצעות חלון קופץ, צריך לבצע את הפעולות הבאות:
signInWithPopup
import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // IdP data available in result.additionalUserInfo.profile // ... // Yahoo OAuth access token and ID token can be retrieved by calling: const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
firebase.auth().signInWithPopup(provider) .then((result) => { // IdP data available in result.additionalUserInfo.profile // ... /** @type {firebase.auth.OAuthCredential} */ const credential = result.credential; // Yahoo OAuth access token and ID token can be retrieved by calling: var accessToken = credential.accessToken; var idToken = credential.idToken; }) .catch((error) => { // Handle error. });
כדי להיכנס לחשבון על ידי הפניה לדף הכניסה, צריך להתקשר למספר
signInWithRedirect
:
מומלץ לפעול לפי השיטות המומלצות כשמשתמשים ב-
signInWithRedirect
, ב-linkWithRedirect
או ב-reauthenticateWithRedirect
.firebase.auth().signInWithRedirect(provider);
אחרי שהמשתמש משלים את הכניסה וחוזרים לדף, אפשר לקבל את תוצאת הכניסה באמצעות קריאה ל-
getRedirectResult
.import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
בסיום התהליך, אפשר לאחזר את אסימון הזיהוי ואת אסימון הגישה של OAuth המשויכים לספק מהאובייקט
firebase.auth.UserCredential
שמוחזר.באמצעות אסימון הגישה ל-OAuth, אפשר לבצע קריאה ל-Yahoo API.
לדוגמה, כדי לקבל את פרטי הפרופיל הבסיסיים, אפשר להפעיל את ה-API ל-REST הבא:
curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
כאשר
YAHOO_USER_UID
הוא מזהה המשתמש ב-Yahoo, שניתן לאחזר מהשדהfirebase.auth().currentUser.providerData[0].uid
או מהשדהresult.additionalUserInfo.profile
.הדוגמאות שלמעלה מתמקדות בתהליכי כניסה, אבל יש לכם גם אפשרות לקשר ספק של Yahoo למשתמש קיים באמצעות
linkWithPopup
/linkWithRedirect
. לדוגמה, אתם יכולים לקשר כמה ספקים לאותו משתמש ולאפשר לו להיכנס באמצעות כל אחד מהם.import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com'); const auth = getAuth(); linkWithPopup(auth.currentUser, provider) .then((result) => { // Yahoo credential is linked to the current user. // IdP data available in result.additionalUserInfo.profile. // Get the OAuth access token and ID Token const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
var provider = new firebase.auth.OAuthProvider('yahoo.com'); firebase.auth().currentUser.linkWithPopup(provider) .then((result) => { // Yahoo credential is linked to the current user. // IdP data available in result.additionalUserInfo.profile. // Yahoo OAuth access token can be retrieved by calling: // result.credential.accessToken // Yahoo OAuth ID token can be retrieved by calling: // result.credential.idToken }) .catch((error) => { // Handle error. });
אפשר להשתמש באותו דפוס עם
reauthenticateWithPopup
/reauthenticateWithRedirect
, כדי לאחזר פרטי כניסה עדכניים לפעולות רגישות שדורשות התחברות מהזמן האחרון.import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com'); const auth = getAuth(); reauthenticateWithPopup(auth.currentUser, provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // IdP data available in result.additionalUserInfo.profile. // Get the OAuth access token and ID Token const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
var provider = new firebase.auth.OAuthProvider('yahoo.com'); firebase.auth().currentUser.reauthenticateWithPopup(provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // IdP data available in result.additionalUserInfo.profile. // Yahoo OAuth access token can be retrieved by calling: // result.credential.accessToken // Yahoo OAuth ID token can be retrieved by calling: // result.credential.idToken }) .catch((error) => { // Handle error. });
טיפול בשגיאות מסוג account-exists-with-different-credential
אם הפעלתם את ההגדרה One account per email address (חשבון אחד לכל כתובת אימייל) במסוף Firebase, כשמשתמש ינסה להיכנס לספק (כמו Yahoo) עם כתובת אימייל שכבר קיימת אצל ספק אחר של משתמש ב-Firebase (כמו Google), תוצג הודעת השגיאה auth/account-exists-with-different-credential
עם אובייקט AuthCredential
(פרטי כניסה ל-Yahoo). כדי להשלים את הכניסה לספק המיועד, המשתמש צריך להיכנס קודם לספק הקיים (Google) ואז לקשר ל-AuthCredential
הקודם (פרטי הכניסה ל-Yahoo).
מצב חלון קופץ
אם אתם משתמשים ב-signInWithPopup
, תוכלו לטפל בשגיאות auth/account-exists-with-different-credential
באמצעות קוד כמו הדוגמה הבאה:
import { getAuth, linkWithCredential, signInWithPopup, OAuthProvider, } from "firebase/auth"; try { // Step 1: User tries to sign in using Yahoo. let result = await signInWithPopup(getAuth(), new OAuthProvider()); } catch (error) { // Step 2: User's email already exists. if (error.code === "auth/account-exists-with-different-credential") { // The pending Yahoo 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 Yahoo 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) { // ... }
מצב ניתוב אוטומטי
הטיפול בשגיאה הזו דומה במצב ההפניה האוטומטית, עם ההבדל שצריך לשמור את פרטי הכניסה בהמתנה במטמון בין ההפניות האוטומטיות של הדפים (לדוגמה, באמצעות אחסון הסשן).
מתקדם: טיפול בתהליך הכניסה באופן ידני
בניגוד לספקים אחרים של OAuth שנתמכים על ידי Firebase, כמו Google, Facebook ו-Twitter, שבהם אפשר להיכנס ישירות באמצעות פרטי כניסה שמבוססים על אסימון גישה של OAuth, אימות ב-Firebase לא תומך באותה יכולת עבור ספקים כמו Yahoo, כי שרת האימות ב-Firebase לא יכול לאמת את הקהל של אסימוני הגישה של Yahoo ב-OAuth. זוהי דרישת אבטחה קריטית, והיא עלולה לחשוף אפליקציות ואתרים למתקפות של שחזור, שבהן אפשר להשתמש באסימון גישה של Yahoo OAuth שנוצר לפרויקט אחד (תוקף) כדי להיכנס לפרויקט אחר (קורבן). במקום זאת, Firebase Auth מאפשר לטפל בכל תהליך OAuth ובהחלפת קוד ההרשאה באמצעות מזהה הלקוח והסוד של OAuth שהוגדרו במסוף Firebase. מכיוון שאפשר להשתמש בקוד ההרשאה רק בשילוב עם מזהה לקוח או סוד לקוח ספציפיים, אי אפשר להשתמש בקוד הרשאה שהתקבל לפרויקט אחד בפרויקט אחר.
אם צריך להשתמש בספקים האלה בסביבות שלא נתמכות, צריך להשתמש בספריית OAuth של צד שלישי ובאימות מותאם אישית של Firebase. הראשון נדרש לאימות מול הספק, והשני נדרש כדי להחליף את פרטי הכניסה של הספק באסימון מותאם אישית.
אימות באמצעות Firebase בתוסף ל-Chrome
אם אתם מפתחים אפליקציה לתוסף ל-Chrome, כדאי לעיין במדריך בנושא מסמכים מחוץ למסך.
התאמה אישית של הדומיין להפניה האוטומטית לכניסה ל-Yahoo
בזמן יצירת הפרויקט, מערכת Firebase תקצה תת-דומיין ייחודי לפרויקט:
https://my-app-12345.firebaseapp.com
.
הוא ישמש גם כמנגנון להפניה אוטומטית לכניסה באמצעות OAuth. צריך להעניק הרשאה לדומיין הזה לכל ספקי OAuth הנתמכים. עם זאת, פירוש הדבר הוא שהמשתמשים עשויים לראות את הדומיין הזה בזמן הכניסה ל-Yahoo, לפני ההפניה האוטומטית חזרה לאפליקציה: Continue to: https://my-app-12345.firebaseapp.com.
כדי למנוע הצגה של תת-הדומיין, אפשר להגדיר דומיין מותאם אישית באמצעות Firebase Hosting:
- פועלים לפי השלבים 1 עד 3 במאמר הגדרת הדומיין ל-Hosting. כשמאמתים את הבעלות על הדומיין, Hosting מקצה אישור SSL לדומיין המותאם אישית.
- מוסיפים את הדומיין המותאם אישית לרשימת הדומיינים המורשים במסוף Firebase:
auth.custom.domain.com
. - במסוף הפיתוח של Yahoo או בדף ההגדרה של 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: ' ', 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. });