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

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

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

قبل البدء

أضِف Firebase إلى مشروع JavaScript.
على Facebook for Developers الموقع، احصل على معرّف التطبيق وسر التطبيق لتطبيقك.
تفعيل تسجيل الدخول إلى Facebook:
1. في وحدة تحكُّم Firebase، افتح قسم المصادقة.
2. في علامة التبويب طريقة تسجيل الدخول، فعِّل تسجيل الدخول إلى Facebook وحدد رقم تعريف التطبيق وسر التطبيق الذي حصلت عليه من Facebook.
3. بعد ذلك، تأكَّد من أنّ معرّف الموارد المنتظم (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) ل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

التعامل مع أخطاء بيانات اعتماد الحساب المتوفّرة ومختلفة

في حال تفعيل الإعداد حساب واحد لكل عنوان بريد إلكتروني في وحدة تحكّم 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 الخاصة بلغة JavaScript لتسجيل الدخول إلى Facebook:

ادمج تسجيل الدخول إلى 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

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

سجِّل دخول المستخدم باستخدام حسابه على 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 أو صفحة إعداد OAuth، أضيفي إلى القائمة البيضاء عنوان URL لصفحة إعادة التوجيه، والتي يمكن الوصول إليها على نطاقك الخاص: https://auth.custom.domain.com/__/auth/handler

عند تهيئة مكتبة JavaScript، حدد نطاقك الخاص باستخدام الحقل "authDomain":

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
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

التعامل مع أخطاء بيانات اعتماد الحساب المتوفّرة ومختلفة

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

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

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

Web

Web

Web

Web

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

Web

Web

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

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

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

Web

Web