Top.Mail.Ru
План интеграции VK ID | VK ID - сервис авторизации
VK ID auth service logo

План интеграции VK ID

Совет
Рекомендуем интегрировать VK ID для приложений на плафторме Web с помощью инструмента Low-code, который упрощает процесс и позволяет добавить способы быстрой авторизации.
Интегрируя VK ID, вы получаете ряд преимуществ:
  • повышение конверсии в регистрацию, авторизацию и целевые действия — более 100 миллионов пользователей могут авторизоваться в вашем сервисе в один клик;
  • экономию денег на поддержку авторизации, потому что мы берём затраты на SMS на себя;
  • возможность внедрения социальных механик за счет верифицированных данных пользователей из профиля ВКонтакте — например, после входа в ваш сервис с VK ID пользователь легко сможет отставлять отзывы, в которых отобразятся данные его профиля VK ID.
Авторизация через VK ID

Перед интеграцией

Перед началом интеграции войдите в сервис авторизации. Далее возможны варианты:
  • Если у вас уже есть профиль бизнеса в VK Бизнес ID, сервис авторизации создаст личный кабинет на основе данных из бизнес-профиля и вы сможете перейти к этапу «Подготовка приложения к работе».
  • Если у вас есть несколько профилей бизнеса, выберите нужный — сервис авторизации создаст личный кабинет на основе данных из бизнес-профиля и вы сможете перейти к этапу «Подготовка приложения к работе».
    Окно выбора профиля бизнеса
  • Если вы ранее не пользовались VK Бизнес ID или хотите создать новый профиль, нажмите Новый профиль бизнеса. Сервис авторизации перенаправит вас на форму создания профиля бизнеса.

Создание профиля бизнеса

  1. Введите ИНН организации и нажмите Далее.
    Окно выбора профиля бизнеса
  2. VK Бизнес ID создаст профиль бизнеса на основе полученных данных. Проверьте их корректность и нажмите Войти.
    Окно добавления профиля бизнеса
В результате сервис авторизации создаст личный кабинет на основе данных из бизнес-профиля и вы сможете перейти к этапу «Подготовка приложения к работе». План интеграции VK ID включает следующие этапы: подготовку приложения к работе в сервисе авторизации VK ID, разработку и тестирование.

Подготовка приложения к работе

Шаг 1. Ознакомьтесь с документацией

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

Шаг 2. Создайте приложение

В кабинете VK ID сервиса авторизации создайте приложение.

Шаг 3. Настройте приложение

В кабинете VK ID сервиса авторизации настройте приложение:
  • отредактируйте вид формы авторизации, которую увидят ваши пользователи;
  • добавьте свои юридические документы;
  • запросите необходимые доступы для получения информации о пользователях.

Разработка

Настройте работу с VK ID SDK и добавьте элементы интерфейса, например кнопки.

Шаг 1. Выберите способ интеграции VK ID в свое приложение

Способы интеграции описаны в статье «Быстрый старт с VK ID». Если ранее вы ещё не интегрировали VK ID SDK, воспользуйтесь инструментом Low-code — он сгенерирует готовый код для вставки, где используется установка SDK через скрипт. Если этот способ вам не подходит — установите VK ID SDK через пакетный менеджер. Для мобильных платформ подключите VK ID SDK согласно инструкции: Если вы уже интегрировали OAuth ВКонтакте или VK ID через SDK предыдущих версий или без SDK, замените старую версию авторизации на новый VK ID SDK Web, iOS, Android. Для перехода с VK ID SDK предыдущих версий на новый SDK воспользуйтесь инструкциями по миграции: Если у вас подключена авторизация с OK или Mail и вы хотите заменить ее на виджет 3 в 1 с кнопками входа OK или Mail, то воспользуйтесь инструкцией по миграции на новый сервис авторизации.
Если по каким-то причинам вы не можете подключить SDK, настроить авторизацию по VK ID можно самостоятельно. В этом случае элементы быстрого входа — One Tap, шторка авторизации, 3 в 1 — будут недоступны.
Если вы интегрируете VK ID в веб-приложение с помощью Low-code, перейдите к Шагу 3. При подключении VK ID в мобильное приложение выполните Шаг 2 и затем переходите к Шагу 3.

Шаг 2. Выберите и настройте элементы быстрого входа для вашего приложения

  • Настройте кнопку One Tap, которая авторизует пользователя в сервисе в одно касание (iOS, Android, Flutter);
  • Настройте шторку авторизации, которая также позволяет пользователю мгновенно авторизоваться и всплывает в правом верхнем углу экрана на сайтах или появляется в виде шторки снизу в мобильных приложениях (iOS, Android, Flutter);
  • Настройте виджет 3 в 1, который позволяет отобразить кнопку входа с ОК и Mail непосредственно на форме авторизации вашего сервиса, а также дополнительные OAuth в личном кабинете сервиса авторизации VK ID, которые показывают кнопки ОК и Mail на форме авторизации VK ID (iOS, Android, Flutter).
Если по каким-то причинам вы не можете использовать элементы быстрого входа VK ID, настройте кнопку авторизации самостоятельно, воспользовавшись подходящей инструкцией для iOS, Android, Flutter. Обратите внимание, что кнопка авторизации должна соответствовать требованиям к дизайну.

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

Вам потребуется Access token, который используется при вызове методов API ВКонтакте для работы с данными пользователя. Его можно получить в обмен на код авторизации после того, как пользователь авторизовался в сервисе. Перед публикацией новых сборок в сторах протестируйте вручную, все ли работает корректно.

Тестирование

Шаг 1. (Опционально) Проверьте наличие расширенных доступов, если запросили их

Сделать это можно в разделе Доступы выбранного приложения.

Шаг 2. Сверьтесь с чек-листом запуска

Убедитесь, что в вашем приложении корректно работают:
  • быстрая авторизация;
  • авторизация по номеру телефона;
  • выход из аккаунта;
  • миграция аккаунтов с OAuth OK и Mail на VK ID — привязка аккаунтов OAuth OK и Mail к аккаунту пользователя VK ID, если вы ее использовали.
Убедитесь, что корректно отображаются:
  • светлая и тёмная цветовые схемы;
  • данные пользователя;
  • информация об ошибках.
Если все работает согласно ожиданиям — это значит, вы успешно интегрировали VK ID в сервис.