Вход через Facebook

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

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

Прежде чем начать

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

Пример простого автоматического входа

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

Разрешение public_profile , которое позволяет получить общедоступную информацию (например, имя и фото профиля), и разрешение email не требуют проверки приложения и предоставляются автоматически всем приложениям, использующим вход через Facebook. 

<!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 для входа через Facebook.

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

Укажите, что используете SDK для JavaScript для входа, активировав переключатель Вход с помощью SDK для JavaScript. Затем в списке Разрешенные домены для SDK для JavaScript укажите домен страницы, на которой установлен SDK. Так маркеры доступа будут возвращаться только обратным вызовам из авторизованных доменов. Для аутентификации с помощью SDK для JavaScript поддерживаются только страницы, адрес которых начинается с https.

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:

Тип StatusОписание

connected

Человек вошел в Facebook и на вашу веб-страницу.

not_authorized

Человек вошел в Facebook, но не вошел на веб-страницу.

unknown

Человек не вошел в Facebook, поэтому нельзя узнать, вошел ли он на веб-страницу. Другая возможная причина такого статуса: вызов FB.logout() уже был сделан раньше, поэтому подключиться к Facebook не удается.

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

Параметры authResponseЗначение

accessToken

Маркер доступа для пользователя веб-страницы.

expiresIn

Метка времени (в формате UNIX) для истечения срока действия маркера. Когда срок действия маркера истечет, пользователю придется заново войти.

reauthorize_required_in

Время до окончания сессии входа в секундах. После этого пользователю потребуется заново войти.

signedRequest

Параметр подписи, содержащий сведения о пользователе страницы.

userID

ID пользователя страницы.

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

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

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

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

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

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

Конфигуратор плагина

Width
Размер кнопки
Текст кнопки
Контур макета кнопки
[?]
Получить код

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

Чтобы использовать собственную кнопку, вызывайте диалог входа через FB.login().

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

Запрос дополнительных разрешений

Когда пользователь нажимает HTML-кнопку, появляется всплывающее окно диалога входа. Диалог позволяет запросить разрешение на доступ к данным пользователя. Параметр scope можно передать вместе с вызовом функции FB.login(). Этот необязательный параметр содержит разделенный запятыми список разрешений, которые пользователь должен подтвердить, чтобы предоставить странице доступ к своим данным. Чтобы вход через Facebook был доступен внешним пользователям, необходима расширенная версия разрешения 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. Человек входит в Facebook, а затем — на вашу страницу. После выхода из приложения он остается в Facebook.
  2. Человек входит на страницу и в Facebook, используя процесс входа, реализованный в вашем приложении. При выходе из приложения он также выходит из Facebook.
  3. Человек входит на другую (не вашу) страницу и в Facebook, используя процесс входа, реализованный на другой странице, а затем входит на вашу страницу. При выходе с любой из страниц он также выходит из Facebook.

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

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

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

Дополнительные ресурсы