Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

المصادقة باستخدام GitHub باستخدام JavaScript

يمكنك السماح للمستخدمين بالمصادقة باستخدام Firebase من خلال حساباتهم على GitHub عن طريق دمج مصادقة GitHub في تطبيقك. يمكنك دمج مصادقة GitHub إما باستخدام حزمة Firebase SDK لتنفيذ عملية تسجيل الدخول، أو عن طريق تنفيذ عملية GitHub OAuth 2.0 يدويًا وتمرير رمز الدخول الناتج إلى Firebase.

قبل البدء

أضِف Firebase إلى مشروع JavaScript.
في وحدة تحكّم Firebase، انتقِل إلى الأمان > المصادقة.
في علامة التبويب طريقة تسجيل الدخول ، فعِّل موفّر تسجيل الدخول 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 الذي يمكن استخدامه لجلب بيانات إضافية باستخدام واجهات GitHub API.

هذا هو أيضًا المكان الذي يمكنك فيه رصد الأخطاء والتعامل معها. للاطّلاع على قائمة برموز الأخطاء، راجِع مستندات المرجع الخاصة بالمصادقة.

لتسجيل الدخول عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول، استخدِم 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

إذا فعّلت الإعداد حساب واحد لكل عنوان بريد إلكتروني في 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 قبل إعادة التوجيه إلى التطبيق: متابعة إلى: https://my-app-12345.firebaseapp.com.

لتجنُّب عرض نطاقك الفرعي، يمكنك إعداد نطاق مخصّص باستخدام Firebase Hosting:

اتّبِع الخطوات من 1 إلى 3 في إعداد نطاقك لـ Hosting. عند إثبات ملكية نطاقك، توفّر خدمة Hosting شهادة طبقة المقابس الآمنة (SSL) لنطاقك المخصّص.
أضِف نطاقك المخصّص إلى قائمة النطاقات المفوّضة في الـ Firebase console: 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 تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.