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

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

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

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

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