אימות באמצעות GitHub עם JavaScript

אפשר לאפשר למשתמשים לבצע אימות ב-Firebase באמצעות חשבונות GitHub שלהם על ידי שילוב אימות של GitHub באפליקציה שלכם. אפשר לשלב את GitHub להשתמש ב-Firebase SDK כדי לבצע את תהליך הכניסה, או על ידי ביצוע ידני של זרימת OAuth 2.0 של GitHub והעברת אסימון גישה ל-Firebase.

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

1. מוסיפים את Firebase לפרויקט JavaScript.
2. במסוף Firebase, פותחים את הקטע אימות.
3. בכרטיסייה Sign in method, מפעילים את הספק GitHub.
4. מוסיפים את מזהה הלקוח ואת סוד הלקוח ממסוף הפיתוח של הספק להגדרות הספק:
   1. רישום האפליקציה בתור אפליקציית מפתחים ב-GitHub ולקבל את מזהה הלקוח של OAuth 2.0 של האפליקציה ו-Client Secret.
   2. מוודאים שה-URI להפניה אוטומטית של OAuth ב-Firebase (למשל my-app-12345.firebaseapp.com/__/auth/handler) מוגדרת ככתובת URL לקריאה חוזרת (callback) של הרשאה בדף ההגדרות של האפליקציה ההגדרות של אפליקציית GitHub.
5. לוחצים על שמירה.

איך מבצעים את תהליך הכניסה באמצעות Firebase SDK

אם אתם מפתחים אפליקציית אינטרנט, הדרך הקלה ביותר לאמת את המשתמשים ב-Firebase באמצעות חשבונות GitHub שלהם היא לטפל בתהליך הכניסה באמצעות ה-SDK של Firebase ל-JavaScript. (אם רוצים לאמת משתמש ב-Node.js או בסביבה אחרת שאינה דפדפן, צריך לטפל בתהליך הכניסה באופן ידני).

כדי לטפל בתהליך הכניסה באמצעות Firebase JavaScript SDK:

1. יוצרים מכונה של אובייקט הספק ב-GitHub:

   Web

   מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API עם מרחבי שמות

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

   Web

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

2. אופציונלי: מציינים היקפי הרשאות נוספים של OAuth 2.0 שרוצים לבקש מספק האימות. כדי להוסיף היקף, קוראים ל-addScope. לדוגמה:

   Web

   מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API עם מרחבי שמות

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

   Web

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

   במסמכי התיעוד של ספק האימות
3. אופציונלי: מציינים פרמטרים מותאמים אישית נוספים של ספק OAuth שרוצים לשלוח עם בקשת ה-OAuth. כדי להוסיף פרמטר מותאם אישית, קוראים לפונקציה setCustomParameters בספק שאותחל עם אובייקט שמכיל את המפתח כפי שמצוין במסמכים של ספק ה-OAuth ובערך המתאים. לדוגמה:

   Web

   למד מידע נוסף על Web API המודולרי שניתן לניעור העצים שדרוג מה-API במרחב השמות.

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

   Web

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

   אסור להשתמש בפרמטרים נדרשים שמורים של OAuth, והמערכת תתעלם מהם. פרטים נוספים זמינים במאמר העזרה של ספק האימות.
4. אימות עם Firebase באמצעות אובייקט הספק של GitHub. אפשר להיכנס עם חשבונות GitHub שלהם. כדי לעשות את זה, חלון קופץ או על ידי הפניה אוטומטית לדף הכניסה. השיטה להפניה אוטומטית היא המועדפת במכשירים ניידים.
   • כדי להיכנס באמצעות חלון קופץ, צריך להתקשר אל signInWithPopup:

     Web

     מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API עם מרחבי שמות

     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

     Web

     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

     שימו לב שאפשר לאחזר את אסימון ה-OAuth של ספק GitHub, שאפשר להשתמש בו כדי לאחזר נתונים נוספים באמצעות ממשקי ה-API של GitHub.

     כאן אפשר גם לזהות ולטפל בשגיאות. רשימה של קודי שגיאה מופיעה במסמכי העזר לאימות.

   • כדי להיכנס באמצעות הפניה אוטומטית לדף הכניסה, צריך לבצע קריאה אל signInWithRedirect: יש לפעול לפי השיטות המומלצות כשמשתמשים ב-'signInWithRedirect'.

     Web

     מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API עם מרחבי שמות

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

     Web

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

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

     Web

     מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API עם מרחבי שמות

     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

     Web

     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

     כאן גם תוכלו לזהות שגיאות ולטפל בהן. רשימה של קודי שגיאה מופיעה במסמכי העזרה בנושא אימות.

טיפול בשגיאות שקשורות לחשבון קיים עם פרטי כניסה שונים

אם הפעלתם את ההגדרה One account per email address (חשבון אחד לכל כתובת אימייל) במסוף Firebase, כשמשתמש ינסה להיכנס לספק (כמו GitHub) עם כתובת אימייל שכבר קיימת אצל ספק אחר של משתמש ב-Firebase (כמו Google), תוצג הודעת השגיאה auth/account-exists-with-different-credential עם אובייקט AuthCredential (אסימון גישה ל-GitHub). כדי להשלים את הכניסה אל הספק הקיים צריך להיכנס קודם לספק הקיים (Google) ואז לקשר AuthCredential לשעבר (אסימון גישה של GitHub).

מצב חלון קופץ

אם משתמשים ב-signInWithPopup, אפשר auth/account-exists-with-different-credential שגיאות עם קוד כמו הבא דוגמה:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  GitHubAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using GitHub.
  let result = await signInWithPopup(getAuth(), new GitHubAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending GitHub credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the GitHub credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

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

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

טיפול ידני בתהליך הכניסה

אפשר גם לבצע אימות ב-Firebase באמצעות חשבון GitHub. לשם כך, צריך לטפל בתהליך הכניסה באמצעות קריאה לנקודות הקצה של GitHub OAuth 2.0:

1. כדי לשלב את אימות GitHub באפליקציה, פועלים לפי התיעוד למפתחים. בסוף תהליך הכניסה ל-GitHub, יקבל אסימון גישה מסוג OAuth 2.0.
2. אם אתם צריכים להיכנס לאפליקציה של Node.js, שולחים את גישת OAuth אסימון לאפליקציית Node.js.
3. אחרי שמשתמש נכנס לחשבון ב-GitHub, מחליפים את אסימון הגישה מסוג OAuth 2.0 בפרטי כניסה ל-Firebase:

   Web

   מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API עם מרחבי שמות

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

   Web

   var credential = firebase.auth.GithubAuthProvider.credential(token);
   github.js

4. אימות עם Firebase באמצעות פרטי הכניסה ל-Firebase:

   Web

   למד מידע נוסף על Web API המודולרי שניתן לניעור העצים שדרוג מה-API במרחב השמות.

   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

   Web

   // 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

אימות באמצעות Firebase בתוסף ל-Chrome

אם אתם בונים אפליקציית תוסף ל-Chrome, תוכלו לעיין ב מדריך לעבודה מחוץ למסך.

התאמה אישית של הדומיין להפניה אוטומטית לכניסה ל-GitHub

בזמן יצירת הפרויקט, מערכת Firebase תקצה תת-דומיין ייחודי לפרויקט: https://my-app-12345.firebaseapp.com.

הוא ישמש גם כמנגנון להפניה אוטומטית לכניסה באמצעות OAuth. הדומיין הזה צריך להיות מותרת לכל ספקי ה-OAuth הנתמכים. עם זאת, המשמעות היא שהמשתמשים עשויים לראות את הדומיין הזה בזמן הכניסה ל-GitHub, לפני ההפניה האוטומטית חזרה לאפליקציה: Continue to: https://my-app-12345.firebaseapp.com.

כדי למנוע את הצגת תת-הדומיין שלך, אפשר להגדיר דומיין מותאם אישית באמצעות Firebase Hosting:

1. מבצעים את שלבים 1 עד 3 אינץ' מגדירים את הדומיין ל-Hosting. כשמבצעים אימות הבעלות על הדומיין שלך, Hosting, מקצה אישור SSL לדומיין המותאם אישית.
2. מוסיפים את הדומיין המותאם אישית לרשימת הדומיינים המורשים מסוף Firebase: auth.custom.domain.com.
3. במסוף הפיתוח של GitHub או בדף ההגדרה של OAuth, מוסיפים לרשימת ההיתרים את כתובת ה-URL של דף ההפניה האוטומטית, שאפשר יהיה לגשת אליו בדומיין המותאם אישית: https://auth.custom.domain.com/__/auth/handler.
4. כשמאתחלים את ספריית JavaScript, מציינים את הדומיין המותאם אישית עם השדה authDomain:

   var config = {
     apiKey: '...',
     // Changed from 'my-app-12345.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://my-app-12345.firebaseio.com',
     projectId: 'my-app-12345',
     storageBucket: 'my-app-12345.appspot.com',
     messagingSenderId: '1234567890'
   };
   firebase.initializeApp(config);

השלבים הבאים

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

• באפליקציות, מומלץ לדעת מה סטטוס האימות של המשתמש. הגדרת צופה באובייקט Auth. עכשיו אפשר לקבל את פרטים בסיסיים של הפרופיל מהאובייקט User. למידע נוסף, ראו ניהול משתמשים.

• בכללי האבטחה של Firebase Realtime Database ו-Cloud Storage, אפשר לקבל את מזהה המשתמש הייחודי של המשתמש שנכנס לחשבון מהמשתנה auth, ולהשתמש בו כדי לקבוע לאילו נתונים למשתמש תהיה גישה.

כדי לאפשר למשתמשים להיכנס לאפליקציה באמצעות כמה ספקי אימות, אפשר לקשר את פרטי הכניסה של ספק האימות לחשבון משתמש קיים.

כדי לנתק משתמש מהחשבון, יש להתקשר אל signOut

Web

למד מידע נוסף על Web API המודולרי שניתן לניעור העצים שדרוג מה-API במרחב השמות.

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js