Мы используем файлы cookie для обеспечения работоспособности сервиса, улучшения навигации и маркетинговых активностей Serpstat. Нажимая "Принять и продолжить", вы соглашаетесь с нашей Политика конфиденциальности

Сообщить об ошибке

Отменить
43835 4
How-to Читать 11 минут

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

Регистрация на сайте через социальные сети: как сделать
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — УДОБСТВО
Авторизация через социальные сети повышает лояльность пользователей, которые избавлены от необходимости регистрироваться. Дополнительным преимуществом для владельца будет доступ к персональным данным пользователей, которые можно использовать в маркетинговых целях.

Особенности авторизации через социальные сети

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

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

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

Преимущества авторизации через соцсети

  • Согласно исследованиям, проведенным в 2016 году компанией LoginRadius, 93% пользователей предпочитают авторизацию через соцсети стандартной регистрации через e-mail;

  • 77% пользователей считают, что регистрация через социальные сети — это хорошее решение;

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

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

Недостатки регистрации через соцсети

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

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

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

  • пользователь может удалить аккаунт в соцсети и потерять из-за этого доступ к сайту;

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

Инструменты для авторизации через социальные сети

#1

ULogin

Сервис ULogin позволяет получить универсальный код, подходящий для любого сайта, или же выбрать плагин авторизации для более чем 40 CMS:
Как сделать авторизацию сайта: виджет авторизации uLogin
После выбора CMS перейдем к настройке дизайна и отображения кнопок. Выберем подходящий размер, стиль и перечень необходимых соцсетей:
Как создать страницу авторизации: выбор платформ в сервисе uLogin
Затем внесем адрес ресурса и получим код авторизации, который добавим на указанные страницы сайта:
Как сделать регистрацию и авторизацию: код uLogin
#2

Gigya

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

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

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

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

В документации Gigya приведены пошаговые инструкции для реализации этих двух логических потоков:
1
Интеграция c Gigya's Social Login — поток, вызываемый кликом по плагину входа Gigya.
2
Site Login — синхронизация с сервисом Gigya — поток, полученный с использованием существующей формы входа / регистрации сайта.
После завершения настройки на сайте появится интерфейс такого вида:
Как сделать регистрацию на собственном сайте: кнопки входа с помощью социальных сетей Gigya
#3

Авторизация на сайте через ВКонтакте

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

Авторизация через Facebook

Настроим авторизацию на сайте в панели разработчиков Facebook. Добавим новое приложение:
Создание приложения в панели разработчика Facebook
Укажем название приложения, контактный e-mail и нажмем «Создать ID приложения»:
Новое приложение в Facebook for Developers
Выберем сценарий «Интеграция входа через Facebook» и нажмем «Подтвердить»:
Как сделать регистрацию и авторизацию на сайте: интеграция входа через Facebook
Затем получим идентификатор и секрет приложения, нужные для добавления кода на сайт.

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

Для получения кода перейдем в раздел «Начало работы» приложения. Выберем платформу «Веб»:
Как сделать регистрацию на своем сайте через Facebook
Далее внесем адрес сайта и нажмем «Продолжить»:
Выбор сайта для авторизации через Facebook
Затем следует инструкция по настройке Fasebook SDK:
Facebook SDK для JavaScript
После этого ознакомимся с кодом проверки статуса входа пользователя:
Проверка статуса входа в Facebook
При необходимости можно скопировать фрагменты кода. Нажав далее, получим инструкцию по добавлению кнопки авторизации на сайт:
Добавление кнопки войти через Facebook на сайт
На этом настройка добавления функции авторизации с помощью входа через Facebook завершена.
#5

Авторизация через аккаунт Google

Нажмем «Создать проект» в панели разработчиков Google:
Создание проекта в Google APIs
Идентификатор проекта в Google APIs
Перейдем в подраздел «Окно запроса доступа OAuth», размещенный в разделе «Учетные данные»:
Окно запроса доступа OAuth
Добавим следующие данные:

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

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

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

Плагины CMS для авторизации с помощью социальных сетей

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

WordPress: вход через социальные сети с плагином Super Socializer

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

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

Для активации авторизации и выбора нужных соцсетей перейдем в настройки плагина:
Авторизация через соцсети в WordPress
После выбора понадобится ввести коды приложений для каждой соцсети, которые были получены ранее:
ID соцсетей для настройки авторизации
1
Facebook App ID и Secret смотрим в основных настройках приложения:
Facebook App ID и Secret приложения
2
Google+ ID клиента и Секрет берем в панели разработчиков Google. Для этого переходим в раздел «Учетные данные» и кликаем по названию приложения:
Google+ ID клиента и Секрет идентификатора OAuth
Скопируем отсюда идентификатор и клиент:
Идентификатор и секрет клиента Google
3
ID приложения ВКонтакте получим после создания приложения. Укажем название, выберем тип «Веб-сайт», пропишем URL:
Создание приложения для авторизации через ВКонтакте
Затем укажем адрес политики конфиденциальности сайта в настройках плагина и сохраним изменения:
Авторизация с помощью ВКонтакте в плагине Super Socializer
В результате на сайте будет реализован вход через социальные сети Facebook и ВКонтакте, а также аккаунт Google:
Авторизация через Facebook, Google и ВКонтакте на сайте WordPress
#2

Модуль для авторизации через Facebook и Google+ в OpenCart

  • Модуль устанавливается на OpenCart версий 2.1, 2.2, 2.3;

  • настройка осуществляется в административной панели;

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

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

  • преимущество модуля — в том, что он бесплатный;

  • подробную инструкцию по установке можно получить после скачивания модуля, ознакомившись с файлом readme.txt.
Модуль авторизации через социальные сети OpenCart
#3

Расширение SLogin для Joomla

  • Расширение совместимо с версиями Joomla 2.5 и 3;

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

  • пользоваться расширением можно либо бесплатно с ссылкой аутентификации модуля, либо без ссылки, пожертвовав 150 рублей:
SLogin для Joomla
  • приложение доступно на семи языках;
  • не использует сервисов-посредников;
  • позволяет настраивать дизайн с помощью CSS.
#4

Плагин uLogin для Drupal

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

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

  • разработчик рекомендует использовать его в сочетании с модулем Real Name;
  • модуль позволяет добавлять персонализированные иконки.
Плагин uLogin для Drupal

Заключение

1
Добавление авторизации через соцсети на ресурс выгодно и для пользователей, и для владельца сайта.
2
Пользователю такой функционал экономит время и избавляет от необходимости заполнять длинные формы, запоминать логины и пароли.
3
Владелец сайта получает увеличение числа авторизованных пользователей, уменьшение оттока посетителей, забывших введенные логины и пароли при стандартной регистрации.
4
Вход на сайт через соц сети дает доступ к обширным персональным данным целевой аудитории.
5
Чтобы дать пользователям возможность войти через социальные сети на ваш сайт, воспользуйтесь одним из трех вариантов:

  • универсальными сервисами, объединяющими авторизации через различные соцсети и предоставляющими инструкции по написанию кода;
  • авторизацией с использованием конкретной соцсети;
  • плагинами, предназначенными для установленной системы управления сайтом.
Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat" title = "Как создать авторизацию через соцсети 16261788234051" />
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

4.53 из 5 на основе 18 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.