Реализация входа через Facebook на веб-странице с помощью SDK для JavaScript

В этом документе содержатся пошаговые инструкции по реализации входа через Facebook на веб-странице с помощью Facebook SDK для Javascript.

Перед началом работы

Вам понадобятся:

• аккаунт разработчика Facebook;
• зарегистрированное приложение Facebook с заданными основными настройками;
• Facebook SDK для JavaScript.

1. Ввод URL перенаправления на панели приложений

Выберите свое приложение на панели приложений, прокрутите страницу до раздела Добавить продукт и нажмите Настроить в карточке Вход через Facebook. На панели навигации слева выберите Настройки и в разделе Клиентские настройки OAuth введите URL перенаправления в поле Действительные URI для перенаправления OAuth для получения разрешения.

2. Проверка статуса входа человека

При загрузке веб-страницы прежде всего нужно проверить, не вошел ли уже человек на нее, используя вход через Facebook. Вызов FB.getLoginStatus отправляет вызов к Facebook для получения статуса входа. Затем 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:

Если статус имеет значение connected, в ответ входят следующие параметры authResponse:

SDK для JavaScript автоматически отслеживает статус входа, поэтому не потребуется это делать вручную.

3. Вход пользователя

Если человек открыл вашу страницу, но не вошел на нее либо не вошел в Facebook, с помощью диалога "Вход" вы можете предложить оба варианта входа. Пользователю сначала будет предложено войти в Facebook, если он этого ещё не сделал, а затем — войти на страницу.

Выполнить вход можно двумя способами:

• с помощью кнопки "Вход через Facebook";
• с помощью диалога "Вход" из SDK для JavaScript.

А. Вход с помощью кнопки "Вход"

Чтобы использовать кнопку "Вход через Facebook", настройте ее с помощью конфигуратора плагина и получите код.

Б. Вход с помощью диалога "Вход" из SDK для JavaScript

Чтобы использовать собственную кнопку, откройте диалог "Вход", вызвав 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() из SDK для JavaScript.

Пример вызова

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

Примечание. Вызов этой функции может также повлечь за собой выход человека из Facebook.

Возможные сценарии

1. Человек входит в Facebook, а затем — на вашу страницу. После выхода из приложения он остается в Facebook.
2. Человек входит на страницу и в Facebook, используя процесс входа, реализованный в вашем приложении. При выходе из приложения он также выходит из Facebook.
3. Человек входит на другую (не вашу) страницу и в Facebook, используя процесс входа, реализованный на другой странице, а затем входит на вашу страницу. При выходе с любой из страниц он также выходит из Facebook.

Кроме того, выход с вашей страницы не отменяет разрешения, предоставленные ей пользователем при входе. Отмену разрешений нужно выполнить отдельно. Проектируйте страницу таким образом, чтобы вышедший пользователь при повторном входе не перенаправлялся на диалог "Вход".

Пример полного кода

Этот код загружает SDK для JavaScript в вашу HTML-страницу и инициализирует его. Замените {app-id} своим ID приложения, а {api-version} — требуемой версией API Graph. Если нет необходимости использовать более раннюю версию, укажите последнюю: 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()
• Справка по SDK для JavaScript