‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

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

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

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

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

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

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

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

Web

import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();auth_github_provider_create.js

Web

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

אופציונלי: מציינים היקפי הרשאות נוספים של OAuth 2.0 שרוצים לבקש מספק האימות. כדי להוסיף היקף, קוראים ל-addScope. לדוגמה:
Web
```
provider.addScope('repo');auth_github_provider_scopes.js
```
Web
```
provider.addScope('repo');github.js
```
מידע נוסף על ספק האימות
אופציונלי: מציינים פרמטרים נוספים של ספק OAuth מותאם אישית שרוצים לשלוח עם בקשת ה-OAuth. כדי להוסיף פרמטר בהתאמה אישית, קוראים ל-setCustomParameters בספק שאותחל עם אובייקט שמכיל את המפתח כפי שצוין במסמכי התיעוד של ספק OAuth ואת הערך התואם. לדוגמה:
Web
```
provider.setCustomParameters({
  'allow_signup': 'false'
});auth_github_provider_params.js
```
Web
```
provider.setCustomParameters({
  'allow_signup': 'false'
});github.js
```
אסור להשתמש בפרמטרים שמורים של OAuth, והמערכת תתעלם מהם. פרטים נוספים זמינים במאמר בנושא ספקי אימות.

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

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

Web

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

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

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

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

טיפול בשגיאות מסוג account-exists-with-different-credential

אם הפעלתם את ההגדרה One account per email address (חשבון אחד לכל כתובת אימייל) בFirebase console, כשמשתמש מנסה להיכנס לספק (למשל, 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) {
  // ...
}

מצב הפניה אוטומטית

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

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

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

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

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

Web

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

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

Web

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, כדאי לעיין במדריך למסמכים מחוץ למסך.

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

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

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

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

כשמפעילים את ספריית ה-JavaScript, מציינים את הדומיין המותאם אישית בשדה authDomain:

var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

השלבים הבאים

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

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

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

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

Web

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

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