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

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

قبل ان تبدأ

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

   تعرف على المزيد حول واجهة برمجة تطبيقات الويب المعيارية القابلة للاهتزاز والترقية من واجهة برمجة التطبيقات ذات مساحة الاسم.

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

   Web namespaced API

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

2. اختياري : حدد نطاقات OAuth 2.0 الإضافية التي تريد طلبها من موفر المصادقة. لإضافة نطاق، اتصل بـ addScope . على سبيل المثال:

   Web modular API

   تعرف على المزيد حول واجهة برمجة تطبيقات الويب المعيارية القابلة للاهتزاز والترقية من واجهة برمجة التطبيقات ذات مساحة الاسم.

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

   Web namespaced API

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

   راجع وثائق موفر المصادقة .
3. اختياري : حدد معلمات موفر OAuth المخصصة الإضافية التي تريد إرسالها مع طلب OAuth. لإضافة معلمة مخصصة، قم باستدعاء setCustomParameters على الموفر الذي تمت تهيئته باستخدام كائن يحتوي على المفتاح كما هو محدد بواسطة وثائق موفر OAuth والقيمة المقابلة. على سبيل المثال:

   Web modular API

   تعرف على المزيد حول واجهة برمجة تطبيقات الويب المعيارية القابلة للاهتزاز والترقية من واجهة برمجة التطبيقات ذات مساحة الاسم.

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

   Web namespaced API

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

   لا يُسمح بمعلمات OAuth المطلوبة المحجوزة وسيتم تجاهلها. راجع مرجع موفر المصادقة لمزيد من التفاصيل.
4. قم بالمصادقة مع Firebase باستخدام كائن موفر GitHub. يمكنك مطالبة المستخدمين بتسجيل الدخول باستخدام حسابات GitHub الخاصة بهم إما عن طريق فتح نافذة منبثقة أو عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول. طريقة إعادة التوجيه مفضلة على الأجهزة المحمولة.
   • لتسجيل الدخول باستخدام نافذة منبثقة، اتصل بـ signInWithPopup :

     Web modular 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 namespaced API

     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.

     وهذا أيضًا هو المكان الذي يمكنك فيه اكتشاف الأخطاء ومعالجتها. للحصول على قائمة برموز الأخطاء، قم بإلقاء نظرة على Auth Reference Docs .

   • لتسجيل الدخول عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول، اتصل بـ signInWithRedirect : اتبع أفضل الممارسات عند استخدام `signInWithRedirect`.

     Web modular API

     تعرف على المزيد حول واجهة برمجة تطبيقات الويب المعيارية القابلة للاهتزاز والترقية من واجهة برمجة التطبيقات ذات مساحة الاسم.

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

     Web namespaced API

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

     بعد ذلك، يمكنك أيضًا استرداد رمز OAuth الخاص بموفر GitHub عن طريق استدعاء getRedirectResult عند تحميل صفحتك:

     Web modular 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 namespaced API

     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 .

التعامل مع الحساب الموجود مع أخطاء بيانات الاعتماد المختلفة

إذا قمت بتمكين إعداد حساب واحد لكل عنوان بريد إلكتروني في وحدة تحكم 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:

1. قم بدمج مصادقة GitHub في تطبيقك باتباع وثائق المطور . في نهاية عملية تسجيل الدخول إلى GitHub، ستتلقى رمز وصول OAuth 2.0.
2. إذا كنت بحاجة إلى تسجيل الدخول على تطبيق Node.js، فأرسل رمز وصول OAuth إلى تطبيق Node.js.
3. بعد أن يقوم المستخدم بتسجيل الدخول بنجاح باستخدام GitHub، استبدل رمز وصول OAuth 2.0 ببيانات اعتماد Firebase:

   Web modular API

   تعرف على المزيد حول واجهة برمجة تطبيقات الويب المعيارية القابلة للاهتزاز والترقية من واجهة برمجة التطبيقات ذات مساحة الاسم.

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

   Web namespaced API

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

4. قم بالمصادقة مع Firebase باستخدام بيانات اعتماد Firebase:

   Web modular 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 namespaced API

   // 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 . يسمح Manifest V3 الأحدث فقط بالبرامج النصية في الخلفية في شكل عمال خدمة، والذين لا يمكنهم تنفيذ العمليات المنبثقة على الإطلاق.

في ملف البيان الخاص بامتداد Chrome، تأكد من إضافة عنوان URL https://apis.google.com إلى القائمة المسموح بها content_security_policy .

تخصيص مجال إعادة التوجيه لتسجيل الدخول إلى GitHub

عند إنشاء المشروع، سيوفر Firebase نطاقًا فرعيًا فريدًا لمشروعك: https://my-app-12345.firebaseapp.com .

سيتم استخدام هذا أيضًا كآلية إعادة توجيه لتسجيل الدخول إلى OAuth. ويجب السماح بهذا المجال لجميع موفري OAuth المعتمدين. ومع ذلك، هذا يعني أن المستخدمين قد يرون هذا النطاق أثناء تسجيل الدخول إلى GitHub قبل إعادة التوجيه مرة أخرى إلى التطبيق: تابع إلى: https://my-app-12345.firebaseapp.com .

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

1. اتبع الخطوات من 1 إلى 3 في إعداد المجال الخاص بك للاستضافة . عند التحقق من ملكية النطاق الخاص بك، توفر الاستضافة شهادة 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 وقواعد أمان التخزين السحابي، يمكنك الحصول على معرف المستخدم الفريد للمستخدم الذي قام بتسجيل الدخول من متغير auth ، واستخدامه للتحكم في البيانات التي يمكن للمستخدم الوصول إليها.

يمكنك السماح للمستخدمين بتسجيل الدخول إلى تطبيقك باستخدام موفري مصادقة متعددين عن طريق ربط بيانات اعتماد موفر المصادقة بحساب مستخدم موجود.

لتسجيل خروج مستخدم، اتصل signOut :

Web modular 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 namespaced API

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