Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

قبل ان تبدأ

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

تعامل مع تدفق تسجيل الدخول باستخدام Firebase SDK

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

للتعامل مع تدفق تسجيل الدخول باستخدام Firebase JavaScript SDK ، اتبع الخطوات التالية:

  1. قم بإنشاء مثيل لكائن موفر GitHub:

    إصدار الويب 9

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

    إصدار الويب 8

    var provider = new firebase.auth.GithubAuthProvider();
  2. اختياري: حدد أوث إضافي 2.0 نطاقات الذي تريد طلب من مزود المصادقة. لإضافة نطاق، اتصل addScope . على سبيل المثال:

    إصدار الويب 9

    provider.addScope('repo');

    إصدار الويب 8

    provider.addScope('repo');
    اطلع على وثائق موفر المصادقة .
  3. اختياري: حدد معلمات إضافية مزود أوث المخصصة التي تريد إرسالها مع طلب أوث. لإضافة معلمة مخصصة، والدعوة setCustomParameters على مزود تهيئة مع كائن تحتوي على المفتاح كما هو محدد من قبل وثائق مزود أوث والقيمة المقابلة. على سبيل المثال:

    إصدار الويب 9

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

    إصدار الويب 8

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    معلمات OAuth المطلوبة المحجوزة غير مسموح بها وسيتم تجاهلها. انظر المرجع موفر المصادقة لمزيد من التفاصيل.
  4. قم بالمصادقة باستخدام Firebase باستخدام كائن موفر GitHub. يمكنك مطالبة المستخدمين بتسجيل الدخول بحساباتهم على GitHub إما عن طريق فتح نافذة منبثقة أو عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول. طريقة إعادة التوجيه مفضلة على الأجهزة المحمولة.
    • تسجيل الدخول باستخدام نافذة منبثقة، والدعوة signInWithPopup :

      إصدار الويب 9

      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;
          // ...
        }).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;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      إصدار الويب 8

      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;
          // ...
        }).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 :

      إصدار الويب 9

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

      إصدار الويب 8

      firebase.auth().signInWithRedirect(provider);
      بعد ذلك، يمكنك أيضا استرداد رمز أوث مقدم جيثب عن طريق استدعاء getRedirectResult عند تحميل الصفحة الخاصة بك:

      إصدار الويب 9

      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;
        }).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;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      إصدار الويب 8

      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;
        }).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 من خلال معالجة تدفق تسجيل الدخول عن طريق استدعاء نقاط نهاية GitHub OAuth 2.0:

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

    إصدار الويب 9

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

    إصدار الويب 8

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. مصادقة مع Firebase باستخدام بيانات اعتماد Firebase:

    إصدار الويب 9

    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.email;
        // ...
      });

    إصدار الويب 8

    // 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 ، فيجب عليك إضافة معرف إضافة Chrome الخاص بك:

  1. فتح مشروعك في وحدة التحكم Firebase .
  2. في قسم مصادقة، افتح صفحة تسجيل الدخول الأسلوب.
  3. إضافة URI كما يلي إلى قائمة المصرح مجالات:
    chrome-extension://CHROME_EXTENSION_ID

عمليات المنبثقة فقط ( signInWithPopup ، linkWithPopup ، و reauthenticateWithPopup ) متاحة لملحقات كروم، وملحقات كروم لا يمكن استخدام HTTP الموجهات. يجب عليك استدعاء هذه الطرق من برنامج نصي لصفحة الخلفية بدلاً من نافذة منبثقة لإجراء المستعرض ، حيث ستلغي نافذة المصادقة المنبثقة نافذة إجراء المتصفح المنبثقة. ويمكن استخدام الأساليب المنبثقة الوحيد في التمديدات باستخدام المانيفستو V2 . الأحدث المانيفستو V3 يسمح فقط مخطوطات الخلفية في شكل عمال الخدمات، والتي لا يمكن تنفيذ العمليات المنبثقة على الإطلاق.

في الظاهر جعل ملف تمديد كروم الخاص بك من أن قمت بإضافة https://apis.google.com URL إلى content_security_policy allowlist.

الخطوات التالية

بعد أن يقوم المستخدم بتسجيل الدخول لأول مرة ، يتم إنشاء حساب مستخدم جديد وربطه ببيانات الاعتماد - أي اسم المستخدم وكلمة المرور أو رقم الهاتف أو معلومات موفر المصادقة - المستخدم الذي قام بتسجيل الدخول باستخدام. يتم تخزين هذا الحساب الجديد كجزء من مشروع Firebase الخاص بك ، ويمكن استخدامه لتحديد هوية مستخدم عبر كل تطبيق في مشروعك ، بغض النظر عن كيفية تسجيل المستخدم للدخول.

  • في التطبيقات الخاصة بك، والطريقة الموصى بها لمعرفة حالة المصادقة المستخدم الخاص بك هو وضع مراقب على Auth الكائن. يمكنك بعد ذلك الحصول على المعلومات الشخصية الأساسية للمستخدم من User الكائن. انظر إدارة المستخدمين .

  • في قاعدة البيانات الخاصة بك Firebase الحقيقي وسحابة التخزين قواعد الأمن ، يمكنك الحصول على قعت في هوية المستخدم الفريد المستخدم من auth متغير، واستخدامها للسيطرة على ما هي البيانات على وصول ويمكن للمستخدم.

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

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

إصدار الويب 9

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

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

إصدار الويب 8

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