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

المصادقة باستخدام تسجيل الدخول إلى Facebook باستخدام JavaScript

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

قبل ان تبدأ

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

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

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

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

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

    إصدار الويب 9

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

    إصدار الويب 8

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

    إصدار الويب 9

    provider.addScope('user_birthday');

    إصدار الويب 8

    provider.addScope('user_birthday');
    اطلع على وثائق موفر المصادقة .
  3. اختياري: لتوطين تدفق أوث مقدم على اللغة المفضلة للمستخدم دون المرور صراحة المعلمات أوث مخصصة ذات الصلة، وتحديث رمز اللغة على سبيل المثال مصادقة قبل بدء تدفق أوث. على سبيل المثال:

    إصدار الويب 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    إصدار الويب 8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. اختياري: حدد معلمات إضافية مزود أوث المخصصة التي تريد إرسالها مع طلب أوث. لإضافة معلمة مخصصة، والدعوة setCustomParameters على مزود تهيئة مع كائن تحتوي على المفتاح كما هو محدد من قبل وثائق مزود أوث والقيمة المقابلة. على سبيل المثال:

    إصدار الويب 9

    provider.setCustomParameters({
      'display': 'popup'
    });

    إصدار الويب 8

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

      إصدار الويب 9

      import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // The signed-in user info.
          const user = result.user;
      
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          const credential = FacebookAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
      
          // ...
        })
        .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 = FacebookAuthProvider.credentialFromError(error);
      
          // ...
        });

      إصدار الويب 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // The signed-in user info.
          var user = result.user;
      
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          var accessToken = credential.accessToken;
      
          // ...
        })
        .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 المميز لموفر Facebook والذي يمكن استخدامه لجلب بيانات إضافية باستخدام واجهات برمجة تطبيقات Facebook.

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

    • لتسجيل الدخول عن طريق إعادة توجيه إلى صفحة تسجيل الدخول، والدعوة signInWithRedirect :

      إصدار الويب 9

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

      إصدار الويب 8

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

      إصدار الويب 9

      import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          const credential = FacebookAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          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;
          // AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
          // ...
        });

      إصدار الويب 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Facebook Access Token. You can use it to access the Facebook 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 في أحد إضافات 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.
});