Top.Mail.Ru
Авторизация с помощью шторки для Web | VK ID - сервис авторизации
VK ID auth service logo

Авторизация с помощью шторки для Web

Совет
Рекомендуем подключать шторку авторизации с помощью инструмента Low-code, который упрощает интеграцию.
После настройки VK ID SDK подключите авторизацию с помощью шторки, которая представляет собой всплывающее в верхнем правом углу экрана окно.
Шторка авторизации VK ID для неавторизованного пользователя
Шторка авторизации VK ID для авторизованного пользователя
Пример работы авторизации с помощью шторки доступен в демо VK ID.

Как создать шторку авторизации

Важно
Если в клиентском браузере отключены third-party cookies, имя и фотография пользователя в шторке авторизации отображаться не будут.
Примеры импорта модулей, отрисовки шторки и обработки ошибок 
import * as VKID from '@vkid/sdk';

// Создание экземпляра шторки.
const floatingOneTap = new VKID.FloatingOneTap();

// Отрисовка шторки в контейнере с именем приложения APP_NAME, светлой темой и на русском языке.
floatingOneTap.render({ appName: APP_NAME, scheme: VKID.Scheme.LIGHT, lang: VKID.Languages.RUS })
              .on(VKID.WidgetEvents.ERROR, handleError); // handleError — какой-либо обработчик ошибки.

Список параметров

ПараметрОбязательныйТипЗначение по умолчаниюОписание
appNameДаString-Название приложения
schemeНетEnum VKID.Scheme или StringVKID.Scheme.LIGHTЦветовая схема. Для переключения на темную тему используйте значение VKID.Scheme.DARK
langНетEnum VKID.Languages или numberVKID.Languages.RUSЛокализация. Для переключения на другие языки используйте эти значения
showAlternativeLoginНетbooleanfalseОтображение дополнительной кнопки для входа в другой аккаунт
contentIdНетEnum VKID.FloatingOneTapContentId или numberVKID.FloatingOneTapContentId.SIGN_IN_TO_SERVICEСценарий использования шторки
indentНетFloatingOneTapIndent—Отступы от границ экрана
indent.topНетnumber12Отступ от верхней границы экрана (в версиях для десктопа и планшета)
indent.rightНетnumber12Отступ от правой границы экрана (в версиях для десктопа и планшета)
indent.bottomНетnumber12Отступ от нижней границы экрана (в версиях для десктопа и планшета)
oauthList-OAuthName[]-Список отображаемых способов входа. Можно подключить дополнительные способы авторизации через аккаунт Одноклассники (VKID.OAuthName.OK) и Mail (VKID.OAuthName.MAIL)
fastAuthEnabledНетbooleantrueОтображение состояния кнопки "Продолжить как". В значении false отключается авторизация в один клик: убирается отображение пользователя в кнопке, при клике на OneTap для пользователя откроется окно аутентификации

Как настроить сценарий использования шторки

Шторка позволяет настраивать текст, который увидит пользователь. Это реализовано в виде поддержки нескольких сценариев.
EnumСценарийЗаголовок шторкиТекст кнопки в авторизованной зонеТекст кнопки в неавторизованной зонеОписание
SIGN_IN_TO_SERVICEВходВойдите в сервис или зарегистрируйтесьПродолжить как имя пользователяВойти с VK IDСценарий по умолчанию
SIGN_IN_TO_ACCOUNTВходВойти в учетную запись название сервисаПродолжить как имя пользователяВойти с VK IDАльтернативный сценарий входа
REGISTRATION_FOR_EVENTРегистрация на мероприятиеЗарегистрируйтесь на мероприятиеПродолжить как имя пользователяПродолжить c VK IDДля образовательных проектов и участия в тендерах
SUBMIT_APPLICATIONSЗаявкаПодайте заявку с VK IDПродолжить как имя пользователяПродолжить c VK IDДля e-commerce и сервисов, где требуется оставить заявку на участие
MAKE_ORDER_WITH_SERVICEОформление заказаОформите заказ в название сервиса с VK IDОформить как имя пользователяОформить с VK IDДля корзин в e-commerce
MAKE_ORDER_WITHOUT_SERVICEОформление заказаОформите заказ с VK IDОформить как имя пользователяОформить с VK IDДля корзин в e-commerce, альтернативный текст
FAST_REGISTRATIONБыстрая регистрацияБыстрая регистрация в название сервисаПродолжить как имя пользователяПродолжить с VK IDДля быстрой регистрации в сервисе

Как получить и обработать данные

После вызова метода floatingOneTap.render() в контейнере появится шторка авторизации. Когда пользователь авторизуется в сервисе, SDK передаёт код подтверждения code, строку состояния state и идентификатор устройства device_id. Есть два способа получить эти данные:
  • через URL перенаправления — используется по умолчанию;
  • через callback.
Получение code, state и device_id через URL перенаправления не требует каких-либо действий. Данные будут переданы в query-параметрах на адрес, который указан в поле redirectUrl настроек SDK. Однако если вы получаете параметры через callback, настройте обработчик успешной авторизации. Пример настройки обработчика успешной авторизации 
floatingOneTap.on(VKID.FloatingOneTapInternalEvents.LOGIN_SUCCESS, function (payload) {
    const code = payload.code;
    const deviceId = payload.device_id;

    VKID.Auth.exchangeCode(code, deviceId)
      .then(onSuccessHandler)
      .catch(onErrorHandler);
});
Далее обменяйте полученный код на токены.

Как обменять код на токены

Обратите внимание
Возможности обмена кода подтверждения на токены зависят от архитектуры вашего приложения и от того, какие параметры для поддержки PKCE сервис передал в SDK.
Если ваше веб-приложение разделяется на фронтенд и бэкенд и вы используете схему авторизации через SDK с обменом кода на бэкенде, ваш сервис передаёт в SDK codeChallenge — обмен кода подтверждения на токены возможен только через вызов id.vk.ru/oauth2/auth, где grant_type = authorization_code. Подробнее Если такого разделения нет, используется только фронтенд и вы применяете схему авторизации через SDK с обменом кода на фронтенде, возможны варианты:
  • ваш сервис передал в SDK codeVerifier — код подтверждения можно обменять на токены с помощью метода SDK VKID.Auth.exchangeCode(code, device_id) или через вызов id.vk.ru/oauth2/auth, где grant_type = authorization_code. Подробнее;
  • ваш сервис не передал в SDK codeVerifier — обмен возможен только через метод SDK VKID.Auth.exchangeCode(code, device_id).

Обработка успешной авторизации

С Access token, который возвращается в результате обмена кода подтверждения, вы можете получить необходимую информацию о пользователе, используя запросы в api.vk.ru, — интеграция завершена. Подробнее о получении данных пользователя читайте в статье «Обмен токена на информацию о пользователе».

Обработка ошибок

Если авторизация пользователя завершается с ошибкой, ее можно обработать и отобразить пользователю. Так он поймет, что пошло не так и почему авторизация не выполнилась. Данные об ошибке будут переданы в query-параметрах адреса, который указан в поле redirectUrl настроек SDK. Ещё в дополнение к шторке авторизации вы можете установить для входа в сервис кнопку One Tap.

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