تسجيل دخول فيسبوك للويب باستخدام مجموعة JavaScript SDK

يستعرض هذا المستند خطوات تنفيذ تسجيل دخول فيسبوك من خلال مجموعة Facebook SDK للغة Javascript على صفحة الويب لديك.

قبل البدء

ستحتاج إلى ما يلي:

• حساب مطور فيسبوك
• تطبيق فيسبوك مُسجّل مع الإعدادات الأساسية التي تم تكوينها
• مجموعة Facebook SDK للغة Javascript

1. أدخل عنوان URL لإعادة التوجيه في لوحة معلومات التطبيق

في لوحة معلومات التطبيق، اختر تطبيقك وقم بالتمرير وصولاً إلى إضافة منتج، ثم انقر على إعداد في البطاقة تسجيل دخول فيسبوك. حدد الإعدادات في لوحة التنقل على الجانب الأيمن ضمن إعدادات OAuth للعميل، ثم أدخل عنوان URL لإعادة التوجيه في الحقل محددات URI صالحة لإعادة توجيه OAuth للحصول على عملية مصادقة ناجحة.

2. التحقق من حالة تسجيل الدخول لشخص ما

تحدد الخطوة الأولى عند تحميل صفحة الويب لديك ما إذا كان هناك شخص ما قد سجّل الدخول بالفعل إلى صفحة الويب لديك باستخدام تسجيل دخول فيسبوك. يعمل استدعاء FB.getLoginStatus على بدء استدعاء فيسبوك للحصول على حالة تسجيل الدخول. ويستدعي فيسبوك بعد ذلك وظيفة الاستدعاء مع النتائج.

عينة من الاستدعاء

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

عينة من استجابة بلغة JSON

{
    status: 'connected',
    authResponse: {
        accessToken: '{access-token}',
        expiresIn:'{unix-timestamp}',
        reauthorize_required_in:'{seconds-until-token-expires}',
        signedRequest:'{signed-parameter}',
        userID:'{user-id}'
    }
}

تحدد status حالة تسجيل دخول الشخص الذي يستخدم صفحة الويب. ويمكن أن تكون status أحد الخيارات التالية:

إذا كانت حالة التسجيل هي connected، فسيتم تضمين معلمات authResponse التالية في الاستجابة:

تكتشف مجموعة JavaScript SDK تلقائيًا حالة تسجيل الدخول، لذا لن تحتاج إلى القيام بأي إجراء لتمكين هذا السلوك.

3. تسجيل دخول الشخص

إذا فتح شخص ما صفحة الويب لديك ولم يسجّل الدخول إلى الصفحة أو إلى فيسبوك، يمكنك استخدام مربع الحوار تسجيل الدخول لمطالبته بتسجيل الدخول إلى كليهما. وإذا لم يتم تسجيل دخول هذا الشخص إلى فيسبوك، فستتم مطالبته أولاً بتسجيل الدخول ثم تسجيل الدخول إلى صفحة الويب لديك.

توجد طريقتان لتسجيل دخول شخص ما:

• الزر تسجيل دخول فيسبوك
• مربع الحوار تسجيل الدخول من مجموعة JavaScript SDK

أ. تسجيل الدخول باستخدام الزر تسجيل الدخول

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

ب. تسجيل الدخول باستخدام مربع الحوار تسجيل الدخول من مجموعة JavaScript SDK

لاستخدام الزر تسجيل الدخول الخاص بك، قم باستدعاء مربع الحوار تسجيل الدخول من خلال استدعاء FB.login().

FB.login(function(response){
  // handle the response 
});

طلب أذونات إضافية

عندما ينقر شخص ما على الزر HTML لديك، تظهر نافذة منبثقة تحتوي على مربع الحوار تسجيل الدخول. ويتيح لك مربع الحوار هذا طلب الحصول على إذن للوصول إلى بيانات أحد الأشخاص. يمكن إدخال المعلمة scope مع استدعاء الوظيفة FB.login(). وتمثل هذه المعلمة الاختيارية قائمة من الأذونات المفصولة بفواصل يجب على الشخص تأكيدها لمنح صفحة الويب لديك إمكانية الوصول إلى بياناته.

عينة الاستدعاء

يطلب هذا المثال من الشخص الذي يسجّل الدخول ما إذا كان يمكن لصفحة الويب لديك الحصول على إذن للوصول إلى ملفه الشخصي العام والبريد الإلكتروني أم لا.

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

معالجة استجابة مربع الحوار تسجيل الدخول

تقوم الاستجابة بإرجاع، سواء في حالة بالاتصال أو الإلغاء، كائن authResponse للاستدعاء المحدد عند إجراء استدعاء FB.login(). ويمكن اكتشاف هذه الاستجابة ومعالجتها ضمن FB.login().

عينة من الاستدعاء

FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your webpage and Facebook.
  } else {
    // The person is not logged into your webpage or we are unable to tell. 
  }
});

4. تسجيل خروج الشخص

يمكنك تسجيل خروج شخص ما من صفحة الويب لديك من خلال إرفاق وظيفة FB.logout() المتوفرة في مجموعة JavaScript SDK بزر أو رابط.

عينة من الاستدعاء

FB.logout(function(response) {
   // Person is now logged out
});

ملاحظة: قد يؤدي استدعاء هذه الوظيفة أيضًا إلى تسجيل خروج الشخص من فيسبوك.

سيناريوهات يجب مراعاتها

1. يسجّل شخص ما الدخول إلى فيسبوك، ثم يسجّل الدخول إلى صفحة الويب لديك. عند تسجيل الخروج من تطبيقك، يظل الشخص قيد تسجيل الدخول إلى فيسبوك.
2. يسجّل شخص ما الدخول إلى صفحة الويب لديك وإلى فيسبوك كجزء من دفق تسجيل الدخول بتطبيقك. عند تسجيل الخروج من تطبيقك، يتم تسجيل خروج الشخص أيضًا من فيسبوك.
3. يسجّل شخص ما الدخول إلى صفحة ويب أخرى وإلى فيسبوك كجزء من دفق تسجيل الدخول إلى صفحة الويب الأخرى، ثم يسجّل الدخول إلى صفحة الويب لديك. عند تسجيل الخروج من إحدى صفحات الويب، يتم تسجيل خروج الشخص من فيسبوك.

بالإضافة إلى ذلك، لا يؤدي تسجيل الخروج من صفحة الويب لديك إلى إلغاء الأذونات التي منحها الشخص لصفحة الويب لديك أثناء تسجيل الدخول. ويجب أن تتم عملية إلغاء الأذونات بشكل منفصل. أنشئ صفحة الويب لديك بحيث لا يظهر مربع الحوار تسجيل الدخول للشخص الذي سجّل الخروج عندما يقوم بتسجيل الدخول مرة أخرى.

مثال على الرمز البرمجي بالكامل

يقوم هذا الرمز البرمجي بتحميل مجموعة JavaScript SDK وتهيئتها في صفحة HTML لديك. استبدل {app-id}بمعرف التطبيق لديك واستبدل {api-version} بإصدار واجهة Graph API الذي ترغب في استخدامه. وما لم يكن لديك سبب محدد لاستخدام إصدار أقدم، فحدد أحدث إصدار: v5.0.

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };

  
  (function(d, s, id) {                      // Load the SDK asynchronously
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

 
  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

</script>


//  The JS SDK Login Button 

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

</body>
</html>

موارد إضافية

• وثائق الزر تسجيل الدخول
• مرجع FB.login()
• مرجع FB.getLoginStatus()
• مرجع مجموعة JavaScript SDK