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

Добавил пользователь Morpheus
Обновлено: 10.09.2024

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

Для начала немного терминов. В OAuth авторизации выделяются три роли – клиент, сервер и владелец ресурса (пользователь).
Клиент – это сервис, которому предоставляется доступ к данным, сервер – это сервис, который хранит данные, а владелец ресурса – это пользователь, который предоставляет свои данные.
Или на примере: Вы сделали на своем сайте авторизацию через ВКонтакте. На этот сайт зашел пользователь и хочет авторизоваться. В данном случае клиентом является Ваш сайт, сервером – ВКонтакте, а владельцем ресурса – этот самый пользователь.

Еще один термин, с которым придется часто сталкиваться – это токен. Токен в нашем случае – это средство авторизации в OAuth запросах, текстовый ключ, который предоставляет ограниченный временный доступ к данным владельца ресурса на сервере. Нередко используется связка из нескольких токенов.

Способы OAuth авторизации на разных серверах отличаются, но схема у них одна:

Клиент отправляет на сервер запрос на получение токена авторизации. В запросе используются идентификационные данные клиента.
После распознавания клиента сервер отдает токен авторизации.
Клиент, используя этот токен, перенаправляет пользователя на сервер
На сервере пользователь авторизовывается и подтверждает доступ клиенту к своим данным.
После авторизации и подтверждения пользователь перенаправляется к клиенту, передавая при этом дополнительные токены (обычно один или два) доступа (обычно в GET-параметрах)
Используя токен доступа клиент обращается к серверу за данными и получает их уже без подтверждения пользователем. Обычно доступ к данным по одному и тому же токену ограничивается лишь по времени, некоторые серверы дополнительно ограничивают количество запросов.

Шаги 1 и 2 – редкость, обычно идентификационные данные клиента передаются серверу вместе с перенаправлением пользователя на авторизацию вместо токена авторизации. Идентификационные данные клиенту выдаются при регистрации сайта на сервере, зачастую в виде приложения.

ВКонтакте – это социальная сеть с огромной аудиторией – более 40 млн. посетителей ежеджевно. Почему бы не упростить регистрацию этих людей на Вашем сайте?
Для вступления достаточно, пора приступить к делу.

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

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

Что и как

Для удобства создаём класс, в него пишем константы (скачать конечный результат можно ниже из раздела "дополнительно"):

В поле scope передаются запрашиваемые права доступа приложения. Для считывания основной информации достаточно offline . Но если нужно большее, то их можно перечислять через запятую:

Небольшое пояснение: redirect() - это метод, реализующий перенаправление. Для удобства в этом примере он вынесен в класс Utils

class Utils <
public static function redirect ( $uri = '' )
<
header ( "HTTP/1.1 301 Moved Permanently" ) ;
header ( "Location: " . $uri , TRUE , 302 ) ;
exit ;
>
>

После авторизации и подтверждения доступа пользователь переадресовывается на адрес URL_CALLBACK ?code=xxx . Теперь нужно по переданному нам коду взять токен и запросить данные пользователя. Если же пользователь отклонил запрос или возникла ошибка, то он перенаправится на адрес URL_CALLBACK с кодом и описанием ошибки, например URL_CALLBACK?error=invalid_request&error_description=Invalid+display+parameter .

То есть, логику можно разместить в эти условия:

if ( ! empty ( $_GET [ 'error' ] ) ) <
// Пришёл ответ с ошибкой.
> elseif ( empty ( $_GET [ 'code' ] ) ) <
// Самый первый запрос. Отправляем пользователя на авторизацию
OAuthVK::goToAuth();
> else <
// Ответ от ВК пришёл удачный
// Запрос токена и данных пользователя
>

if ( ! ( $res = @ file_get_contents ( $url ) ) ) <
return false ;
>

$res = json_decode ( $res ) ;
if ( empty ( $res -> access_token ) || empty ( $res -> user_id ) ) <
return false ;
>

self :: $token = $res -> access_token ;
self :: $userId = $res -> user_id ;

Объект $res при удачном запросе будет содержать такие поля:

stdClass Object
(
[ access_token ] => xxx
[ expires_in ] => 43200
[ user_id ] => xxx
)

METHOD_NAME – название метода из списка функций API
PARAMETERS – параметры соответствующего метода API
ACCESS_TOKEN – ключ доступа, полученный в результате успешной авторизации приложения

Запрос данных пользователей по их user_id осуществляется через метод getProfiles или его полный аналог users.get. При необходимости можно также отправлять параметр fields и получать дополнительные данные пользователя.

if ( ! self :: $userId ) <
return false ;
>

if ( ! ( $res = @ file_get_contents ( $url ) ) ) <
return false ;
>

$user = json_decode ( $res ) ;

if ( ! empty ( $user -> error ) ) <
self :: printError ( $user -> error ) ;
return false ;
>

if ( empty ( $user -> response [ 0 ] ) ) <
return false ;
>

$user = $user -> response [ 0 ] ;
if ( empty ( $user -> uid ) || empty ( $user -> first_name ) || empty ( $user -> last_name ) ) <
return false ;
>

return self :: $userData = $user ;
>
.
>

В нашем примере ответ от сервера приходит в таком виде (в зависимости от параметров количество полей может быть больше):

stdClass Object
(
[ response ] => Array
(
[ 0 ] => stdClass Object
(
[ uid ] => 1
[ first_name ] => Павел
[ last_name ] => Дуров
)
)
)

Имя, фамилия и uid пользователя теперь известны нам, что делать с ними дальше — решайте сами. Я использую OAuth для полноценной регистрации и создаю с этими данными нового пользователя на сайте.

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

Общий механизм такой:

Данные, которые относятся к публичным (они отличаются у разных ресурсов). Чаще всего в них входят: логин, ID или адрес страницы, фотография или аватар, фамилия, имя, электронный адрес, локация, часовой пояс, пол, возраст.

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

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

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

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

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

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

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

Варианты, отлично подходящие для решений, созданных на CMS / no-code платформах. Функция авторизации и регистрации необходима как для сайтов, так и для приложений — неважно web или mobile — поэтому даже на непопулярных платформах можно найти множество вариантов, особенно если ваше комьюнити достаточно активно.

Какой бы вариант вы не выбрали, стоит придерживаться основных правил.

Если данные передаются через форму на вашем сайте или обрабатываются в вашем приложении — вы несете ответственность за их сохранность.
Условия использования и политика конфиденциальности помогут не только оградить вас от возможных неприятностей, но также добавят лояльности со стороны новых пользователей.
Рядом с кнопкой регистрации коротко расскажите, почему вход через сторонние сервисы лучше. Придумайте бонус для клиентов, который будет дополнительной мотивацией.
Не только соцсети. Аккаунты WhatsApp, Telegram, Amazon, Apple тоже можно использовать для регистрации на сайтах, в мобильных и веб-приложениях.
Если подключить много вариантов авторизации — пользователи будут забывать, какой из них выбрали. Используйте популярные в вашем регионе (но Google в списке будет точно).

Конечно, они тоже есть:

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

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

Google
Apple
LinkedIn
Facebook

В чем их особенность? Прежде всего, в простоте настройки. Только для модуля LinkedIn нужно указать Секрет клиента, URL перенаправления и ID клиента. Для остальных модулей достаточно ID клиента или приложения — в зависимости от модуля.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ВКонтакте

Создание приложения

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

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

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

Фейсбук

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

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

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

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

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

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

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

ULogin

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

Akamai

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

Gigya

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

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

WordPress

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

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

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

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

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

Joomla

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

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

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

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

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

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

OpenCart

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

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

Битрикс

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

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

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

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

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

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

Готово, можно приступать к написанию скрипта.

Настройка ссылки для входа

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

При переходе по ссылке, вы попадёте на страницу запроса разрешения.

После того как пользователь дал согласие, его перенаправит на страницу указанную в параметре redirect_uri, в моём случае это такой URL:
Обратите внимание на параметр code=71706d4fb3edf76692 это специальный ключ, который vk выдал сайту для работы с разрешёнными данными пользователя.

Получение данных из Вконтакте

Читайте также: