В предыдущей статье мы описали как осуществить авторизацию на сайте с использованием аккаунта Google.
Как вы все знаете, Facebook также популярен, как и Google, поэтому авторизация через Facebook тоже является очень важной составляющей продвинутого веб-сайта.
Ниже приводится подробное описание всей процедуры, начиная с создания приложения Facebook и заканчивая получением полной информации о вошедшем в систему пользователе.
Начнем с создания приложения для Вашего сайта.
Примечание: Вы должны войти в свою учетную запись Facebook, прежде чем двигаться дальше.
Переходим на https://developers.facebook.com/
Для создания приложения воспользуемся меню Приложения -> Create a New App на открывшейся странице
Появится всплывающее окно
Заполните все поля и нажмите кнопку Создать приложение
После этого появится панель приложения. Приложение имеет свой идентификатор.
Следующим шагом будет добавление домена или платформы к приложению. И так перейти на вкладку Настройки.
Нажмите на Добавить платформу и появится следующее всплывающее окно.
Нажмите на Веб-сайт и добавьте ссылку.
После завершения Вы увидите следующую страницу
На этом этапе процесс создания приложения завершен.
Теперь второй этап - авторизация через Facebook с помощью JavaScript.
Создайте страницу и добавьте в нее следующий код, заменив переменную APPID
<html> <head></head> <body> Тестирование авторизации с помощью Facebook <hr /> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : '745334898818604', // Замените идентификатор приложения на свой status : true, cookie : true, xfbml : true }); FB.Event.subscribe('auth.authResponseChange', function(response) { if (response.status === 'connected') { testAPI(); } else if (response.status === 'not_authorized') { FB.login(); } else { FB.login(); } }); }; (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref); }(document)); function testAPI() { console.log('Welcome! Fetching your information.... '); FB.api('/me', function(response) { document.getElementById("user_data").innerHTML=JSON.stringify(response, undefined, "\t"); }); } </script> <fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button> <div id='user_data'> </div> </body> </html>
На выходе получаем следующее
Данные в формате JSON, отображенные выше, могут быть использованы для регистрации пользователя, либо для отображения информации о пользователе на Вашем сайте. Удачи.