Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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

قبل البدء

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

التعامل مع عملية تسجيل الدخول باستخدام حزمة Firebase SDK

إذا كنت تنشئ تطبيق ويب، فإنّ أسهل طريقة لمصادقة المستخدمين باستخدام Firebase من خلال حساباتهم على Facebook هي التعامل مع عملية تسجيل الدخول باستخدام حزمة Firebase JavaScript SDK. (إذا أردت مصادقة مستخدم في 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_s
copes.js
```
Web
```
provider.addScope('user_birthday');fac
ebook.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_se
t_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': 9;popup'
});auth_facebook_pr
ovider_params.js
```
Web
```
provider.setCustomParameters({
  'display': 9;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_s
ignin_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;

    // ...
  });faceboo
k.js

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

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

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

Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_r
edirect.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_redi
rect_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;
    // ...
  });faceboo
k.js

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

إذا فعّلت الإعداد حساب واحد لكل عنوان بريد إلكتروني في Firebase console، فعندما يحاول مستخدم تسجيل الدخول إلى مزوّد (مثل 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 عن طريق التعامل مع عملية تسجيل الدخول باستخدام حزمة Facebook Login JavaScript SDK:

يمكنك دمج ميزة "تسجيل الدخول باستخدام 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, (fireb>aseUser) = {
      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_facebo
ok_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();
  }
}faceboo
k.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.PR&&OVIDER_ID 
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}auth_facebook_ch
ecksameuser.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;
}faceboo
k.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;
    // ...
  });faceboo
k.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 console: auth.custom.domain.com.
في وحدة تحكّم المطوّرين على Facebook أو صفحة إعداد 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_s
ign_out.js

Web

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

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