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

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

قبل البدء

  1. أضِف Firebase إلى مشروع JavaScript.
  2. في وحدة تحكُّم Firebase، افتح قسم المصادقة.
  3. في علامة التبويب طريقة تسجيل الدخول، فعِّل موفّر خدمة GitHub.
  4. أضِف Client-ID (معرّف العميل) وClient Secret (سر العميل) من وحدة تحكّم المطوّرين لدى هذا الموفّر إلى إعداد موفِّر الخدمة:
    1. تسجيل تطبيقك كتطبيق مطور على GitHub والحصول على معرّف العميل OAuth 2.0 لتطبيقك وClient Secret.
    2. تأكَّد من أنّ معرّف الموارد المنتظم (URI) لإعادة توجيه OAuth في Firebase (مثل my-app-12345.firebaseapp.com/__/auth/handler) باعتباره عنوان URL لمعاودة الاتصال للتفويض في صفحة إعدادات تطبيقك على إعدادات تطبيق GitHub.
  5. انقر على حفظ.

معالجة عملية تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase

أسهل طريقة لمصادقة المستخدمين في حال إنشاء تطبيق ويب مع Firebase باستخدام حساباتهم على GitHub هي التعامل مع تدفق تسجيل الدخول حزمة SDK لـ Firebase JavaScript. (إذا كنت تريد مصادقة مستخدم في Node.js أو بيئة أخرى لا تستند إلى المتصفح، فيجب معالجة تدفق تسجيل الدخول يدويًا).

لمعالجة عملية تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) لJavaScript لمنصّة Firebase، اتّبِع الخطوات التالية: الخطوات:

  1. إنشاء مثيل لكائن موفر GitHub:
    WebWeb
    import { GithubAuthProvider } from "firebase/auth";
    
    const provider = new GithubAuthProvider();
    var provider = new firebase.auth.GithubAuthProvider();
  2. اختياري: حدِّد نطاقات OAuth 2.0 الإضافية التي تريدها. ترغب في طلبها من مُقدِّم خدمة المصادقة. لإضافة نطاق، اطلب addScope على سبيل المثال:
    WebWeb
    provider.addScope('repo');
    provider.addScope('repo');
    راجع مقدم خدمة المصادقة ذات الصلة.
  3. اختياري: تحديد معلَمات إضافية لموفِّر OAuth الذي تريد إرساله مع طلب OAuth. لإضافة معلمة مخصصة، طلب setCustomParameters على مقدِّم الخدمة الذي تم إعداده باستخدام عنصر يحتوي على المفتاح كما هو موضح في مستندات موفّر OAuth والقيمة المقابلة. على سبيل المثال:
    WebWeb
    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    غير مسموح بمعلمات OAuth المطلوبة المحجوزة وسيتم تجاهلها. يمكنك الاطّلاع على مرجع موفِّر المصادقة لمزيد من التفاصيل.
  4. يمكنك المصادقة مع Firebase باستخدام كائن موفِّر GitHub. يمكنك مطالبة المستخدمين بتسجيل الدخول باستخدام حساباتهم على GitHub إما من خلال فتح أو عبر إعادة التوجيه إلى صفحة تسجيل الدخول. طريقة إعادة التوجيه هي ويفضلها على الأجهزة المحمولة.
    • لتسجيل الدخول عبر نافذة منبثقة، اتصل بالرقم signInWithPopup:
      WebWeb
      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);
          // ...
        });
      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;
          // ...
        });
      لاحظ أيضًا أنه يمكنك استرداد رمز OAuth المميز لموفر GitHub، والذي يمكن استخدامه لجلب بيانات إضافية باستخدام واجهات برمجة تطبيقات GitHub.

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

    • لتسجيل الدخول عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول، اتصل بالرقم signInWithRedirect: اتّبِع أفضل الممارسات عند استخدام "signInWithRedirect".
      WebWeb
      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);
      firebase.auth().signInWithRedirect(provider);
      بعد ذلك، يمكنك أيضًا استرداد رمز OAuth المميز لمزود GitHub من خلال استدعاء getRedirectResult عند تحميل صفحتك:
      WebWeb
      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);
          // ...
        });
      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;
          // ...
        });
      ويمكنك هنا أيضًا رصد الأخطاء ومعالجتها. للحصول على قائمة برموز الأخطاء، يمكنك الاطّلاع على المستندات المرجعية للمصادقة.

في حال تفعيل الإعداد حساب واحد لكل عنوان بريد إلكتروني في وحدة تحكّم 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:
    WebWeb
    import { GithubAuthProvider } from "firebase/auth";
    
    const credential = GithubAuthProvider.credential(token);
    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. يمكنك المصادقة مع Firebase باستخدام بيانات اعتماد Firebase:
    WebWeb
    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;
        // ...
      });
    // 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;
        // ...
      });

المصادقة باستخدام Firebase في إحدى إضافات Chrome

إذا كنت تنشئ تطبيق إضافة Chrome، يمكنك الاطلاع على دليل المستندات خارج الشاشة

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

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

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

  1. اتبع الخطوات من 1 إلى 3 في إعداد نطاقك لـ "Hosting" عند إثبات الملكية ملكية نطاقك، يوفّر Hosting شهادة طبقة المقابس الآمنة لنطاقك الخاص.
  2. أضف نطاقك الخاص إلى قائمة النطاقات المسموح بها في وحدة تحكّم Firebase: auth.custom.domain.com.
  3. في وحدة تحكم المطور بجيت هب أو صفحة إعداد بروتوكول OAuth، أضِف عنوان URL لصفحة إعادة التوجيه إلى القائمة البيضاء، والتي يمكن الوصول إليها على نطاقك الخاص: https://auth.custom.domain.com/__/auth/handler
  4. عند تهيئة مكتبة 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:

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

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