Авторизация на сайте с использованием аккаунта Facebook

Создано: Март 6, 2014

В предыдущей статье мы описали как осуществить авторизацию на сайте с использованием аккаунта 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, отображенные выше, могут быть использованы для регистрации пользователя, либо для отображения информации о пользователе на Вашем сайте. Удачи.