Существует несколько способов добавить на сайт возможность регистрации через соцсети:
- настроить ее самостоятельно для каждой отдельной сети,
- воспользоваться услугами специальных сервисов,
- использовать плагины CMS.
Самостоятельная настройка
Вы можете настроить авторизацию на сайте через соцсети самостоятельно, используя инструкции каждой отдельной соцсети. Процедура плюс-минус повторяется, поэтому мы рассмотрим один пример – настройку регистрации через “Фейсбук” .
Регистрация через Facebook
Регистрация настраивается для каждого сайта отдельно!
1. Добавьте SSL-сертификат для доменного имени вашего сайта.
3. Выберите свою роль: разработчик.
4. Укажите цель использования приложения.
5. Когда вы сделаете это, появится поп-ап с предложением создать свое приложение. Выберите это действие.
6. Создайте ID приложения.
7. Сохранив ID, вы окажетесь в панели управления приложением. Выберите настройку входа через Facebook.
Виджет для сайта — Вход в ВКонтакте
8. Выберите платформу “Веб”.
9. В появившемся окне введите адрес своего сайта и сохраните изменения.
10. Перейдите в меню “Настройки” → “Основное”.
11. Введите соответствующие данные в поля “Домены приложений” и “URL-адрес политики конфиденциальности”. Сохраните изменения.
12. Зайдите в меню настроек вашего интернет-магазина. В общих настройках выберите пункт “Авторизация через соцсети”.
13. Чтобы подключить регистрацию через Facebook, отметьте эту соцсеть галочкой. Введите в поля “Идентификатор приложения” и “Секрет приложения” значения, которые вы настроили в приложении “Фейсбук”. Сохраните изменения.
14. В приложении “Фейсбук” перейдите в настройки входа через Facebook:
15. Установите флажок “Да” напротив опций “Клиентская авторизация Oauth”, “Веб-авторизация Oauth”, “Требовать HTTPS” и “Использовать строгий режим для URI перенаправления”.
16. В поле “Действительные URI перенаправления для OAuth” введите ссылку в формате yourdomain/eauth/service/facebook, где yourdomain – веб-адрес вашего сайта. Сохраните изменения.
17. Чтобы активировать вход на ваш сайт через “Фейсбук”, нажмите на кнопку “Выкл.” вверху страницы.
18. Подтвердите действие во всплывающем окне.
19. Вы настроили регистрацию через Facebook.
Ссылки на регистрации через некоторые другие соцсети:
- Регистрация на сайте через Вконтакте
- Регистрация на сайте через Instagram
- Регистрация на сайте через Google
Сервисы
Чтобы не настраивать доступ через каждую соцсеть самостоятельно, вы можете использовать специальные сервисы.
Akamai
Предложение Akamai Social Login поможет настроить регистрацию на сайте через такие платформы, как
- AOL,
- Facebook,
- LinkedIn,
- PayPal,
- Twitter,
- Yahoo!
Среди дополнительных преимуществ сервиса – удобный личный кабинет и аналитика по активности зарегистрировавшихся пользователей.
Вебинар: «Авторизация на своем сайте через VK API»
Gigya
Gigya – платформа для идентификации клиентов, на которой можно управлять их профилями, настройками, подписками, принятием прав пользования. Gigya помогает настроить вход через социальные сети, управление профилем и его настройками, интеграцию со сторонними сервисами и рекламными платформами.
ULogin
Русскоязычная платформа для настройки регистрации через соцсети, среди достоинств которой – простой и удобный интерфейс и дополнительные возможности для получения данных зарегистрировавшихся пользователей.
Плагины WordPress для регистрации через соцсети
У большинства систем управления содержимым сайта (CMS) существуют собственные плагины, которые помогают в настройке авторизации на сайте через соцсети. Поскольку WordPress – одна из самых популярных CMS, ниже мы приведем обзоры нескольких плагинов именно для этой системы.
Social Login
Social Login – это бесплатный плагин WordPress, который обеспечивает регистрацию на сайте через “Вконтакте”, “Твиттер”, “Инстаграм” и еще более сорока соцсетей. Среди плюсов – аналитический дашборд и возможность выбора разных тем для оформления иконок авторизации.
Super Socializer
Еще один бесплатный плагин для подключения авторизации и возможностей поделиться и комментировать контент сайта через соцсети.
miniOrange Social Login
Социальный плагин обеспечивает регистрацию через Vk, Twitter, Instagram, Google, Facebook, LinkedIn и другие соцсети – часть из них входит в платный пакет сервиса. Среди других премиальных услуг – соответствие регистрации требованиям GDPR , велком-письма зарегистрировавшимся юзерам и нотификационные емейлы администраторам сайта.
Выводы
Как показывает статистика, большинство пользователей останутся благодарны и с большей вероятностью зарегистрируются на вашем сайте, если вы добавите возможность авторизоваться через соцсети. Для консервативной части интернет-аудитории оставьте альтернативный способ – традиционную форму регистрации.
Кстати, для пользователей eSputnik у нас есть хорошая новость – скоро авторизация через соцсети будет доступна и в нашей системе:)
Источник: dzen.ru
Авторизация через социальную сеть Вконтакте
Для того чтобы добавить на свой сайт авторизацию через социальную сеть Вконтакте, нужно создать своё приложение в этой соц. сети. Я по шагам опишу, как это делается на примере своего сайта vivazzi.pro.
На странице https://vk.com/editapp?act=create добавьте своё приложение аналогично скриншоту:
Далее, нужно вам будет выслан код для подтверждения регистрации нового приложения по смс. Получите код и подтвердите регистрацию:
После подтверждения вы можете увидеть свой ID приложения, а также защищённый ключ (секретный ключ), который понадобится для авторизации:
Включённый open API позволяет производить разные действия, в том числе вход и регистрацию пользователей на своём сайте.
Для авторизации пользователей на сайте введите Адрес сайта , Базовый домен и Доверенный redirect URI , в моём случае: http://vivazzi.pro/, vivazzi.pro, http://vivazzi.pro/accounts/vk/login/callback/ соответственно. Если вы хотите протестировать авторизацию у себя локально, то добавьте localhost в Базовый домен и Доверенный redirect URI (в моём случае: http://localhost:8000/accounts/vk/login/callback/).
Откуда берётся Доверенный redirect URI зависит от того, самостоятельно ли вы пишите код авторизации или используете готовые решения для своего языка программирования. Если вы хотите самостоятельно написать код авторизации, то в ВК существует соответствующая страница документации: VK Авторизация пользователя. Я же использую библиотеку django-allauth, ознакомиться с ней вы можете на странице Django allauth авторизация через социальную сеть.
Источник: vivazzi.pro
Авторизация через ВК NestJS + React
Привет! В этой статье я хочу рассказать как сделать авторизацию через ВК по способу Authorization code flow на примере NestJS + React.
Давайте за основу возьмем то, что авторизация через Вконтакте — это один из возможных способов входа, но кроме него существует классический по почте и паролю. Поэтому для начала давайте реализуем просто авторизацию по токену.
Авторизация по токену
Для тех кто незнаком с авторизацией по токену, я рекомендую прочитать тут.
Для упрощения примера мы не будем сохранять токены в БД и не будем делать механизм обновления токена.
Backend
Запросы принимают два ресурса /login /register. Первый авторизует, второй создает пользователя.
Если пользователь авторизован, то меняется текст
- маршрут доступен всем (/signin)
- маршрут доступен после авторизации (/user)
Нам понадобится метод, который будет запрашивать данные пользователя с сервера:
Для того чтобы начать, необходимо зарегистрировать приложение во Вконтакте перейдя по ссылке https://vk.com/editapp?act=create
После регистрации вам будет доступен айди приложения (client_id) и защищенный ключ (client_secret).
Авторизация в целом выглядит следующим образом:
Я использую авторизацию по коду (Authorization Code Flow), потому что считаю ее наиболее безопасным вариантом авторизации.
Далее рассмотрим каждый из этапов.
Frontend
На фронте авторизация сводится к перенаправлению пользователя по ссылке, получению кода авторизации вместе с ссылкой для редиректа и отправке этого кода на сервер.
Всю логику связанную с авторизацией я выношу в отдельный компонент VKButton. Полностью компонент выглядит так:
Суть этой ссылки примерно следующая:
- просим доступ на почту пользователя (scope=email)
- просим вернуть код (response_type=code) вместе с url на который нас перенаправит вк в случае успешной авторизации (redirect_uri)
Важные моменты
- Ссылка на редирект должна совпадать с той же ссылкой, что вы передаете с сервера.
- Код авторизации будет действовать в течение часа и по нему можно сделать только один запрос.
После того как мы нажали на кнопку “Разрешить”, нас перенаправляет назад и в url добавляется code. Чтобы достать его из url, я буду использовать библиотеку query-string, но лучше написать хелпер, который будет уметь то же самое.
На сервере нам надо принять код, по которому получить токен. С помощью токена мы сможем запросить профиль пользователя от которого пришел код. Вместе с токеном нам также возвращается email и user_id.
По ссылке выше мы запрашиваем все необходимые нам поля.
https://api.vk.com/method/users.get?user_ids=$access_token=$https://medium.com/@ndrwbv/%D0%B0%D0%B2%D1%82%D0%BE%D1%80%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-%D0%B2%D0%BA-nestjs-react-797ff4e36154″ target=»_blank»]medium.com[/mask_link]