Как настроить VK ID SDK для Web

После установки VK ID SDK настройте авторизацию. Чтобы использовать авторизацию, импортируйте модули в код проекта, которые потребуются вам для корректной работы VK ID:

Config — в любом случае;
OneTap, если подключаете кнопку One Tap;
FloatingOneTap, если подключаете шторку авторизации;
OAuthList, если подключаете виджет 3 в 1;
Auth, если подключаете кнопку вручную под свой дизайн.

Пример импорта модуля OneTap

Через консоль

С помощью скрипта и СDN

import { Config, OneTap } from '@vkid/sdk';

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

Через консоль

С помощью скрипта и СDN

import * as VKID from '@vkid/sdk';

Далее сконфигурируйте SDK. Для этого укажите обязательные параметры:

app — ID вашего приложения (client_id). Вы получаете его на этапе создания приложения;
redirectUrl — адрес для перенаправления после авторизации. Должен совпадать со значением поля Доверенный Redirect URL настроек приложения.

Кроме того, обязательно передайте параметры PKCE:

scope — список прав доступа, которые необходимы приложению. Необязательный параметр в виде строки, можно указать несколько значений через пробел. Если параметр не указан, то возвращается базовое право доступа vkid.personal_info, которое включает фамилию, имя, пол, фото профиля, дату рождения;
codeVerifier — параметр, который обеспечивает защиту передаваемых данных. Случайно сгенерированная строка, новая на каждый запрос авторизации. Параметр применяется при использовании расширения PKCE для защиты передаваемых данных. Может состоять из следующих символов: a-z, A-Z, 0-9, _, -. Длина от 43 до 128 символов. codeVerifier можно использовать как в схеме авторизации через SDK с обменом кода на фронтенде, так и в схеме авторизации через SDK с обменом кода на токен, выполняемом с бэкенда сервиса:
- В первом случае VK ID SDK отправит параметр в VK ID вместе с авторизационным кодом, полученным после аутентификации пользователя. Авторизационный код предназначен для обмена на токены, codeVerifier — для верификации обмена.
- Если у вас есть бэкенд, вы должны передать параметр с фронтенда на свой бэкенд и самостоятельно отправить в VK ID вместе с авторизационным кодом.
codeChallenge — версия codeVerifier, преобразованная с помощью code_challenge_method по алгоритму S256. Одновременно передать codeVerifier и codeChallenge не получится. Применяется при использовании расширения PKCE для защиты передаваемых данных. Генерируется приложением для последующей проверки, что запрос токена поступает от того же приложения, которое запросило авторизацию. Передайте этот параметр, если используете схему авторизации через SDK с обменом кода на бэкенде;
state — cтрока состояния, которая должна возвращаться клиентскому приложению без изменения. Представляет собой случайную строку, состоящую из символов: a-z, A-Z, 0-9, _, -, длиной не менее 32 символа.

Примеры конфигурации SDK в зависимости от способа авторизации

С обменом кода на фронтенде

С обменом кода на бэкенде

VKID.Config.init({
  app: client_id, // Идентификатор приложения.
  redirectUrl: redirect_url, // Адрес для перехода после авторизации.
  state: '<случайно сгенерированный state>', // Произвольная строка состояния приложения.
  codeVerifier: '<ваш сгенерированный code_verifier>', // Параметр в виде случайной строки. Обеспечивает защиту передаваемых данных.
  scope: 'email phone', // Список прав доступа, которые нужны приложению.
});

Запуск процесса авторизации

По умолчанию форма авторизации https://id.vk.ru/authorize открывается в новой вкладке. Если вы хотите запустить авторизацию в новом окне, используйте параметр mode и укажите значение VKID.ConfigAuthMode.InNewWindow. Для запуска авторизации в этой же вкладке используйте в параметре mode значение VKID.ConfigAuthMode.Redirect. Однако в этом случае работа в режиме callback будет недоступна.

Работа в режиме callback

После авторизации пользователя данные code, state и device_id передаются в query-параметрах на указанный redirect_url. Редирект влечет за собой перезагрузку страницы, что может привести к обновлению информации на странице. Например, обновится список товаров на главной странице интернет-магазина. Чтобы этого избежать, вы можете настроить авторизацию в режиме работы callback:

Укажите в конфигурации SDK параметр responseMode: VKID.ConfigResponseMode.Callback.
Настройте обработчик успешной авторизации для кнопки One Tap, шторки авторизации или виджета 3 в 1.

Работа с PKCE

В начале процесса авторизации вы можете передать в VK ID SDK codeVerifier или codeChallenge. Далее возможны варианты:

Если вы передаете codeVerifier, VK ID SDK преобразует его в codeChallenge с помощью code_challenge_method. Затем использует codeChallenge в запросе https://id.vk.ru/authorize. Это универсальный способ, который работает как в схеме авторизации через SDK с обменом кода на фронтенде, так и в схеме авторизации так и в схеме авторизации через SDK с обменом кода на токен, выполняемом с бэкенда сервиса.
Если вы передаете codeChallenge, VK ID SDK использует его как есть и передаст в запросе https://id.vk.ru/authorize. Этот способ работает только в схеме авторизации через SDK с обменом кода на токен, выполняемом с бэкенда сервиса. Если вы не используете бэкенд в своем приложении — вы не сможете обменять код на токены при таком способе, так как в VK ID SDK не будет codeVerifier.

Если вы не передали ни codeVerifier, ни codeChallenge, VK ID SDK самостоятельно генерирует codeVerifier и преобразует его в codeChallenge с помощью code_challenge_method. Затем использует codeChallenge в запросе https://id.vk.ru/authorize. Этот способ работает только в схеме авторизации через SDK с обменом кода на фронтенде. Если вы используете бэкенд в своем приложении — вы не сможете забрать codeVerifier из VK ID SDK и передать его в запросе при обмене кода на токены.

Дальнейшие шаги

Настройте авторизацию по кнопке One Tap, с помощью шторки авторизации или через виджет 3 в 1, который включает три способа авторизации для удобства пользователей: через аккаунт ВКонтакте, Одноклассники и Mail;
Получите информацию о пользователе.

Также вы можете ознакомиться с кодом VK ID SDK в нашем проекте на GitHub.