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

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

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

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

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

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

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

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

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

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

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

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

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

   Web

   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

   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

   // 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

     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:

   מומלץ לפעול לפי השיטות המומלצות כשמשתמשים ב-signInWithRedirect, ב-linkWithRedirect או ב-reauthenticateWithRedirect.

     firebase.auth().signInWithRedirect(provider);
     

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

   Web

   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

   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

   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

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) {
  // ...
}

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

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

השלבים הבאים

אחרי שמשתמש נכנס לחשבון בפעם הראשונה, נוצר חשבון משתמש חדש שמקושר לפרטי הכניסה – כלומר שם המשתמש והסיסמה, מספר הטלפון או פרטי ספק האימות – שבאמצעותם המשתמש נכנס לחשבון. החשבון החדש הזה מאוחסן כחלק מפרויקט 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.
});
auth_sign_out.js

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