אימות באמצעות Yahoo באמצעות JavaScript

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

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

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

1. מוסיפים את Firebase לפרויקט JavaScript.
2. במסוף Firebase, פותחים את הקטע Auth.
3. בכרטיסייה שיטת כניסה, מפעילים את הספק Yahoo.
4. מוסיפים את מזהה הלקוח ואת סוד הלקוח ממסוף הפיתוח של הספק להגדרות הספק:

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

      חשוב לבחור את שתי ההרשאות של OpenID Connect API: profile ו-email.

   2. כשרושמים אפליקציות אצל הספקים האלה, חשוב לרשום את הדומיין *.firebaseapp.com של הפרויקט כדומיין ההפניה האוטומטית של אפליקציה.
5. לוחצים על שמירה.

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

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

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

1. יוצרים מופע של OAuthProvider באמצעות מזהה הספק yahoo.com.

   Web

   למד מידע נוסף על Web API המודולרי שניתן לניעור העצים שדרוג מה-API במרחב השמות.

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('yahoo.com');
   auth_yahoo_provider_create.js

   Web

   var provider = new firebase.auth.OAuthProvider('yahoo.com');
   yahoo-oauth.js

2. אופציונלי: מציינים פרמטרים מותאמים אישית נוספים של OAuth שרוצים לשלוח עם בקשת ה-OAuth.

   Web

   מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API עם מרחבי שמות

   provider.setCustomParameters({
     // Prompt user to re-authenticate to Yahoo.
     prompt: 'login',
     // Localize to French.
     language: 'fr'
   });  
   auth_yahoo_provider_params.js

   Web

   provider.setCustomParameters({
     // Prompt user to re-authenticate to Yahoo.
     prompt: 'login',
     // Localize to French.
     language: 'fr'
   });  
   yahoo-oauth.js

   הפרמטרים שבהם Yahoo תומכת מפורטים במסמכי התיעוד של Yahoo OAuth. שימו לב שאי אפשר להעביר פרמטרים שנדרשים ל-Firebase עם setCustomParameters() הפרמטרים האלה הם client_id,‏ redirect_uri,‏ response_type,‏ scope ו-state.

3. אופציונלי: אפשר לציין היקפי הרשאות OAuth 2.0 נוספים, מעבר ל-profile וכן email שברצונך לבקש מספק האימות. אם האפליקציה שלכם זקוקה לגישה לנתוני משתמשים פרטיים מממשקי Yahoo API, תצטרכו לבקש הרשאות לממשקי Yahoo API בקטע API Permissions במסוף הפיתוח של Yahoo. היקפי ה-OAuth המבוקשים חייבים להיות זהים להיקפים שהוגדרו מראש בהרשאות ה-API של האפליקציה. לדוגמה, אם מבקשים גישה לקריאה וכתיבה לאנשי הקשר של המשתמש והיא מוגדרת מראש בהרשאות ה-API של האפליקציה, צריך להעביר את הערך sdct-w במקום את היקף הרשאת ה-OAuth לקריאה בלבד sdct-r. אחרת, התהליך ייכשל ותוצג שגיאה למשתמש קצה.

   Web

   מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API עם מרחבי שמות

   // 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');
   auth_yahoo_provider_scopes.js

   Web

   // 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-oauth.js

   מידע נוסף זמין מסמכי תיעוד של היקפי הרשאות ב-Yahoo

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

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

     Web

     מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API עם מרחבי שמות

     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.
       });
     auth_yahoo_signin_popup.js

     Web

     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.
       });
     yahoo-oauth.js

   • כדי להיכנס באמצעות הפניה אוטומטית לדף הכניסה, צריך לבצע קריאה אל signInWithRedirect:

     firebase.auth().signInWithRedirect(provider);
     

   אחרי שהמשתמש ישלים את הכניסה ויחזור לדף, תוכלו לקבל תוצאת הכניסה באמצעות קריאה אל getRedirectResult.

   Web

   מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API עם מרחבי שמות

   import { getAuth, signInWithRedirect } from "firebase/auth";
   
   const auth = getAuth();
   signInWithRedirect(auth, provider);
   auth_yahoo_signin_redirect.js

   Web

   firebase.auth().signInWithRedirect(provider);
   yahoo-oauth.js

   בסיום התהליך, אפשר לאחזר את אסימון הזיהוי ואת אסימון הגישה של 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.

5. הדוגמאות שלמעלה מתמקדות בתהליכי כניסה, אבל יש לכם גם אפשרות לקשר ספק של Yahoo למשתמש קיים באמצעות linkWithPopup/linkWithRedirect. לדוגמה, אתם יכולים לקשר כמה ספקים לאותו משתמש ולאפשר לו להיכנס באמצעות כל אחד מהם.

   Web

   מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API עם מרחבי שמות

   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.
       });
   auth_yahoo_link_popup.js

   Web

   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.
       });
   yahoo-oauth.js

6. אפשר להשתמש באותו קו ביטול נעילה עם reauthenticateWithPopup מתוך reauthenticateWithRedirect, שאפשר להשתמש בהם כדי לאחזר פרטי כניסה חדשים עבור פעולות רגישות שמצריכות ביצוע של .

   Web

   למד מידע נוסף על Web API המודולרי שניתן לניעור העצים שדרוג מה-API במרחב השמות.

   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.
       });
   auth_yahoo_reauth_popup.js

   Web

   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.
       });
   yahoo-oauth.js

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

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

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

1. מבצעים את שלבים 1 עד 3 אינץ' מגדירים את הדומיין ל-Hosting. כשמאמתים את הבעלות על הדומיין, Hosting מקצה אישור SSL לדומיין המותאם אישית.
2. מוסיפים את הדומיין המותאם אישית לרשימת הדומיינים המורשים מסוף Firebase: auth.custom.domain.com.
3. בדף ההגדרה של Yahoo Developer Console או של OAuth, מוסיפים את כתובת האתר של דף ההפניה מחדש לרשימת ההיתרים, שיהיה זמין בדומיין המותאם אישית: https://auth.custom.domain.com/__/auth/handler
4. כשמאתחלים את ספריית 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 Realtime Database ו-Cloud Storage, אפשר לקבל את מזהה המשתמש הייחודי של המשתמש שנכנס לחשבון מהמשתנה auth, ולהשתמש בו כדי לקבוע לאילו נתונים למשתמש תהיה גישה.

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

כדי להוציא משתמש, קוראים לפונקציה signOut:

Web

למד מידע נוסף על Web API המודולרי שניתן לניעור העצים שדרוג מה-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

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