אימות באמצעות OpenID Connect באפליקציות אינטרנט

אם שדרגת ל-Firebase Authentication with Identity Platform, תוכל לאמת את המשתמשים שלך באמצעות Firebase באמצעות ספק תואם OpenID Connect (OIDC) לבחירתכם. הזה מאפשרת להשתמש בספקי זהויות שלא נתמכים במקור על ידי Firebase.

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

כדי להכניס משתמשים באמצעות ספק OIDC, קודם צריך לאסוף מידע מסוים מהספק:

• Client ID: מחרוזת ייחודית לספק שמזהה את האפליקציה שלכם. שלך יכול להיות שהספק יקצה לכם מזהה לקוח שונה לכל פלטפורמה שבה אתם תומכים. זהו אחד מהערכים של הבקשה aud באסימונים מזהים שהונפקו על ידי ספק.

• Client secret: מחרוזת סודית שבה הספק משתמש כדי לאשר את הבעלות של מזהה הלקוח. לכל מזהה לקוח צריך סוד לקוח תואם. (הערך הזה נדרש רק אם אתם משתמשים בתהליך קוד האימות, שמומלץ מאוד להשתמש בו).

• Issuer: מחרוזת שמזהה את הספק שלך. הערך הזה חייב להיות כתובת URL שמצורף ל-/.well-known/openid-configuration, הוא המיקום של מסמך הגילוי מסוג OIDC של הספק. לדוגמה, אם המנפיק הוא https://auth.example.com, מסמך הגילוי חייב להיות זמין בכתובת https://auth.example.com/.well-known/openid-configuration.

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

1. מוסיפים את Firebase לפרויקט JavaScript.

2. אם לא שדרגתם ל-Firebase Authentication with Identity Platform, צריך לשדרג את המינוי. אימות OpenID Connect זמינה רק בפרויקטים משודרגים.

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

4. בוחרים אם להשתמש בהרשאה באמצעות קוד או הענקת זרם הענקת גישה משתמע.

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

5. נותנים שם לספק הזה. שימו לב למזהה הספק שנוצר: oidc.example-provider. תצטרכו את המזהה הזה כשתוסיפו לאפליקציה קוד כניסה.

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

7. שומרים את השינויים.

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

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

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

1. יוצרים מכונה של OAuthProvider באמצעות מזהה הספק שקיבלת במסוף Firebase.

   Web

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('oidc.example-provider');
   

   Web

   var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
   

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

   Web

   provider.setCustomParameters({
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   

   Web

   provider.setCustomParameters({
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   

   מומלץ לברר עם הספק אילו פרמטרים הוא תומך. שימו לב שאי אפשר להעביר פרמטרים שנדרשים ל-Firebase עם setCustomParameters הפרמטרים האלה הם client_id, response_type, redirect_uri, state, scope וגם response_mode.

3. אופציונלי: מציינים היקפי הרשאות OAuth 2.0 נוספים מעבר לפרופיל הבסיסי שרוצים לבקש מספק האימות.

   Web

   provider.addScope('mail.read');
   provider.addScope('calendars.read');
   

   Web

   provider.addScope('mail.read');
   provider.addScope('calendars.read');
   

   מומלץ לברר עם הספק את היקפי ההרשאות שנתמכים בו.

4. מבצעים אימות עם Firebase באמצעות אובייקט של ספק OAuth.

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

   תהליך הפניה לכתובת אחרת

   כדי להפנות לדף הכניסה של הספק, צריך לבצע קריאה ל-signInWithRedirect():

   Web

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

   Web

   firebase.auth().signInWithRedirect(provider);
   

   אחרי שהמשתמש ישלים את הכניסה ויחזור לאפליקציה, תוכלו לקבל את תוצאת הכניסה בהתקשרות אל getRedirectResult().

   Web

   import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // User is signed in.
       // 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

   firebase.auth().getRedirectResult()
     .then((result) => {
       // IdP data available in result.additionalUserInfo.profile.
       // ...
   
       /** @type {firebase.auth.OAuthCredential} */
       var credential = result.credential;
   
       // OAuth access and id tokens can also be retrieved:
       var accessToken = credential.accessToken;
       var idToken = credential.idToken;
     })
     .catch((error) => {
       // Handle error.
     });
   

   תהליך של חלון קופץ

   Web

   import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // User is signed in.
       // IdP data available using getAdditionalUserInfo(result)
   
       // 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

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // IdP data available in result.additionalUserInfo.profile.
       // ...
   
       /** @type {firebase.auth.OAuthCredential} */
       var credential = result.credential;
   
       // OAuth access and id tokens can also be retrieved:
       var accessToken = credential.accessToken;
       var idToken = credential.idToken;
     })
     .catch((error) => {
       // Handle error.
     });
   

5. הדוגמאות שלמעלה מתמקדות בתהליכי הכניסה, אבל אפשר להשתמש באותה דפוס לקישור ספק OIDC למשתמש קיים באמצעות linkWithRedirect() וגם linkWithPopup(), ואימות מחדש של משתמש באמצעות reauthenticateWithRedirect() ו-reauthenticateWithPopup(), שיכולים להיות משמש לאחזור פרטי כניסה חדשים לפעולות רגישות שמצריכות ההתחברות האחרונה.

טיפול ידני בתהליך הכניסה

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

Web

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // 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

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // 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.
    });