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

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

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

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

הגדרת GitHub כספק

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

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

   כניסה לדף Identity Providers

2. לוחצים על הוספת ספק.
3. בוחרים באפשרות GitHub מהרשימה.
4. מזינים את מזהה הלקוח ואת הסוד של הלקוח ב-GitHub. אם עדיין אין לכם מזהה וסוד, תוכלו לקבל אותם מהדף GitHub Applications.
5. מגדירים את ה-URI שמופיע בקטע Configure GitHub (הגדרת GitHub) כ-URI תקף להפניה אוטומטית של OAuth באפליקציית GitHub. אם הגדרתם דומיין בהתאמה אישית ב-Identity Platform, צריך לעדכן את ה-URI להפניה אוטומטית בהגדרות של אפליקציית GitHub כדי להשתמש בדומיין המותאם אישית במקום בדומיין שמוגדר כברירת מחדל. לדוגמה, שינוי של https://myproject.firebaseapp.com/__/auth/handler ל-https://auth.myownpersonaldomain.com/__/auth/handler.
6. בחלונית הצדדית Project settings (הגדרות הפרויקט), לוחצים על Add Domain (הוספת דומיין) ומוסיפים את הדומיין של האפליקציה.

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

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

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

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

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

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

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

   var provider = new firebase.auth.GithubAuthProvider();
   github.js

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

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

   provider.addScope('repo');
   auth_github_provider_scopes.js

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

   provider.addScope('repo');
   github.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 בהתאמה אישית. ההגדרות האלה ספציפיות ל-GitHub, ובדרך כלל משמשות להתאמה אישית של חוויית האימות. אי אפשר להעביר פרמטרים ששמורים על ידי OAuth או Identity Platform.

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

   provider.setCustomParameters({
     'allow_signup': 'false'
   });
   auth_github_provider_params.js

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

   provider.setCustomParameters({
     'allow_signup': 'false'
   });
   github.js

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

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

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

   import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // This gives you a GitHub Access Token. You can use it to access the GitHub API.
       const credential = GithubAuthProvider.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 = GithubAuthProvider.credentialFromError(error);
       // ...
     });
   auth_github_signin_popup.js

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

   firebase
     .auth()
     .signInWithPopup(provider)
     .then((result) => {
       /** @type {firebase.auth.OAuthCredential} */
       var credential = result.credential;
   
       // This gives you a GitHub Access Token. You can use it to access the GitHub 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;
       // ...
     });
   github.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

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

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

   import { getAuth, getRedirectResult, GithubAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       const credential = GithubAuthProvider.credentialFromResult(result);
       if (credential) {
         // This gives you a GitHub Access Token. You can use it to access the GitHub API.
         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 = GithubAuthProvider.credentialFromError(error);
       // ...
     });
   auth_github_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 GitHub Access Token. You can use it to access the GitHub 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;
       // ...
     });
   github.js

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

REST

curl -H "Authorization: Bearer [TOKEN]" https://api.github.com/gists/starred

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

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

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

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

   import { GithubAuthProvider } from "firebase/auth";
   
   const credential = GithubAuthProvider.credential(token);
   auth_github_provider_credential.js

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

   var credential = firebase.auth.GithubAuthProvider.credential(token);
   github.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
• כניסה של משתמשים באמצעות ספקי זהויות אחרים.