Как настроить регистрацию на сайте через соцсети

В статье:

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

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

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

    Форма регистрации на сайте через аккаунты в соцсетяхРегистрация на asos.com

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

    Чем так хороши соцсети для регистрации

    От этого способа авторизации выигрывают и клиенты, и владелец сайта.

    Удобно клиентам: меньше заполнять, быстрее регистрация, учетка не теряется

    Еще в 2013 году исследование показало, что 77% пользователей считают вход через соцсети хорошим решением. А в 2016 году другие исследователи выяснили, что 93% пользователей чаще выбирают способ авторизации через соцсеть. Остальные опрошенные либо не были зарегистрированы в соцсетях, либо не хотят передавать сайту личные данные профиля, для них нужно оставить возможность авторизации через email.

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

    После того, как платформа для email-рассылок Mailchimp внедрила авторизацию через соцсети, количество неудачных попыток входа в систему снизилось на 66%. С этим способом меньше вероятность забыть логин и пароль, потому что не нужно запоминать отдельную учетку.

    Полезно компании: можно собирать данные, больше вероятность репостов

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

    Также авторизация через соцсети упрощает репосты материалов с сайта, а значит увеличивает конверсию и реферальный трафик.

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

    Требования к сайту по защите личных данных

    В ФЗ N152-ФЗ «О персональных данных» описаны правила для законного сбора и обработки данных пользователей. За нарушения предусмотрены штрафы.

    Список требований:

    1. Сайт должен работать на HTTPS, то есть ему нужен ssl-сертификат.

    2. Хостинг сайта по закону должен находиться на территории РФ.

    3. До публикации сайта владелец или разработчик должен подать в Роскомнадзор уведомление об обработке персональных данных в бумажном или электронном виде.

    На сайте должны быть:

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

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

    • документ с политикой в отношении обработки персональных данных с перечислением информации, которые собирает сайт, и обоснованием необходимости;

    • уведомление о сборе cookies и других данных.

    Google намерен прекратить поддержку в Chrome сторонних файлов cookie. Как это повлияет на работу сайтов, разбирали в статье.

    Политика обработки и защиты персональных данных на сайтеСсылки на документы на сайте ikea.ru

    С 1 марта 2021 года вступил в силу ФЗ от 30.12.2020 № 519-ФЗ об изменении правил обработки общедоступных персональных данных, которые есть в профилях соцсетей и на сайтах объявлений. Это имя, город проживания, контакты, личные фото и другая информация.

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

    Новые настройки приватностиНастройки cookie на booking.com

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

    Как добавить на сайт регистрацию через профили в соцсетях

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

    Образец формы регистрации на сайтеРегистрация на сайте lamoda.ru

    Авторизация через соцсети идет по цепочке:

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

    2. В приложение социальной сети приходит запрос.

    3. Пользователя перебрасывает в закрытое защищенное приложение соцсети, которое создал веб-мастер. На экране появляется кнопка «Продолжить как…» или «Разрешить».

    4. По клику пользователь разрешает войти в систему через учетную запись соцсети. Кликнул — разрешил передать данные.

    5. Соцсеть отправляет сайту ключ доступа к личным данным пользователя.

    6. Сайт отправляет соцсети запрос на получение данных и подтверждает его полученным ранее ключом доступа.

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

    Для добавления регистрации через соцсети есть несколько способов — ручной и автоматизированные.

    Способ 1. Ручная настройка форм для каждой социальной сети

    Каждая соцсеть требует отдельных настроек:

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

    • со стороны сайта нужно настроить интеграцию с социальной сетью.

    ВКонтакте

    Настроить авторизацию на сайте через ВКонтакте можно с помощью API. На странице создания приложения заполните поля, в качестве платформы выберите «Сайт».

    Создание приложения через платформу разработчика ВКонтактеСоздание приложения

    Нажмите «Подключить сайт», действие нужно подтвердить через телефон или устройство с приложением. В настройках вы увидите id приложения и ключ — эти данные понадобятся для работы с API.

    Список дальнейших действий подробно разобран на странице Документации для разработчиков.

    Если вам нужен только ВКонтакте, можно использовать официальный виджет авторизации. На странице создания виджета нужно заполнить поля и скопировать код для вставки на сайт. Подробная документация расскажет, как правильно его вставить.

    Виджет авторизации ВКВиджет для входа через сайт ВКонтакте

    Фейсбук

    Зарегистрируйтесь в системе Фейсбука для разработчиков, кликните на «Создать приложение» и выберите «Создание кросс-сервисных функций:

    Создание приложения на платформе для разработчиков Фейсбук

    Дальше после заполнения полей и клика на «Создать приложение» откроются настройки. Выберите «Настроить» у плашки «Вход через Facebook»:

    Создание приложения для входа через Фейсбук

    Дальше выберите платформу — Веб, введите адрес сайта, сохраните и нажмите продолжить.

    Процесс создания приложения для входа через Фейсбук

    Теперь надо все настроить. Откройте настройки приложения на боковой панели, добавьте добавьте домен сайта, URL политики конфиденциальности и пользовательского соглашения.

    Фейсбук придерживается общего регламента по защите данных (GDPR), согласно ему у пользователей должна быть возможность сделать запрос на удаление данных. В пункте «Удаление данных пользователей» выберите «URL инструкций для удаления данных» и вставьте ссылку на описание таких инструкций. Это обязательный пункт.

    Настройки авторизации на сайте через Фейсбук

    Все сохраните, Скопируйте ID приложения и секрет.

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

    Дальше откройте настройки главы «Вход через Фейсбук»:

    Настройки входа через Фейсбук

    В настройках должны быть отметки «Да» у опций «Клиентская авторизация Oauth», «Веб-авторизация Oauth», «Требовать HTTPS» и «Использовать строгий режим для URI перенаправления». В поле «Действительные URI перенаправления для OAuth» нужна ссылка в формате http://site.ru/auth/facebook/callback. OAuth — это единый стандарт авторизации.

    Настройки передачи данных между сайтом и социальной сетью

    Сохраните изменения. Вверху вы увидите «Статус: в разработке», его нужно активировать, чтобы он сменился на «Опубликовано».

    Другие соцсети настраиваются по похожему механизму с помощью API. К примеру, в Одноклассниках тоже надо начать с создания приложения, у Твиттера также есть платформа для разработчиков. Быстрее это можно сделать через инструменты или плагины.

    Способ 2. Сервисы для настройки авторизации через соцсети

    Это не все существующие сервисы, но более-менее популярные из тех, что нам встретились, по большей части платные. Если вы используете что-то из перечисленного, дайте свой отзыв в комментариях!

    ULogin

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

    Akamai

    Более серьезный сервис. Поможет настроить авторизацию через Фейсбук, LinkedIn, PayPal, Твиттер и Yahoo!, есть функциональность для сбора и анализа информации из пользовательских профилей. Интерфейс на английском.

    Gigya

    Подходит для установки регистрации через ВКонтакте, Facebook, Twitter и LinkedIn,интеграции с другими сервисами и платформами, а также для обработки статистики по зарегистрированным пользователям. Интерфейс на английском.

    Способ 3. CMS-плагины для регистрации на сайте через соцсети

    Если пользуетесь CMS, можно поискать решение через модули и расширения в каталогах.

    WordPress

    Для этого движка есть много расширений, к примеру:

    • miniOrange Social Login для регистрации через ВКонтакте, Твиттер, Инстаграм, Фейсбук и другие соцсети. Есть дополнительные премиальные возможности, например, отправка приветственных писем зарегистрировавшимся;

    • Social Login & Register тоже предлагает много соцсетей, среди которых ВКонтакте, Фейсбук, Инстаграм, Твиттер и другие. Есть возможность аналитики данных пользователей;

    • Social Login by BestWebSoft для добавления формы авторизации через соцсети и комментирования. Работает с Фейсбуком, Твиттером, аккаунтом Google и LinkedIn;

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

    Joomla

    Модулей авторизации довольно много, а работа с ними одинаковая: установить модуль, зарегистрировать специальное приложение в соцсети и получить ключи, как мы писали в примерах с ВКонтакте и Фейсбуком, добавить эти данные в настройки модуля и опубликовать.

    Модули можно найти в разделе Расширения — Менеджер расширений. Например:

    • Slogin для регистрации через ВКонтакте, Твиттер, Фейсбук, Одноклассники, Инстаграм, Twitch, Telegram, Github и другие платформы;

    • Social Login — ВКонтакте, Фейсбук, Твиттер, Pinterest, LinkedIn, Инстаграм, GitHub, WordPress, Reddit, Vimeo, Steam, Mail.ru, Яндекс, Одноклассники и другие соцсети;

    • Instant Facebook Login для Фейсбука, Твиттераи LinkedIn, дополнительно с его помощью можно работать с комментариями, чатом и другими функциями;

    • BT Social Login для Фейсбука и Твиттера;

    • Akeeba SocialLogin для регистрации с помощью Фейсбука и Твиттера или через профили в GitHub, Google и Microsoft.

    OpenCart

    Для OpenCart тоже есть модули, к примеру:

    • бесплатный модуль авторизации через социальные сети Фейсбук и Инстаграм для версий OpenCart 2.1, 2.2, 2.3;

    • платный модуль для регистрации через Вконтакте, Фейсбук, Одноклассники, Твиттер, Gmail.com, Mail.ru.

    Битрикс

    У CMS Битрикс авторизация на сайте через социальные сети входит в функциональность основного модуля входа на сайт.

    Нужно только настроить:

    1. В выбранных вами соцсетях нужно зарегистрировать приложение и получить ключи.

    2. В настройках Битрикса открыть Настройки модулей — Социальные сервисы — Внешние сервисы, выбрать нужные соцсети и внести данные в настройки панели администрирования.

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

    Источник