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

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

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

قبل البدء

أضِف Firebase إلى مشروع JavaScript.
على موقع Facebook للمطوّرين، احصل على معرّف التطبيق وسر التطبيق لتطبيقك.
تفعيل تسجيل الدخول باستخدام Facebook:
1. في وحدة تحكّم Firebase، افتح قسم المصادقة.
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 أو بيئة أخرى غير المتصفّح، عليك التعامل مع عملية تسجيل الدخول يدويًا).

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

أنشئ مثيلاً لعنصر موفّر 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 المخصّصة ذات الصلة بشكل صريح، عدِّل رمز اللغة في مثيل 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

ملاحظة: يفرض Facebook استخدام بروتوكول HTTPS ولا يسمح بتسجيل الدخول باستخدام مضيفين غير آمنين. عند استخدام Facebook في وضع التطوير مع مصدر http://localhost، عليك التأكّد من تفعيل وضع التطوير لتطبيق Facebook هذا. بالإضافة إلى ذلك، لن يُسمح بتسجيل الدخول إلا باستخدام حسابات اختبار على Facebook.

التعامل مع أخطاء 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 Login 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"، أضِف زرًا لهذه الميزة على صفحات الويب:
```
<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

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

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

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

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 شهادة SSL لنطاقك المخصّص.
أضِف نطاقك المخصّص إلى قائمة النطاقات المسموح بها في وحدة تحكّم Firebase: auth.custom.domain.com.
في صفحة إعدادات OAuth أو وحدة تحكّم المطوّرين على Facebook، أضِف عنوان 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 تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

قبل البدء

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

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

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

وضع النافذة المنبثقة

وضع إعادة التوجيه

إجراء متقدّم: التعامل مع عملية تسجيل الدخول يدويًا

Web

Web

Web

Web

إجراء متقدّم: المصادقة باستخدام Firebase في Node.js

Web

Web

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

تخصيص نطاق إعادة التوجيه لتسجيل الدخول باستخدام Facebook

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

Web

Web

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