Firebase is back at Google I/O on May 20-21! Register now.

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

المصادقة باستخدام تسجيل الدخول إلى Facebook باستخدام JavaScript
تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

قبل البدء

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

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

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

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

أنشئ مثيلًا لعنصر مقدّم خدمة Facebook:

Web

import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();auth_facebook_provider_create.js

Web

var provider = new firebase.auth.FacebookAuthProvider();facebook.js

اختياري: حدِّد نطاقات OAuth 2.0 الإضافية التي تريد طلبها من موفِّر المصادقة. لإضافة نطاق، اتصل بالرقم addScope. على سبيل المثال:
Web
```
provider.addScope('user_birthday');auth_facebook_provider_scopes.js
```
Web
```
provider.addScope('user_birthday');facebook.js
```
اطّلِع على مستندات مقدّم المصادقة.

اختياري: لتكييف مسار OAuth الخاص بالموفّر لتتوافق مع اللغة المفضّلة لدى المستخدم بدون ضبط مَعلمات OAuth المخصّصة ذات الصلة صراحةً، عدِّل رمز language في مثيل Auth قبل بدء مسار 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();auth_set_language_code.js

Web

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js

اختياري: حدِّد مَعلمات مخصّصة إضافية لمزوّد OAuth تريد إرسالها مع طلب OAuth. لإضافة مَعلمة مخصّصة، استخدِم الدالة setCustomParameters في مقدّم الخدمة الذي تمّ إعداده مع عنصر يحتوي على المفتاح كما هو محدّد في مستندات مقدّم خدمة OAuth والقيمة المقابلة. على سبيل المثال:
Web
```
provider.setCustomParameters({
  'display': 'popup'
});auth_facebook_provider_params.js
```
Web
```
provider.setCustomParameters({
  'display': 'popup'
});facebook.js
```
لا يُسمح باستخدام مَعلمات OAuth المطلوبة المحجوزة وسيتم تجاهلها. اطّلِع على مرجع مزوّد المصادقة للحصول على مزيد من التفاصيل.

يمكنك المصادقة باستخدام 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);

    // ...
  });auth_facebook_signin_popup.js

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;

    // ...
  });facebook.js

يُرجى العلم أيضًا أنّه يمكنك استرداد رمز OAuth لموفّر Facebook الذي يمكن استخدامه لجلب بيانات إضافية باستخدام واجهات برمجة تطبيقات Facebook.

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

لتسجيل الدخول من خلال إعادة التوجيه إلى صفحة تسجيل الدخول، يمكنك استدعاء signInWithRedirect: اتّبِع أفضل الممارسات عند استخدام signInWithRedirect.

Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_redirect.js

Web

firebase.auth().signInWithRedirect(provider);index.js

بعد ذلك، يمكنك أيضًا استرداد رمز مفتاح OAuth لموفّر Facebook من خلال استدعاء 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);
    // ...
  });auth_facebook_signin_redirect_result.js

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

التعامل مع أخطاء account-exists-with-different-credential

إذا فعّلت الإعداد حساب واحد لكل عنوان بريد إلكتروني في وحدة تحكّم Firebase، عندما يحاول مستخدم تسجيل الدخول إلى مقدّم خدمة (مثل Facebook) باستخدام عنوان بريد إلكتروني سبق أن تم استخدامه لمقدّم خدمة آخر لمستخدم Firebase (مثل Google)، يتم طرح الخطأ auth/account-exists-with-different-credential مع عنصر AuthCredential (رمز مميّز لوصول Facebook). لإكمال عملية تسجيل الدخول إلى المزوّد المقصود، على المستخدم تسجيل الدخول أولاً إلى المزوّد الحالي (Google) ثم الربط بحساب AuthCredential السابق (رمز الوصول إلى Facebook).

إذا كنت تستخدم signInWithPopup، يمكنك معالجة أخطاء auth/account-exists-with-different-credential باستخدام رمز مثل المثال التالي:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  FacebookAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Facebook.
  let result = await signInWithPopup(getAuth(), new FacebookAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Facebook 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 Facebook 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 باستخدام حساب على Facebook من خلال معالجة مسار تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) لتسجيل الدخول على Facebook باستخدام JavaScript:

يمكنك دمج ميزة "تسجيل الدخول باستخدام حساب Facebook" في تطبيقك باتّباع تعليمات مستندات المطوّرين. احرص على ضبط ميزة "تسجيل الدخول باستخدام حساب Facebook" باستخدام معرّف تطبيق Facebook:

<script src="//connect.facebook.net/en_US/sdk.js"></script>
<script>
  FB.init({
    /**********************************************************************
     * TODO(Developer): Change the value below with your Facebook app ID. *
     **********************************************************************/
    appId: '<YOUR_FACEBOOK_APP_ID>',
    status: true,
    xfbml: true,
    version: 'v2.6',
  });
</script>

لقد أعددنا أيضًا مستمعًا لحالة مصادقة Facebook:
```
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
```
بعد دمج ميزة "تسجيل الدخول باستخدام حساب Facebook"، أضِف زرّ "تسجيل الدخول باستخدام حساب Facebook" على صفحات الويب:
```
<fb:login-button
  data-auto-logout-link="true"
  scope="public_profile,email"
  size="large"
></fb:login-button>
```

في ردّ طلب حالة المصادقة على Facebook، استبدِل رمز المصادقة من استجابة المصادقة على Facebook ببيانات اعتماد Firebase وسجِّل الدخول إلى Firebase:

Web

import { getAuth, onAuthStateChanged, signInWithCredential, signOut, FacebookAuthProvider } from "firebase/auth";
const auth = getAuth();

function checkLoginState(response) {
  if (response.authResponse) {
    // User is signed-in Facebook.
    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
      unsubscribe();
      // Check if we are already signed-in Firebase with the correct user.
      if (!isUserEqual(response.authResponse, firebaseUser)) {
        // Build Firebase credential with the Facebook auth token.
        const credential = FacebookAuthProvider.credential(
            response.authResponse.accessToken);

        // Sign in with the credential from the Facebook user.
        signInWithCredential(auth, credential)
          .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);
            // ...
          });
      } else {
        // User is already signed-in Firebase with the correct user.
      }
    });
  } else {
    // User is signed-out of Facebook.
    signOut(auth);
  }
}auth_facebook_callback.js

Web

function checkLoginState(response) {
  if (response.authResponse) {
    // User is signed-in Facebook.
    var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => {
      unsubscribe();
      // Check if we are already signed-in Firebase with the correct user.
      if (!isUserEqual(response.authResponse, firebaseUser)) {
        // Build Firebase credential with the Facebook auth token.
        var credential = firebase.auth.FacebookAuthProvider.credential(
            response.authResponse.accessToken);

        // Sign in with the credential from the Facebook user.
        firebase.auth().signInWithCredential(credential)
          .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;
            // ...
          });
      } else {
        // User is already signed-in Firebase with the correct user.
      }
    });
  } else {
    // User is signed-out of Facebook.
    firebase.auth().signOut();
  }
}facebook.js

عليك أيضًا التأكّد من أنّ مستخدم Facebook لم يسجِّل الدخول إلى Firebase من قبل لتجنُّب إعادة المصادقة غير الضرورية:

Web

import { FacebookAuthProvider } from "firebase/auth";

function isUserEqual(facebookAuthResponse, firebaseUser) {
  if (firebaseUser) {
    const providerData = firebaseUser.providerData;
    for (let i = 0; i < providerData.length; i++) {
      if (providerData[i].providerId === FacebookAuthProvider.PROVIDER_ID &&
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}auth_facebook_checksameuser.js

Web

function isUserEqual(facebookAuthResponse, firebaseUser) {
  if (firebaseUser) {
    var providerData = firebaseUser.providerData;
    for (var i = 0; i < providerData.length; i++) {
      if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID &&
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}facebook.js

المستوى المتقدّم: المصادقة باستخدام Firebase في Node.js

لمصادقة تطبيق Node.js باستخدام Firebase:

سجِّل دخول المستخدم باستخدام حسابه على Facebook واحصل على رمز Facebook مميّز للوصول الخاص بالمستخدم. على سبيل المثال، سجِّل دخول المستخدم في متصفّح كما هو موضّح في القسم معالجة عملية تسجيل الدخول يدويًا، ولكن أرسِل رمز الوصول إلى تطبيق Node.js بدلاً من استخدامه في تطبيق العميل.

بعد الحصول على رمز مفتاح الوصول الخاص بالمستخدم على Facebook، استخدِمه لإنشاء عنصر بيانات اعتماد، ثم سجِّل دخول المستخدم باستخدام بيانات الاعتماد:

Web

import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";

// Sign in with the credential from the Facebook user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    const credential = FacebookAuthProvider.credentialFromResult(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);
    // ...
  });auth_facebook_signin_credential.js

Web

// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)
  .then((result) => {
    // Signed in       
    var credential = result.credential;
    // ...
  })
  .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;
    // ...
  });facebook.js

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

إذا كنت بصدد إنشاء تطبيق إضافة Chrome، يمكنك الاطّلاع على دليل "المستندات التي لا تظهر على الشاشة".

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

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

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

اتّبِع الخطوات من 1 إلى 3 في مقالة إعداد نطاقك لخدمة Hosting. عند إثبات ملكية نطاقك، يوفّر Hosting شهادة طبقة المقابس الآمنة لنطاقك المخصّص.
أضِف نطاقك المخصّص إلى قائمة النطاقات المعتمَدة في وحدة تحكّم Firebase: auth.custom.domain.com.
في Facebook developer console أو صفحة إعداد OAuth، أضِف عنوان URL لصفحة إعادة التوجيه إلى القائمة المسموح بها، والتي يمكن الوصول إليها على نطاقك المخصّص: https://auth.custom.domain.com/__/auth/handler.

عند بدء مكتبة 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:

Web

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

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

Web

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

المصادقة باستخدام تسجيل الدخول إلى Facebook باستخدام JavaScript تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.