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

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

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

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

טפל בזרימת הכניסה עם Firebase SDK

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

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

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

   Web version 9

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

   Web version 8

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

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

   Web version 9

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

   Web version 8

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

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

   Web version 9

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

   Web version 8

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

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

     Web version 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

     Web version 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

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

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

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

     Web version 9

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

     Web version 8

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

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

     Web version 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

     Web version 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

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

// Step 1.
// User tries to sign in to GitHub.
auth.signInWithPopup(new firebase.auth.GithubAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending GitHub credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // GitHub account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to GitHub credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // GitHub account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

טפל בזרימת הכניסה באופן ידני

אתה יכול גם לבצע אימות עם 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 version 9

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

   Web version 8

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

4. בצע אימות באמצעות Firebase באמצעות האישורים של Firebase:

   Web version 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

   Web version 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

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

אם אתה בונה אפליקציית תוסף Chrome, עליך להוסיף את מזהה תוסף Chrome שלך:

1. פתח את הפרויקט שלך במסוף Firebase .
2. במקטע אימות , פתח את דף שיטת הכניסה .
3. הוסף URI כמו הבא לרשימת הדומיינים המורשים:

   chrome-extension://CHROME_EXTENSION_ID

רק פעולות קופצות ( signInWithPopup , linkWithPopup ו- reauthenticateWithPopup ) זמינות לתוספי Chrome, מכיוון שתוספי Chrome אינם יכולים להשתמש בהפניות HTTP. עליך לקרוא לשיטות אלה מסקריפט של דף רקע ולא מחלון קופץ של פעולה בדפדפן, מכיוון שחלון האימות יבטל את חלון פעולת הדפדפן הקופץ. ניתן להשתמש בשיטות הקופצות רק בהרחבות המשתמשות ב- Manifest V2 . ה- Manfest V3 החדש יותר מאפשר רק סקריפטים בצורת עובדי שירות, שאינם יכולים לבצע את פעולות המוקפץ כלל.

בקובץ המניפסט של תוסף Chrome שלך, ודא שאתה מוסיף את כתובת האתר https://apis.google.com לרשימת ההיתרים של content_security_policy .

הצעדים הבאים

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

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

• בכללי האבטחה של מסד הנתונים בזמן אמת של Firebase ואחסון בענן , תוכל לקבל את מזהה המשתמש הייחודי של המשתמש auth ממשתנה האימות, ולהשתמש בו כדי לשלוט לאילו נתונים המשתמש יכול לגשת.

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

כדי לצאת ממשתמש, התקשר signOut :

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

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

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