‏تسجيل دخول فيسبوك‏

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

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

قبل البدء

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

مثال بسيط على تسجيل الدخول التلقائي

توضح عينة الرمز التالي كيفية إضافة مجموعة Facebook SDK للغة Javascript إلى صفحة الويب، وتهيئة مجموعة SDK وإذا قمت بتسجيل الدخول إلى فيسبوك، فسيتم عرض الاسم والبريد الإلكتروني. إذا لم تقم بتسجيل الدخول إلى فيسبوك، فسيتم عرض النافذة المنبثقة لمربع حوار تسجيل الدخول تلقائيًا.

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

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>

    <h2>Add Facebook Login to your webpage</h2>

      <!-- Set the element id for the JSON response -->
    
      <p id="profile"></p>

      <script>
  
        <!-- Add the Facebook SDK for Javascript -->
  
        (function(d, s, id){
                              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')
        );


        window.fbAsyncInit = function() {
            <!-- Initialize the SDK with your app and the Graph API version for your app -->
            FB.init({
                      appId            : '{your-facebook-app-id}',
                      xfbml            : true,
                      version          : '{the-graph-api-version-for-your-app}'
                    });
            <!-- If you are logged in, automatically get your name and email adress, your public profile information -->
            FB.login(function(response) {
                      if (response.authResponse) {
                           console.log('Welcome!  Fetching your information.... ');
                           FB.api('/me', {fields: 'name, email'}, function(response) {
                               document.getElementById("profile").innerHTML = "Good to see you, " + response.name + ". i see your email address is " + response.email
                           });
                      } else { 
                           <!-- If you are not logged in, the login dialog will open for you to login asking for permission to get your public profile and email -->
                           console.log('User cancelled login or did not fully authorize.'); }
            });
        };

      </script>

  </body>
</html>

1. تمكين SDK للغة JavaScript لتسجيل دخول فيسبوك

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

يجب الإشارة إلى أنك تستخدم SDK للغة JavaScript لتسجيل الدخول عن طريق تعيين زِر تسجيل الدخول باستخدام SDK للغة JavaScript لوضع "نعم"، وأدخِل مجال صفحتك التي تستضيف SDK في قائمةالنطاقات المسموح بها لـSDK للغة JavaScript. يضمن ذلك إرجاع رموز الوصول إلى عمليات معاودة الاتصال فقط من خلال النطاقات المُصرَّح بها. صفحات https فقط هي المدعومة لإجراءات المصادقة مع مجموعة SDK للغة JavaScript من فيسبوك.

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

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

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

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 أحد الخيارات التالية:

نوع Statusالوصف

connected

سجّل الشخص الدخول إلى فيسبوك وسجّل الدخول إلى صفحة الويب لديك.

not_authorized

سجّل الشخص الدخول إلى فيسبوك، ولكنه لم يسجّل الدخول إلى صفحة الويب لديك.

unknown

لم يسجّل الشخص الدخول إلى Facebook، لذلك لن تعرف إذا ما قد سجّل الدخول إلى صفحة الويب لديك أم لا. أو تم استدعاء FB.logout() من قبل، وبالتالي لا يمكنه الاتصال بحساب Facebook.

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

معلمات authResponseالقيمة

accessToken

رمز وصول الشخص الذي يستخدم صفحة الويب.

expiresIn

طابع زمني بتنسيق UNIX يوضح موعد انتهاء صلاحية الرمز المميز. وبمجرد انتهاء صلاحية الرمز المميز، سيحتاج الشخص إلى تسجيل الدخول مرة أخرى.

reauthorize_required_in

الوقت المتبقي قبل انتهاء صلاحية تسجيل الدخول بالثواني، وسيحتاج الشخص إلى تسجيل الدخول مرة أخرى.

signedRequest

معلمة موقّعة تحتوي على معلومات حول الشخص الذي يستخدم صفحة الويب لديك.

userID

معرف الشخص الذي يستخدم صفحة الويب لديك.

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

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

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

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

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

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

أداة تكوين المكون الإضافي

Width
حجم الزر
نص الزر
شكل تخطيط الزر
[?]
الحصول على الرمز

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

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

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

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

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

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

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

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() المتوفرة في مجموعة SDK للغة JavaScript بزر أو رابط.

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

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

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

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

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

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

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

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

<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>

موارد إضافية