يمكنك السماح للمستخدمين بالمصادقة مع Firebase باستخدام حسابات Facebook الخاصة بهم من خلال دمج تسجيل دخول Facebook في تطبيقك. يمكنك دمج تسجيل الدخول إلى Facebook إما باستخدام Firebase SDK لتنفيذ تدفق تسجيل الدخول، أو عن طريق تنفيذ تدفق تسجيل الدخول إلى Facebook يدويًا وتمرير رمز الوصول الناتج إلى Firebase.
قبل ان تبدأ
- أضف Firebase إلى مشروع JavaScript الخاص بك .
- على موقع Facebook for Developers ، احصل على معرف التطبيق وسر التطبيق لتطبيقك.
- تمكين تسجيل الدخول الفيسبوك:
- في وحدة تحكم Firebase ، افتح قسم المصادقة .
- في علامة تبويب طريقة تسجيل الدخول ، قم بتمكين طريقة تسجيل الدخول إلى Facebook وحدد معرف التطبيق وسر التطبيق الذي حصلت عليه من Facebook.
- بعد ذلك، تأكد من إدراج URI لإعادة توجيه OAuth (على سبيل المثال،
my-app-12345.firebaseapp.com/__/auth/handler
) كأحد معرفات URI لإعادة توجيه OAuth في صفحة إعدادات تطبيق Facebook على موقع Facebook for Developers في المنتج . الإعدادات> تكوين تسجيل الدخول إلى Facebook .
تعامل مع تدفق تسجيل الدخول باستخدام Firebase SDK
إذا كنت تقوم بإنشاء تطبيق ويب، فإن أسهل طريقة لمصادقة المستخدمين باستخدام Firebase باستخدام حسابات Facebook الخاصة بهم هي التعامل مع تدفق تسجيل الدخول باستخدام Firebase JavaScript SDK. (إذا كنت تريد مصادقة مستخدم في Node.js أو أي بيئة أخرى غير المتصفح، فيجب عليك التعامل مع تدفق تسجيل الدخول يدويًا.)
للتعامل مع تدفق تسجيل الدخول باستخدام Firebase JavaScript SDK، اتبع الخطوات التالية:
- قم بإنشاء مثيل لكائن موفر Facebook:
Web modular API
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
Web namespaced API
var provider = new firebase.auth.FacebookAuthProvider();
- اختياري : حدد نطاقات OAuth 2.0 الإضافية التي تريد طلبها من موفر المصادقة. لإضافة نطاق، اتصل بـ
addScope
. على سبيل المثال:راجع وثائق موفر المصادقة .Web modular API
provider.addScope('user_birthday');
Web namespaced API
provider.addScope('user_birthday');
- اختياري : لتوطين تدفق OAuth الخاص بالموفر إلى اللغة المفضلة للمستخدم دون تمرير معلمات OAuth المخصصة ذات الصلة بشكل صريح، قم بتحديث رمز اللغة في مثيل Auth قبل بدء تدفق OAuth. على سبيل المثال:
Web modular API
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
Web namespaced API
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- اختياري : حدد معلمات موفر OAuth المخصصة الإضافية التي تريد إرسالها مع طلب OAuth. لإضافة معلمة مخصصة، قم باستدعاء
setCustomParameters
على الموفر الذي تمت تهيئته باستخدام كائن يحتوي على المفتاح كما هو محدد بواسطة وثائق موفر OAuth والقيمة المقابلة. على سبيل المثال:لا يُسمح بمعلمات OAuth المطلوبة المحجوزة وسيتم تجاهلها. راجع مرجع موفر المصادقة لمزيد من التفاصيل.Web modular API
provider.setCustomParameters({ 'display': 'popup' });
Web namespaced API
provider.setCustomParameters({ 'display': 'popup' });
- قم بالمصادقة مع Firebase باستخدام كائن موفر Facebook. يمكنك مطالبة المستخدمين بتسجيل الدخول باستخدام حساباتهم على Facebook إما عن طريق فتح نافذة منبثقة أو عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول. طريقة إعادة التوجيه مفضلة على الأجهزة المحمولة.
- لتسجيل الدخول باستخدام نافذة منبثقة، اتصل بـ
signInWithPopup
:لاحظ أيضًا أنه يمكنك استرداد رمز OAuth المميز لموفر Facebook والذي يمكن استخدامه لجلب بيانات إضافية باستخدام واجهات برمجة تطبيقات Facebook.Web modular API
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; // 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 = FacebookAuthProvider.credentialFromError(error); // ... });
Web namespaced API
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... // 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; // ... });
وهذا أيضًا هو المكان الذي يمكنك فيه اكتشاف الأخطاء ومعالجتها. للحصول على قائمة برموز الأخطاء، قم بإلقاء نظرة على Auth Reference Docs .
- لتسجيل الدخول عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول، اتصل بـ
signInWithRedirect
: اتبع أفضل الممارسات عند استخدام `signInWithRedirect`.بعد ذلك، يمكنك أيضًا استرداد رمز OAuth المميز لموفر Facebook عن طريق الاتصال بـWeb modular API
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web namespaced API
firebase.auth().signInWithRedirect(provider);
getRedirectResult
عند تحميل صفحتك:وهذا أيضًا هو المكان الذي يمكنك فيه اكتشاف الأخطاء ومعالجتها. للحصول على قائمة برموز الأخطاء، قم بإلقاء نظرة على Auth Reference Docs .Web modular API
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; // 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; // AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
Web namespaced API
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; // 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 في ملحق Chrome
إذا كنت تقوم بإنشاء تطبيق ملحق لمتصفح Chrome، فيجب عليك إضافة معرف ملحق Chrome الخاص بك:
- افتح مشروعك في وحدة تحكم Firebase .
- في قسم المصادقة ، افتح صفحة طريقة تسجيل الدخول .
- أضف عنوان 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
.
الخطوات التالية
بعد قيام المستخدم بتسجيل الدخول لأول مرة، يتم إنشاء حساب مستخدم جديد وربطه ببيانات الاعتماد - أي اسم المستخدم وكلمة المرور أو رقم الهاتف أو معلومات موفر المصادقة - التي قام المستخدم بتسجيل الدخول بها. يتم تخزين هذا الحساب الجديد كجزء من مشروع 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. });
Web namespaced API
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });