Как создать авторизацию через соцсети

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

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

Статистические исследования показывают, что 53% пользователей авторизуются через Facebook и 44,8% — через Google.

• регистрация через социальные сети актуальна в случае, если целевая аудитория ресурса молодая, поскольку в группе с возрастом старше 35 лет авторизацией через социальные сети на сайт пользуются только 30% посетителей;
  

• авторизация с помощью популярных развлекательных соцсетей — не лучший вариант для B2B-ресурсов, в этом сегменте более эффективно использовать LinkedIn либо Google+;
  
  
• не все провайдеры, обеспечивающие авторизацию, позволяют получить сайту информацию об электронном адресе пользователя. В частности, такие данные закрыты в официальных приложениях соцсетей ВКонтакте и Одноклассники;
  
  
• пользователь может удалить аккаунт в соцсети и потерять из-за этого доступ к сайту;
  
  
• при наличии большого количества вариантов авторизации пользователь может забыть, посредством какой именно соцсети он авторизовался.
  

Сервис ULogin позволяет получить универсальный код, подходящий для любого сайта, или же выбрать плагин авторизации для более чем 40 CMS:

После выбора CMS перейдем к настройке дизайна и отображения кнопок. Выберем подходящий размер, стиль и перечень необходимых соцсетей:

Затем внесем адрес ресурса и получим код авторизации, который добавим на указанные страницы сайта:

Рассмотрим работу с помощью сервиса Gigya. В сервисе доступна авторизация через ряд соцсетей, среди которых Facebook, Twitter, Google+, LinkedIn и ВКонтакте. Данный инструмент используют более 700 известных компаний благодаря тому, что вход через соцсети гибко настраивается с учетом особенностей бизнеса.

Важные персональные данные собираются с обеспечением защиты конфиденциальности. Использование сервиса увеличивает коэффициенты конверсии и вовлеченности, повышает лояльность к бренду.

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

Для написания кода нужно изучить документацию Gigya, в которой описаны функции, методы и параметры для клиентской и серверной сторон, при использовании которых будет работать авторизация:

Алгоритм работы сервиса:

Когда пользователь хочет зарегистрироваться или авторизироваться на сайте, ему предлагается пройти аутентификацию, используя либо Social Login Gigya, либо регистрационную форму сайта. Каждый из этих двух вариантов приводит к отдельному логическому потоку.

В документации Gigya приведены пошаговые инструкции для реализации этих двух логических потоков:

После завершения настройки на сайте появится интерфейс такого вида:

Авторизацию можно настроить, используя официальный виджет ВКонтакте. В нем пропишем название, внесем адрес сайта и выберем его тематику. Затем нажмем «Сохранить».

Получим код c уникальным идентификатором для добавления на сайт:

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

Настроим авторизацию на сайте в панели разработчиков Facebook. Добавим новое приложение:

Укажем название приложения, контактный e-mail и нажмем «Создать ID приложения»:

Выберем сценарий «Интеграция входа через Facebook» и нажмем «Подтвердить»:

Затем получим идентификатор и секрет приложения, нужные для добавления кода на сайт.

Далее заполним ряд полей, среди которых URL-адреса политики конфиденциальности и пользовательского соглашения, информация о сотруднике, ответственном за защиту данных. Также добавим логотип приложения, выберем тематику и укажем, для каких нужд устанавливается приложение:

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

Для получения кода перейдем в раздел «Начало работы» приложения. Выберем платформу «Веб»:

Далее внесем адрес сайта и нажмем «Продолжить»:

Затем следует инструкция по настройке Fasebook SDK:

После этого ознакомимся с кодом проверки статуса входа пользователя:

При необходимости можно скопировать фрагменты кода. Нажав далее, получим инструкцию по добавлению кнопки авторизации на сайт:

На этом настройка добавления функции авторизации с помощью входа через Facebook завершена.

Нажмем «Создать проект» в панели разработчиков Google:

Перейдем в подраздел «Окно запроса доступа OAuth», размещенный в разделе «Учетные данные»:

Добавим следующие данные:

• название приложения;
• логотип приложения;
• электронный адрес службы техподдержки;
  
• область действия приложения — те конфиденциальные данные пользователя, которые можно получить;
  
• ссылки на главную страницу приложения, политику конфиденциальности и условия использования.
  

После заполнения формы отправим ее на проверку:

Данная проверка занимает несколько дней.Она необходима, поскольку приложение получает доступ к конфиденциальным данным пользователей. Если сохранить настройки без проверки, доступ к данным можно получить не более ста раз и при этом пользователи будут видеть уведомление, что Google не осуществил проверку приложения.

Затем настроим учетные данные:

Выберем «Создание идентификатора клиента OAuth». Установим тип приложения — Веб. Заполним название, разрешенные источники JavaScript и перенаправления:

В результате получим идентификатор и секрет клиента, которые будут использоваться в коде авторизации на сайте:

Если на сайте установлена одна из популярных CMS, существуют удобные решения для авторизации через соцсети, не требующие знания программирования. Рассмотрим плагины для WordPress, OpenCart, Joomla и Drupal.

В WordPress авторизация через соц сети настраивается с помощью специальных плагинов. Мы рассмотрим процесс на примере Super Socializer, для его установки перейдем в раздел «Плагины» панели администратора WordPress и найдем через поиск:

Нажмем «Установить»:

После установки активируем плагин:

После активации Super Socializer на сайте появится горизонтальное и вертикальное меню с иконками, позволяющее делать репост материала сайта с помощью выбранной социальной сети:

В плагине реализована возможность авторизации на сайте через следующие соцсети:

• Facebook;
  
• Twitter;
  
• LinkedIn;
  
• Google+;
  
• ВКонтакте;
  
• Instagram;
  
• Xing и другие.
  
  

Для активации авторизации и выбора нужных соцсетей перейдем в настройки плагина:

После выбора понадобится ввести коды приложений для каждой соцсети, которые были получены ранее:

Скопируем отсюда идентификатор и клиент:

Затем укажем адрес политики конфиденциальности сайта в настройках плагина и сохраним изменения:

В результате на сайте будет реализован вход через социальные сети Facebook и ВКонтакте, а также аккаунт Google:

• Использование инструмента uLogin, рассмотренного выше, с расширенным модулем авторизации для Drupal позволяет легко настроить вход на сайт более чем через 20 соцсетей и сервисов;
  
  
• совместим с Drupal 6 и 7 версий, однако с некоторыми различиями по перечню поддерживаемых функций в пользу седьмой версии;
  
  
• разработчик рекомендует использовать его в сочетании с модулем Real Name;

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