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

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

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

לפני שאתה מתחיל

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

  1. הוסף את Firebase לפרויקט JavaScript שלך .
  2. במסוף Firebase , פתח את הקטע Auth .
  3. בכרטיסייה שיטת כניסה , הפעל את ספק Yahoo .
  4. הוסף את מזהה הלקוח ואת סוד הלקוח ממסוף המפתחים של אותו ספק לתצורת הספק:
    1. כדי לרשום לקוח Yahoo OAuth, עקוב אחר התיעוד למפתחים של 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 version 9

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

    Web version 8

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. אופציונלי : ציין פרמטרים נוספים של OAuth מותאמים אישית שברצונך לשלוח עם בקשת ה-OAuth.

    Web version 9

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

    Web version 8

    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 .

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

    Web version 9

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

    Web version 8

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

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

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

      Web version 9

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

      Web version 8

      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 .

    Web version 9

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

    Web version 8

    firebase.auth().signInWithRedirect(provider);

    בסיום מוצלח, ניתן לאחזר את אסימון מזהה OAuth ואסימון הגישה המשויכים לספק מהאובייקט firebase.auth.UserCredential שהוחזר.

    באמצעות אסימון הגישה של OAuth, אתה יכול לקרוא ל- Yahoo API .

    לדוגמה, כדי לקבל את מידע הפרופיל הבסיסי, ניתן לקרוא ל- REST API הבא:

    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 version 9

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

    Web version 8

    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.
        });
  6. ניתן להשתמש באותה דפוס עם reauthenticateWithPopup / reauthenticateWithRedirect אשר ניתן להשתמש בהם כדי לאחזר אישורים טריים עבור פעולות רגישות הדורשות כניסה אחרונה.

    Web version 9

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

    Web version 8

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

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

אם אתה בונה אפליקציית תוסף Chrome, עליך להוסיף את מזהה תוסף Chrome שלך:

  1. פתח את הפרויקט שלך במסוף Firebase .
  2. במקטע אימות , פתח את דף שיטת הכניסה .
  3. הוסף URI כמו הבא לרשימת הדומיינים המורשים:
    chrome-extension://CHROME_EXTENSION_ID

רק פעולות קופצות ( signInWithPopup , linkWithPopup ו- reauthenticateWithPopup ) זמינות לתוספי Chrome, מכיוון שתוספי Chrome אינם יכולים להשתמש בהפניות HTTP. עליך לקרוא לשיטות אלה מסקריפט של דף רקע ולא מחלון קופץ של פעולה בדפדפן, מכיוון שחלון האימות יבטל את חלון פעולת הדפדפן הקופץ. ניתן להשתמש בשיטות הקופצות רק בהרחבות המשתמשות ב- Manifest V2 . ה- Manfest V3 החדש יותר מאפשר רק סקריפטים בצורת עובדי שירות, שאינם יכולים לבצע את פעולות המוקפץ כלל.

בקובץ המניפסט של תוסף Chrome שלך, ודא שאתה מוסיף את כתובת האתר https://apis.google.com לרשימת ההיתרים של content_security_policy .

הצעדים הבאים

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

  • באפליקציות שלך, הדרך המומלצת לדעת את סטטוס ההרשאה של המשתמש שלך היא להגדיר צופה על אובייקט Auth . לאחר מכן תוכל לקבל את פרטי הפרופיל הבסיסיים של User מאובייקט המשתמש. ראה ניהול משתמשים .

  • בכללי האבטחה של מסד הנתונים בזמן אמת של Firebase ואחסון בענן , תוכל לקבל את מזהה המשתמש הייחודי של המשתמש auth ממשתנה האימות, ולהשתמש בו כדי לשלוט לאילו נתונים המשתמש יכול לגשת.

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

כדי לצאת ממשתמש, התקשר signOut :

Web version 9

import { getAuth, signOut } from "firebase/auth";

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

Web version 8

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