Авторизация через ВК NestJS + React
Привет! В этой статье я хочу рассказать как сделать авторизацию через ВК по способу Authorization code flow на примере NestJS + React.
Давайте за основу возьмем то, что авторизация через Вконтакте — это один из возможных способов входа, но кроме него существует классический по почте и паролю. Поэтому для начала давайте реализуем просто авторизацию по токену.
Авторизация по токену
Для тех кто незнаком с авторизацией по токену, я рекомендую прочитать тут.
Для упрощения примера мы не будем сохранять токены в БД и не будем делать механизм обновления токена.
Backend
Запросы принимают два ресурса /login /register. Первый авторизует, второй создает пользователя.
При успешной авторизации мы возвращаем объект пользователя вместе с токеном.
Пользователь выглядит следующим образом:
Так же нам понадобится ресурс /profile для получения данных о пользователе:
Frontend
Для хранения бизнес логики будем использовать MobX.
На фронте будет три маршрута:
- маршрут доступен всем (/)
Если пользователь авторизован, то меняется текст
- маршрут доступен всем (/signin)
- маршрут доступен после авторизации (/user)
Нам понадобится метод, который будет запрашивать данные пользователя с сервера:
После этого в лейауте, который будет использоваться на всех страницах, будем проверять есть ли у пользователя токен и если есть, то будем пытаться запросить профиль. Если у нас это не получается (например токен стал невалидным), то будем очищать токен и объект пользователя в сторе, а затем перекидывать его на страницу входа. Данные очищаются для того, чтобы при недействительном токене пользователя не редиректило на страницу входа.
После того как у нас настроена базовая авторизация можем присупить к авторизации через ВК.
Авторизация через ВК
Для того чтобы начать, необходимо зарегистрировать приложение во Вконтакте перейдя по ссылке https://vk.com/editapp?act=create
После регистрации вам будет доступен айди приложения (client_id) и защищенный ключ (client_secret).
Авторизация в целом выглядит следующим образом:
Я использую авторизацию по коду (Authorization Code Flow), потому что считаю ее наиболее безопасным вариантом авторизации.
Далее рассмотрим каждый из этапов.
Frontend
На фронте авторизация сводится к перенаправлению пользователя по ссылке, получению кода авторизации вместе с ссылкой для редиректа и отправке этого кода на сервер.
Всю логику связанную с авторизацией я выношу в отдельный компонент VKButton. Полностью компонент выглядит так:
После нажатия на кнопку входа через ВК нас перебрасывает по ссылке:
https://oauth.vk.com/authorize?client_id=${client_id}&display=popup&redirect_uri=${cbLink}&scope=email&response_type=code&v=5.120
Суть этой ссылки примерно следующая:
- просим доступ на почту пользователя (scope=email)
- просим вернуть код (response_type=code) вместе с url на который нас перенаправит вк в случае успешной авторизации (redirect_uri)
Важные моменты
- Ссылка на редирект должна совпадать с той же ссылкой, что вы передаете с сервера.
- Код авторизации будет действовать в течение часа и по нему можно сделать только один запрос.
После того как мы нажали на кнопку “Разрешить”, нас перенаправляет назад и в url добавляется code. Чтобы достать его из url, я буду использовать библиотеку query-string, но лучше написать хелпер, который будет уметь то же самое.
После получения кода мы отсылаем его на сервер и ждем, что нам придут данные авторизации:
Backend
На сервере нам надо принять код, по которому получить токен. С помощью токена мы сможем запросить профиль пользователя от которого пришел код. Вместе с токеном нам также возвращается email и user_id.
Для того чтобы делать запросы с сервера необходимо подключить HttpService из библиотеки @nestjs/common и импортировать HttpModule в AuthModule.
По ссылке выше мы запрашиваем все необходимые нам поля.
https://api.vk.com/method/users.get?user_ids=${userId}&fields=photo_400,has_mobile,home_town,contacts,mobile_phone&access_token=${token}&v=5.120Полный перечень можно увидеть на странице https://vk.com/dev/users.get. Полный список методов можно найти на странице https://vk.com/dev/methods
В первую очередь мы будем искать пользователя по vk_id, так как может возникнуть такая ситуация, при которой у пользователя не указан email в профиле вк.
Раньше при регистрации аккаунта во Вконтаке email был обязательным, но сейчас нет. Если вам нужен email пользователя, то можно добавить проверку email’а на фронте и в зависимости от этого перенаправлять пользователя на форму добавления необходимых данных.
Немного изменим логику аутентификации. Добавим туда параметр для пропуска пароля, так как при авторизации через соц. сети он будет отсутствовать.
Заключение
В данной статье мы рассмотрели как делать авторизацию через ВК с помощью метода Authorization code flow. Помимо него существуют ещё Implicit flow и Client credentials flow. Подробнее про них можно прочитать тут.
Ссылки
- Документация ВК https://vk.com/dev/manuals
- Репозиторий с всем кодом https://github.com/ndrwbv/vk-auth-react-nestjs
