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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

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

Отменить
3348
How-to Читать 11 минут 25 февраля 2019

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

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

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

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

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

Статистические исследования показывают, что 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
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

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

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

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

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

5 из 5 на основе 2 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Хотите узнать новые фишки по интернет-маркетингу?
Подпишитесь на нашу рассылку — только полезные статьи, реальные кейсы и новости Serpstat раз в неделю.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов