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

במאמר הזה מוסבר איך להשתמש ב-Identity Platform כדי לאפשר למשתמשים להיכנס באמצעות Google.

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

ההדרכה הזו מיועדת למשתמשים שכבר הפעילו את Identity Platform, ויש להם אפליקציית אינטרנט בסיסית שנכתבה באמצעות HTML ו-JavaScript. במדריך למתחילים מוסבר איך להפעיל את Identity Platform ולהיכנס לחשבון.

הגדרת Google כספק

כדי להגדיר את Google כספק זהויות:

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

   כניסה לדף Identity Providers

2. לוחצים על הוספת ספק.
3. בוחרים באפשרות Google מהרשימה.
4. מזינים את מזהה לקוח האינטרנט ואת סוד האינטרנט של Google. אם עדיין אין לכם מזהה וסוד, תוכלו לקבל אותם מהדף API's & Services.
5. כדי לאפשר גישה ממזהי לקוחות חיצוניים, לוחצים על הוספה ומוסיפים את מזהה הלקוח.
6. כדי להגדיר את מסך ההסכמה, לוחצים על הגדרת המסך. הדף Google Auth Platform ייפתח בכרטיסייה נפרדת.
7. בדף Google Auth Platform, מגדירים את מסך ההסכמה ל-OAuth.
8. חוזרים לדף ספקי זהויות, בחלונית הצדדית הגדרות הפרויקט, לוחצים על הוספת דומיין ומוסיפים את הדומיין של האפליקציה.

   מומלץ לא לכלול את localhost בפרויקטים שלכם בסביבת הייצור.

   הערה: בפרויקטים שנוצרו לפני 28 באפריל 2025, ‏localhost מופעל כברירת מחדל.
9. בקטע הגדרת האפליקציה, לוחצים על פרטי ההגדרה. מעתיקים את קטע הקוד לקוד של האפליקציה כדי להפעיל את Identity Platform client SDK.
10. לוחצים על Save.

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

1. יוצרים מופע של אובייקט ספק Google:

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

   import { GoogleAuthProvider } from "firebase/auth";
   
   const provider = new GoogleAuthProvider();
   auth_google_provider_create.js

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

   var provider = new firebase.auth.GoogleAuthProvider();
   google-signin.js

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

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

   provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
   auth_google_provider_scopes.js

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

   provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
   google-signin.js

3. אופציונלי: התאמה לשפה המקומית של תהליך האימות. אפשר לציין שפה או להשתמש בשפת ברירת המחדל של המכשיר:

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

   import { getAuth } from "firebase/auth";
   
   const auth = getAuth();
   auth.languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // auth.useDeviceLanguage();
   auth_set_language_code.js

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

   firebase.auth().languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // firebase.auth().useDeviceLanguage();
   index.js

4. אופציונלי: מציינים פרמטרים נוספים של OAuth בהתאמה אישית. ההגדרות האלה ספציפיות ל-Google, ובדרך כלל משמשות להתאמה אישית של חוויית האימות. אי אפשר להעביר פרמטרים ששמורים על ידי OAuth או Identity Platform.

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

   provider.setCustomParameters({
     'login_hint': '[e-mail]'
   });
   auth_google_provider_params.js

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

   provider.setCustomParameters({
     'login_hint': '[e-mail]'
   });
   google-signin.js

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

   כדי להציג חלון קופץ, מתקשרים אל signInWithPopup():

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

   import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // This gives you a Google Access Token. You can use it to access the Google API.
       const credential = GoogleAuthProvider.credentialFromResult(result);
       const token = credential.accessToken;
       // The signed-in user info.
       const user = result.user;
       // IdP data available using getAdditionalUserInfo(result)
       // ...
     }).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 = GoogleAuthProvider.credentialFromError(error);
       // ...
     });
   auth_google_signin_popup.js

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

   firebase.auth()
     .signInWithPopup(provider)
     .then((result) => {
       /** @type {firebase.auth.OAuthCredential} */
       var credential = result.credential;
   
       // This gives you a Google Access Token. You can use it to access the Google API.
       var token = credential.accessToken;
       // The signed-in user info.
       var user = result.user;
       // IdP data available in result.additionalUserInfo.profile.
         // ...
     }).catch((error) => {
       // Handle Errors here.
       var errorCode = error.code;
       var errorMessage = error.message;
       // The email of the user's account used.
       var email = error.email;
       // The firebase.auth.AuthCredential type that was used.
       var credential = error.credential;
       // ...
     });
   google-signin.js

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

   כדאי לפעול לפי השיטות המומלצות כשמשתמשים ב-signInWithRedirect, ב-linkWithRedirect או ב-reauthenticateWithRedirect.

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

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

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

   firebase.auth().signInWithRedirect(provider);
   index.js

   לאחר מכן, מאחזרים את האסימון של Google על ידי קריאה ל-getRedirectResult() כשהדף נטען:

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

   import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // This gives you a Google Access Token. You can use it to access Google APIs.
       const credential = GoogleAuthProvider.credentialFromResult(result);
       const token = credential.accessToken;
   
       // The signed-in user info.
       const user = result.user;
       // IdP data available using getAdditionalUserInfo(result)
       // ...
     }).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 = GoogleAuthProvider.credentialFromError(error);
       // ...
     });
   auth_google_signin_redirect_result.js

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

   firebase.auth()
     .getRedirectResult()
     .then((result) => {
       if (result.credential) {
         /** @type {firebase.auth.OAuthCredential} */
         var credential = result.credential;
   
         // This gives you a Google Access Token. You can use it to access the Google API.
         var token = credential.accessToken;
         // ...
       }
       // The signed-in user info.
       var user = result.user;
       // IdP data available in result.additionalUserInfo.profile.
         // ...
     }).catch((error) => {
       // Handle Errors here.
       var errorCode = error.code;
       var errorMessage = error.message;
       // The email of the user's account used.
       var email = error.email;
       // The firebase.auth.AuthCredential type that was used.
       var credential = error.credential;
       // ...
     });
   google-signin.js

אחרי שיש לכם אסימון גישה, אתם יכולים להשתמש בו כדי להפעיל את Google API. לדוגמה:

REST

curl -H "Authorization: Bearer [TOKEN]" https://www.googleapis.com/oauth2/v2/userinfo

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

אם אתם לא רוצים להשתמש ב-SDK של הלקוח, אתם יכולים גם לטפל בתהליך הכניסה באופן ידני:

1. כדי לשלב את אימות Google באפליקציה, פועלים לפי השלבים שמפורטים בתיעוד למפתחים.
2. נכנסים עם חשבון המשתמש באמצעות Google בתהליך שהטמעתם בשלב הקודם.
3. ממירים את האסימון שמתקבל מ-Google בפרטי כניסה של Identity Platform:

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

   import { GoogleAuthProvider } from "firebase/auth";
   
   const credential = GoogleAuthProvider.credential(idToken);
   auth_google_provider_credential.js

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

   var credential = firebase.auth.GoogleAuthProvider.credential(idToken);
   google-signin.js

4. משתמשים באמצעי האימות כדי להכניס את המשתמש באמצעות Identity Platform:

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

   import { getAuth, signInWithCredential } from "firebase/auth";
   
   // Sign in with the credential from the user.
   const auth = getAuth();
   signInWithCredential(auth, credential)
     .then((result) => {
       // Signed in 
       // ...
     })
     .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;
       // ...
     });
   auth_signin_credential.js

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

   // Sign in with the credential from the user.
   firebase.auth()
     .signInWithCredential(credential)
     .then((result) => {
       // Signed in 
       // ...
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.email;
       // ...
     });
   index.js

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

• מידע נוסף על משתמשי Identity Platform
• כניסה של משתמשים באמצעות ספקי זהויות אחרים.