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

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

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

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

מוסיפים את Firebase לפרויקט ב-JavaScript.
במסוף Firebase, פותחים את הקטע אימות.
בכרטיסייה שיטת כניסה, מפעילים את ספק Yahoo.
מוסיפים את מזהה הלקוח ואת סוד הלקוח מ-Developer Console של הספק להגדרות הספק:
1. כדי לרשום לקוח Yahoo OAuth, פועלים לפי ההוראות בתיעוד למפתחים של Yahoo בנושא רישום אפליקציית אינטרנט ב-Yahoo.
  
  חשוב לבחור את שתי הרשאות ה-API של OpenID Connect: profile ו-email.
2. כשרושמים אפליקציות אצל הספקים האלה, חשוב לרשום את הדומיין *.firebaseapp.com של הפרויקט כדומיין ההפניה של האפליקציה.
לוחצים על שמירה.

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

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

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

יוצרים מופע של 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

אופציונלי: מציינים פרמטרים נוספים של 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.
אופציונלי: מציינים היקפי הרשאות נוספים של OAuth 2.0 מעבר ל-profile ול-email שרוצים לבקש מספק האימות. אם האפליקציה שלכם דורשת גישה לנתונים פרטיים של משתמשים מ-Yahoo APIs, תצטרכו לבקש הרשאות ל-Yahoo APIs בקטע API Permissions ב-Yahoo developer console. היקפי ה-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.

מתבצע אימות באמצעות 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:

  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

אחרי השלמת התהליך, אפשר לאחזר את טוקן הגישה ואת טוקן ה-ID של 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. לדוגמה, אפשר לקשר כמה ספקים לאותו משתמש כדי לאפשר לו להיכנס באמצעות כל אחד מהם.

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

אפשר להשתמש באותו דפוס עם 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

טיפול בשגיאות מסוג account-exists-with-different-credential

אם הפעלתם את ההגדרה חשבון אחד לכל כתובת אימייל במסוף 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 לא יכול לאמת את קהל היעד של אסימוני גישה ל-OAuth של Yahoo. זו דרישת אבטחה קריטית, והיא יכולה לחשוף אפליקציות ואתרים למתקפות שידור חוזר, שבהן אפשר להשתמש באסימון גישה של Yahoo OAuth שהושג עבור פרויקט אחד (התוקף) כדי להיכנס לפרויקט אחר (הקורבן). במקום זאת, Firebase Auth מאפשר לטפל בתהליך OAuth כולו ובחילופי קוד ההרשאה באמצעות מזהה הלקוח וסוד הלקוח של OAuth שהוגדרו במסוף Firebase. קוד ההרשאה יכול לשמש רק בשילוב עם מזהה לקוח או סוד לקוח ספציפיים, ולכן אי אפשר להשתמש בקוד הרשאה שהתקבל עבור פרויקט אחד בפרויקט אחר.

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

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

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

במהלך יצירת הפרויקט, Firebase יקצה לפרויקט שלכם תת-דומיין ייחודי: https://my-app-12345.firebaseapp.com.

הכתובת הזו תשמש גם כמנגנון ההפניה לכניסה באמצעות OAuth. צריך לאשר את הדומיין הזה לכל ספקי ה-OAuth הנתמכים. עם זאת, המשמעות היא שהמשתמשים עשויים לראות את הדומיין הזה כשהם נכנסים ל-Yahoo לפני שהם מופנים בחזרה לאפליקציה: המשך אל: https://my-app-12345.firebaseapp.com.

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

פועלים לפי שלבים 1 עד 3 במאמר בנושא הגדרת הדומיין ל-Hosting. כשמאמתים את הבעלות על הדומיין, Hosting מקצה אישור SSL לדומיין המותאם אישית.
מוסיפים את הדומיין המותאם אישית לרשימת הדומיינים המורשים במסוף Firebase: auth.custom.domain.com.
ב-Yahoo developer console או בדף ההגדרה של 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: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

השלבים הבאים

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

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

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

כדי להוציא משתמש מהחשבון, מתקשרים אל signOut:

Web

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

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