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

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

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

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

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

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

• מנפיק : מחרוזת המזהה את הספק שלך. ערך זה חייב להיות כתובת URL שכאשר היא מצורפת ל- /.well-known/openid-configuration -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 שלך היא לטפל בכל זרימת הכניסה עם Firebase SDK.

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

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

   API מודולרי אינטרנט

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

   API עם מרחב שמות אינטרנט

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

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

   API מודולרי אינטרנט

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

   API עם מרחב שמות אינטרנט

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

   API מודולרי אינטרנט

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

   API עם מרחב שמות אינטרנט

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

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

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

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

   הפניית זרימה

   הפנה מחדש לדף הכניסה של הספק על ידי קריאה ל- signInWithRedirect() :

   API מודולרי אינטרנט

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

   API עם מרחב שמות אינטרנט

   firebase.auth().signInWithRedirect(provider);
   

   לאחר שהמשתמש משלים את הכניסה וחוזר לאפליקציה שלך, תוכל להשיג את תוצאת הכניסה על ידי קריאה ל- getRedirectResult() .

   API מודולרי אינטרנט

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

   API עם מרחב שמות אינטרנט

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

   זרימת פופ אפ

   API מודולרי אינטרנט

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

   API עם מרחב שמות אינטרנט

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