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

لماذا يجب إضافة تسجيل الاشتراك والدخول عبر فيسبوك إلى موقعك

هناك أكثر من مليون موقع أو تطبيق يستخدم “تسجيل الدخول باستخدام Facebook” هل تعرف لماذا يستخدمون تسجيل الدخول إلى Facebook وكيف يكون مفيدًا في زيادة عدد المستخدمين لديك؟

وفقًا لاستطلاعات متعددة ، هناك أكثر من 3 مليارات مستخدم في جميع أنحاء العالم يستخدمون وسائل التواصل الاجتماعي وحوالي 50 ٪ من سكان العالم.

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

يسمح تسجيل الدخول الاجتماعي للعملاء بإحضار هوياتهم الاجتماعية الحالية واستخدامها للتسجيل وتسجيل الدخول دون إنشاء ملف تعريف جديد بشكل صريح.

Facebook هو الموقع الأكثر تفضيلاً مقارنةً بموفري وسائل التواصل الاجتماعي الآخرين وعدد مستخدمي Facebook النشطين الذين يتزايدون يومًا بعد يوم.

سأشرح في هذا المقال كيف يمكنك تنفيذ “تسجيل الدخول باستخدام Facebook” على موقع الويب الخاص بك أو تطبيق الهاتف المحمول الخاص بك بطريقة سهلة للغاية.

يعمل Facebook على بروتوكول OAuth 2.0 ومعظم مقدمي الخدمات الاجتماعية مثل Facebook و Google و Microsoft و Linkedin يدعمون OAuth 2.0.

أنشاء تطبيق فيسبوك لتسجيل الدخول

قبل البدء في بناء تسجيل الدخول باستخدام فيسبوك، يجب ان تقوم بإنشاء تطبيق فيسبوك على موقع مطوري فيسبوك, أولا انتقل على الرابط: https://developers.facebook.com/ قم بتسجيل الدخول باستخدام حسابك الخاص على فيسبوك وليس باستخدم حساب أعمال، فيسبوك لا يسمح بإنشاء التطبيقات باستخدام حساب الأعمال:

انتقل بعدها إلى تاب تطبيقاتي My apps

اضغط على إضافة تطبيق تجديد

قم بملء البيانات مثل اسم التطبيق والبريد الالكتروني الخاص بالموقع (اتصل بنا) ثم اضغط على انشاء معرف تطبيق Create App ID

بعد أن يتم إنشاء التطبيق الخاص بك, إضغط على ضبط التطبيق Setup

ثم قم بتفعيل Client OAuth login و Web OAuth ثم قم بأدخال رابط موقعك الذي ستحول المستخدم إليه بعد القيام بتسجيل الدخول ثم اضغط حفظ

انقر فوق أساسي ضمن الإعدادات في الشريط الجانبي. ضمن التطبيق ، تتضمن المجالات عنوان URL لموقع الويب الخاص بك. أدخل جميع التفاصيل المطلوبة. قم بتغيير حالة التطبيق من التطوير إلى Live من الزاوية العلوية اليمنى. انقر على زر حفظ التغييرات.

الآن تطبيق Facebook الخاص بك جاهز. يمكنك البدء في تنفيذ تسجيل الدخول إلى Facebook

اختيار البيانات لتسجيل الدخول عبر فيسبوك

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

إرسال تطبيق فيسبوك للمعاينة من قبل فيسبوك

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

عملية مراجعة تطبيق Facebook بسيطة إلى حد كبير ، يرجى الرجوع إلى هذا المستند هنا للحصول على عملية مراجعة تطبيق Facebook.

أضف تسجيل الدخول باستخدام زر Facebook على موقعك

يعد تطبيق تسجيل الدخول إلى Facebook إلى صفحة ويب أمرًا سهلاً للغاية باستخدام Facebook’s JavaScript SDK. يوفر Facebook وثائق وإرشادات مع أمثلة التعليمات البرمجية لتنفيذ نظام تسجيل الدخول.

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

ضع هذا الرمز في قسم النص الأساسي لشفرة HTML الخاصة بك.

<!-- The JS SDK Login Button -->

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

<!-- The JS SDK Login Button -->
<div id="status">
</div>

أنت الآن بحاجة إلى تضمين قسم JavaScript. سيتم تحميل Facebook SDK JavaScript بشكل غير متزامن.

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

بعد ذلك ، سنضيف وظيفة Facebook init. نحتاج فقط إلى استبدال العنصر النائب لمعرّف التطبيق بمعرّف التطبيق الذي أنشأته في البداية. ستجد العنصر النائب في هذا السطر appId: “{your-app-id}”.

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

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

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

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

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

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

     function getUserProfile() {                      // Get User Profile using Facebook Graph API after login.
    console.log('Welcome!  Fetching your profile information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

الآن إذا قمت بحفظ هذه الصفحة باسم login.html وفتحها في متصفح ، يجب أن ترى زر تسجيل الدخول إلى Facebook. يمكنك أيضًا تنزيل هذا الرمز من GitHub Repo وقد قمت بتخصيصه لجعله أقصر قليلاً للحصول على شرح.

الآن فقط قم بتسجيل الدخول وتحقق من إخراج وحدة التحكم. سترى الآن بعض المعلومات الأساسية بما في ذلك المعرف والبريد الإلكتروني والاسم الأول والجنس والاسم الأخير.

هذا كل ما في الامر. بالطبع ، هناك العديد من الخيارات والميزات المتاحة في وثائق Facebook لاكتشافها.