يمكنك السماح للمستخدمين بالمصادقة مع Firebase باستخدام حساباتهم على Facebook من خلال دمج تسجيل الدخول إلى Facebook في تطبيقك. ويمكنك دمج تسجيل الدخول إلى Facebook إما عن طريق استخدام حزمة SDK لمنصّة Firebase لتنفيذ خطوات تسجيل الدخول، أو من خلال تنفيذ خطوات تسجيل الدخول إلى Facebook يدويًا وتمرير رمز الدخول الناتج إلى Firebase.
قبل البدء
- أضِف Firebase إلى مشروع JavaScript.
- في موقع Facebook for Developers الإلكتروني، احصل على معرّف التطبيق وسر التطبيق لتطبيقك.
- فعِّل تسجيل الدخول إلى Facebook:
- في وحدة تحكُّم Firebase، افتح قسم المصادقة.
- في علامة التبويب طريقة تسجيل الدخول، فعِّل طريقة تسجيل الدخول إلى Facebook وحدِّد معرّف التطبيق وسر التطبيق الذي حصلت عليه من Facebook.
- بعد ذلك، تأكَّد من إدراج معرّف الموارد المنتظم (URI) لإعادة توجيه OAuth (مثل
my-app-12345.firebaseapp.com/__/auth/handler
) كأحد معرّفات الموارد المنتظمة (URI) لإعادة توجيه OAuth في صفحة إعدادات تطبيق Facebook على موقع Facebook for Developers ضمن الإعدادات إعدادات المنتج > تسجيل الدخول إلى Facebook.
معالجة عملية تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase
إذا كنت تنشئ تطبيق ويب، فإن أسهل طريقة لمصادقة المستخدمين من خلال Firebase باستخدام حساباتهم على Facebook هي التعامل مع تدفق تسجيل الدخول باستخدام حزمة SDK لـ Firebase JavaScript. (إذا كنت تريد مصادقة مستخدم في Node.js أو بيئة أخرى لا تستخدم المتصفح، يجب معالجة عملية تسجيل الدخول يدويًا.)
للتعامل مع عملية تسجيل الدخول باستخدام حزمة SDK لـ Firebase JavaScript، اتّبِع الخطوات التالية:
- أنشئ مثيلاً لكائن موفِّر Facebook:
Web
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
Web
var provider = new firebase.auth.FacebookAuthProvider();
- اختياري: حدِّد نطاقات OAuth 2.0 الإضافية التي تريد أن تطلبها من موفّر المصادقة. لإضافة نطاق، يمكنك طلب
addScope
. على سبيل المثال:Web
provider.addScope('user_birthday');
Web
provider.addScope('user_birthday');
- اختياري: لأقلمة مسار OAuth لدى الموفّر إلى لغة المستخدم المفضّلة بدون تمرير معلَمات OAuth المخصصة ذات الصلة بشكل صريح، يمكنك تعديل رمز اللغة في مثيل المصادقة قبل بدء مسار OAuth. على سبيل المثال:
Web
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
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- اختياري: حدِّد المزيد من مَعلمات موفّر OAuth المخصّصة التي تريد إرسالها مع طلب OAuth. لإضافة مَعلمة مخصّصة، يمكنك استدعاء
setCustomParameters
في موفّر الخدمة الذي تم إعداده باستخدام عنصر يحتوي على المفتاح كما هو محدّد في مستندات موفّر OAuth والقيمة المقابلة. على سبيل المثال:Web
provider.setCustomParameters({ 'display': 'popup' });
Web
provider.setCustomParameters({ 'display': 'popup' });
- يمكنك المصادقة مع Firebase باستخدام كائن موفّر Facebook. يمكنك أن تطلب من المستخدمين تسجيل الدخول باستخدام حساباتهم على Facebook إما من خلال فتح نافذة منبثقة أو إعادة توجيههم إلى صفحة تسجيل الدخول. وننصح باستخدام طريقة إعادة التوجيه على الأجهزة الجوّالة.
- لتسجيل الدخول عبر نافذة منبثقة، اتصل بالرقم
signInWithPopup
:Web
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
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; // ... });
ويمكنك هنا أيضًا رصد الأخطاء ومعالجتها. للحصول على قائمة برموز الأخطاء، يمكنك الاطّلاع على المستندات المرجعية للمصادقة.
- لتسجيل الدخول من خلال إعادة التوجيه إلى صفحة تسجيل الدخول، عليك طلب رقم
signInWithRedirect
: اتّبِع أفضل الممارسات عند استخدام "signInWithRedirect".Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
getRedirectResult
عند تحميل الصفحة:Web
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
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، يمكنك الاطّلاع على دليل المستندات خارج الشاشة.
الخطوات اللاحقة
بعد تسجيل دخول المستخدم للمرة الأولى، يتم إنشاء حساب مستخدم جديد وربطه ببيانات الاعتماد، أي اسم المستخدم وكلمة المرور، أو رقم الهاتف، أو معلومات مقدم خدمة المصادقة. يتم تخزين هذا الحساب الجديد كجزء من مشروعك في Firebase، ويمكن استخدامه لتحديد مستخدم على مستوى كل تطبيق في مشروعك، بغض النظر عن كيفية تسجيل المستخدم للدخول.
-
الطريقة التي ننصح بها في تطبيقاتك لمعرفة حالة المصادقة للمستخدم هي ضبط مراقب على كائن
Auth
. يمكنك بعد ذلك الحصول على معلومات الملف الشخصي الأساسية للمستخدم من كائنUser
. يُرجى الاطّلاع على إدارة المستخدمين. في قاعدة بيانات Firebase في الوقت الفعلي وقواعد أمان Cloud Storage، يمكنك الحصول على رقم تعريف المستخدم الفريد للمستخدم الذي سجّل الدخول من المتغيّر
auth
واستخدامه للتحكّم في البيانات التي يمكن للمستخدم الوصول إليها.
يمكنك السماح للمستخدمين بتسجيل الدخول إلى تطبيقك باستخدام عدة موفِّري مصادقة من خلال ربط بيانات اعتماد موفِّر المصادقة بحساب مستخدم حالي.
لتسجيل خروج مستخدم، يمكنك الاتصال بالرقم
signOut
:
Web
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });