I/O is live! Tune in for livestreamed keynotes and sessions May 20-21 starting at 10 AM PT. Watch now.

דף זה תורגם על ידי Cloud Translation API.

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

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

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

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

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

אם אתם מפתחים אפליקציית אינטרנט, הדרך הקלה ביותר לאמת את המשתמשים ב-Firebase באמצעות חשבונות GitHub שלהם היא לטפל בתהליך הכניסה באמצעות ה-SDK של Firebase ל-JavaScript. (אם רוצים לאמת משתמש ב-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.

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

כדי להיכנס לחשבון על ידי הפניה לדף הכניסה, צריך לבצע קריאה ל-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

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

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

אם הפעלתם את ההגדרה 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) {
  // ...
}

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

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

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

אפשר גם לבצע אימות ב-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, לפני שהם מועברים לאפליקציה: Continue to: 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 קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.