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

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

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

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

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

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

• המוסד המנפיק: מחרוזת שמזהה את הספק. הערך הזה צריך להיות כתובת 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. בדף Sign-in providers (ספקי כניסה) במסוף Firebase, לוחצים על Add new provider (הוספת ספק חדש) ואז על OpenID Connect.

4. בוחרים אם להשתמש בתהליך קוד הרשאה או בתהליך הרשאה מרומזת.

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

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

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

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

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

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

כדי לטפל בתהליך הכניסה באמצעות 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: 'user@example.com'
   });
   

   Web

   provider.setCustomParameters({
     // Target specific email with login hint.
     login_hint: 'user@example.com'
   });
   

   כדאי לפנות לספק כדי לקבל מידע על הפרמטרים שהוא תומך בהם. הערה: אי אפשר להעביר פרמטרים שנדרשים על ידי 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:

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

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