כניסה של משתמשים באמצעות OIDC

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

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

נכנסים לחשבון Google Cloud . אם אתם משתמשים חדשים ב- Google Cloud, צרו חשבון כדי שתוכלו להעריך את הביצועים של המוצרים שלנו בתרחישים מהעולם האמיתי. לקוחות חדשים מקבלים בחינם גם קרדיט בשווי 300$ להרצה, לבדיקה ולפריסה של עומסי העבודה.

In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

Roles required to select or create a project

• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

Go to project selector

Verify that billing is enabled for your Google Cloud project.

In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

Roles required to select or create a project

• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

Go to project selector

Verify that billing is enabled for your Google Cloud project.

1. מפעילים את Identity Platform ומוסיפים את ה-SDK של הלקוח לאפליקציה. במאמר הזה מוסבר איך לעשות את זה.

הגדרת הספק

1. נכנסים לדף Identity Providers במסוף Google Cloud .
   עוברים לדף Identity Providers
   

2. לוחצים על הוספת ספק ובוחרים באפשרות OpenID Connect מהרשימה.

הרשאה באמצעות קוד

1. כדי להפעיל את תהליך ההרשאה באמצעות קוד, צריך להזין את הפרטים הבאים:

   1. בקטע Choose grant type, בוחרים באפשרות Code Flow.

   2. שם הספק. זה יכול להיות זהה למזהה הספק או שם בהתאמה אישית. אם מזינים שם בהתאמה אישית, לוחצים על עריכה לצד מזהה הספק כדי לציין את המזהה (שחייב להתחיל ב-oidc.).

   3. מזהה הלקוח של הספק.

   4. המוסד המנפיק של הספק. הוא אמור להיראות כך: https://example.com מערכת Identity Platform משתמשת בכתובת ה-URL הזו כדי לאתר את מסמך Discovery של OIDC (שנמצא בדרך כלל בכתובת /.well-known/openid-configuration), שמצוינות בו נקודות הקצה של OAuth והמפתחות הציבוריים של הפלאגין שמתממשק עם שירותים חיצוניים.

      הערה: אם ספק ה-OIDC שלכם לא עומד במפרט OIDC לגילוי, הוא לא יעבוד עם Identity Platform.

   5. סוד הלקוח של הספק.

2. מוסיפים את האפליקציה לרשימת הדומיינים המורשים. לדוגמה, אם כתובת ה-URL של הכניסה לאפליקציה היא https://example.com/login, מוסיפים example.com.

3. מגדירים את כתובת ה-URL לקריאה חוזרת (callback) של Identity Platform ככתובת URL להפניה אוטומטית אצל ספק ה-OIDC. כתובת ה-URL צריכה להיראות בערך כך: https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

4. לוחצים על Save.

תהליך משתמע

1. כדי להפעיל את זרם הענקת הגישה המשתמע, צריך להזין את הפרטים הבאים:

   1. בקטע Choose grant type, בוחרים באפשרות Implicit Flow.

   2. שם הספק. זה יכול להיות זהה למזהה הספק או שם בהתאמה אישית. אם מזינים שם בהתאמה אישית, לוחצים על עריכה לצד מזהה הספק כדי לציין את המזהה (שחייב להתחיל ב-oidc.).

   3. מזהה הלקוח של הספק.

   4. המוסד המנפיק של הספק. הכתובת צריכה להיראות בערך כך: https://example.com. Identity Platform משתמש בכתובת ה-URL הזו כדי לאתר את מסמך Discovery של OIDC (בדרך כלל נמצא בכתובת /.well-known/openid-configuration), שמצוינים בו נקודות הקצה של OAuth והמפתחות הציבוריים של הפלאגין שמתממשק עם שירותים חיצוניים.

      הערה: אם ספק ה-OIDC שלכם לא עומד במפרט OIDC לגילוי, הוא לא יעבוד עם Identity Platform.

2. מוסיפים את האפליקציה לרשימת הדומיינים המורשים. לדוגמה, אם כתובת ה-URL של הכניסה לאפליקציה היא https://example.com/login, מוסיפים example.com.

3. מגדירים את כתובת ה-URL לקריאה חוזרת (callback) של Identity Platform ככתובת URL להפניה אוטומטית אצל ספק ה-OIDC. כתובת ה-URL צריכה להיראות בערך כך: https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

4. לוחצים על Save.

כניסה של משתמשים לחשבון

יש שתי דרכים להכניס משתמשים באמצעות OIDC:

• שימוש בתהליך OAuth. כך תהליך הלחיצת יד של OAuth יושלם בשבילכם. על סמך הבחירה של זרימת קוד ההרשאה או הזרימה המרומזת בשלב הגדרת הספק, שרת GCIP בוחר את הזרימה הרצויה לתקשורת עם ספק הזהויות.

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

כניסת משתמשים באמצעות OAuth

כדי להיכנס באמצעות OAuth:

1. יוצרים מכונת OAuthProvider עם מזהה הספק שהגדרתם בקטע הקודם. מזהה הספק חייב להתחיל ב-oidc..

   גרסה 9 לאינטרנט

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider("oidc.myProvider");
   auth_oidc_provider_create.js

   גרסה 8 לאינטרנט

   const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
   oidc.js

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

   חלון קופץ

   גרסה 9 לאינטרנט

   import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // User is signed in.
       const credential = OAuthProvider.credentialFromResult(result);
       // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
     }).catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_signin_popup.js

   גרסה 8 לאינטרנט

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // User is signed in.
       // result.credential is a firebase.auth().OAuthCredential object.
       // result.credential.providerId is equal to 'oidc.myProvider'.
       // result.credential.idToken is the OIDC provider's ID token.
     })
     .catch((error) => {
       // Handle error.
     });
   oidc.js

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

   כדי להפנות לדף כניסה, קוראים ל-signInWithRedirect():

   גרסה 9 לאינטרנט

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

   גרסה 8 לאינטרנט

   firebase.auth().signInWithRedirect(provider).catch((error) => {
     // Handle error.
   });
   oidc.js

   לאחר מכן, מתקשרים אל getRedirectResult() כדי לקבל את התוצאות כשהמשתמש חוזר לאפליקציה:

   גרסה 9 לאינטרנט

   import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // User is signed in.
       const credential = OAuthProvider.credentialFromResult(result);
       // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_signin_redirect_result.js

   גרסה 8 לאינטרנט

   // On return.
   firebase.auth().getRedirectResult()
     .then((result) => {
       // User is signed in.
       // result.credential is a firebase.auth().OAuthCredential object.
       // result.credential.providerId is equal to 'oidc.myProvider'.
       // result.credential.idToken is the OIDC provider's ID token.
     })
     .catch((error) => {
       // Handle / display error.
       // ...
     });
   oidc.js

בסיום כל אחד מהתהליכים, אפשר לקבל את אסימון המזהה מסוג OIDC באמצעות השדה result.credential.idToken.

כניסה ישירה של משתמשים

כדי להחתים משתמש באמצעות אסימון מזהה OIDC ישירות:

1. מאתחלים מופע OAuthProvider עם מזהה הספק שהגדרתם בקטע הקודם. מזהה הספק חייב להתחיל ב-oidc.. לאחר מכן יוצרים OAuthCredential וקוראים ל-signInWithCredential() כדי שהמשתמש ייכנס לחשבון.

   גרסה 9 לאינטרנט

   import { getAuth, OAuthProvider, signInWithCredential } from "firebase/auth";
   
   const auth = getAuth();
   const credential = provider.credential({
     idToken: oidcIdToken,
   });
   signInWithCredential(auth, credential)
     .then((result) => {
       // User is signed in.
       const newCredential = OAuthProvider.credentialFromResult(result);
       // This gives you a new access token for the OIDC provider. You can use it to directly interact with that provider.
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_direct_sign_in.js

   גרסה 8 לאינטרנט

   const credential = provider.credential(oidcIdToken, null);
   
   firebase.auth().signInWithCredential(credential)
     .then((result) => {
       // User is signed in.
       // User now has a odic.myProvider UserInfo in providerData.
     })
     .catch((error) => {
       // Handle / display error.
       // ...
     });
   oidc.js

קישור חשבונות משתמשים

אם משתמש כבר נכנס לאפליקציה שלכם בשיטה אחרת (למשל, אימייל/סיסמה), אתם יכולים לקשר את החשבון הקיים שלו לספק OIDC באמצעות linkWithPopup() או linkWithRedirect(): לדוגמה, אפשר לקשר לחשבון Google:

גרסה 9 לאינטרנט

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

const auth = getAuth();
linkWithPopup(auth.currentUser, provider).then((result) => {
  // Accounts successfully linked.
  const credential = GoogleAuthProvider.credentialFromResult(result);
  const user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
auth_link_with_popup.js

גרסה 8 לאינטרנט

auth.currentUser.linkWithPopup(provider).then((result) => {
  // Accounts successfully linked.
  var credential = result.credential;
  var user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
link-multiple-accounts.js

המאמרים הבאים

• כניסת משתמשים באמצעות SAML
• הצגת דומיין מותאם אישית במהלך הכניסה
• ניהול ספקי OIDC ו-SAML באופן פרוגרמטי