Авторизация по кнопке One Tap для Flutter

Документация актуальна для версии VK ID SDK — 1.0.3.

У One Tap есть два вида: кнопка и шторка. В этой статье описывается настройка авторизации по кнопке One Tap.

Пример основной кнопки

Пример кнопки с фото (Android)

Ещё вы можете использовать кнопку One Tap рядом с кнопками других провайдеров авторизации. Блок с кнопками можно дополнить фразой «или с помощью».

Кнопка One Tap рядом с другими провайдерами авторизации

Если кнопки других провайдеров авторизации представлены в вашем веб-приложении в компактном виде, то есть иконками, кнопку One Tap можно использовать без надписей.

Кнопка-иконка VK ID рядом с кнопками-иконками других провайдеров авторизации

Ещё в дополнение к кнопке One Tap вы можете установить для входа в сервис шторку авторизации. Чтобы пользователь мог авторизоваться в один клик, на клиентском устройстве должна быть активная сессия. Если активной сессии нет, функциональность будет доступна, но пользователю нужно пройти полную авторизацию. Под такой авторизацией подразумевается весь процесс от ввода номера телефона до подтверждения прав на аккаунт, например, с помощью пароля. Для использования авторизации по кнопке One Tap в приложении на Flutter добавьте SDK в проект.

Добавьте кнопку на экран

Заранее разместите вашу кнопку в вёрстке. widget_with_one_tap.dart

@override
Widget build(BuildContext context) {
    return OneTap(
        key: GlobalKey(),
        onAuth: (oAuth, data) {
            // ...
        },
    )
}

Настройте кнопку

При необходимости настройте поведение кнопки с помощью параметров, описанных ниже.

Как настроить текст в кнопке One Tap

One Tap позволяет настраивать текст, который увидит пользователь. Это реализовано в виде поддержки нескольких сценариев.

Класс	Сценарий	Текст в авторизованной зоне	Текст в неавторизованной зоне	Описание
signIn	Продолжить	Продолжить как имя пользователя	Войти с VK ID	Сценарий по умолчанию
signUp	Записаться	Записаться как имя пользователя	Записаться c VK ID	Для сервисов сферы услуг и образовательных
get	Получить	Получить для имя пользователя	Получить с VK ID	Для кейсов со скидкой или бонусом
open	Открыть	Открыть как имя пользователя	Открыть с VK ID	Для финансовой сферы — например, чтобы открыть счёт, карту или вклад
calculate	Рассчитать	Рассчитать для имя пользователя	Рассчитать с VK ID	Для финансовой сферы и сложных продуктов — например, стоимость проекта, ипотека
order	Заказать	Заказать как имя пользователя	Заказать с VK ID	Для корзин в e-commerce
placeOrder	Оформить заказ	Оформить заказ как имя пользователя	Оформить с VK ID	Для корзин в e-commerce, альтернативный текст
sendRequest	Оставить заявку	Оставить заявку как имя пользователя	Оставить заявку c VK ID	Для e-commerce и сервисов, где требуется оставить заявку на участие
participate	Участвовать	Участвовать как имя пользователя	Участвовать c VK ID	Для образовательных проектов и участия в тендерах

После выбора сценария примените его к кнопке:

OneTap(
    ...
    scenario: OneTapTitleScenario.signUp,
)

Включение отображения дополнительной кнопки «Войти под другим аккаунтом» (Android)

Отображение дополнительной кнопки «Войти под другим аккаунтом» включается через параметр signInToAnotherAccountButtonEnabled — эта функциональность работает только на Android. По умолчанию кнопка не отображается. ScreenWithVKIDButton.kt

OneTap(
    ...
    signInToAnotherAccountButtonEnabled: true
)

На iOS этот параметр игнорируется, потому что на этой платформе нет возможности подтягивания данных пользователя в кнопку One Tap.

Стилизация кнопки

Для настройки отображения кнопки предусмотрен параметр style. Стилизация кнопки задаётся с помощью класса OneTapStyle. Тип кнопки задаётся параметром type, у которого несколько вариантов значений:

Название поля	Описание	Пример отображения кнопки
light	Светлая тема
dark	Тёмная тема
transparentLight	Светлая тема с прозрачным фоном
transparentDark	Тёмная тема с прозрачным фоном
icon	Кнопка в виде квадратной иконки	Примеры в требованиях к дизайну кнопки
system	Системная тема, которая меняется между light и dark	Зависит от системных настроек оформления в телефоне — согласно указанным настройкам будет использоваться тема light или dark
transparentSystem	Прозрачная системная тема, которая меняется между transparentLight и transparentDark	Зависит от системных настроек оформления в телефоне — согласно указанным настройкам будет использоваться тема transparentLight или transparentDark

Также опционально можно настроить следующие параметры:

cornersStyle — закругление кнопки;
size — размер кнопки.

OneTap(
    ...
    style: OneTapStyle(
        type: OneTapType.system,
        cornersStyle: const OneTapCornersDefault(),
        size: OneTapSize.standard,
    ),
)

Отключение быстрой авторизации (Android)

Если вы хотите убрать отображение пользователя в кнопке, вы можете отключить быструю авторизацию — эта функциональность работает только на Android. В этом случае авторизация в один клик станет недоступна: если пользователь нажмет кнопку One Tap, откроется окно авторизации. Отключить быструю авторизацию можно с помощью параметра fastAuthEnabled:

OneTap(
    ...
    fastAuthEnabled: false,
)

Как получить токен

Когда пользователь пройдет авторизацию, в ответ VK ID SDK для Flutter передаст Access token, который позволяет работать с API ВКонтакте и получать информацию о пользователе или ошибку. Обработка успешной авторизации Если авторизация успешна, с Access token можно получить необходимую информацию о пользователе, используя запросы в api.vk.ru, — интеграция завершена.

OneTap(
    onAuth: (oAuth, data) {
        // Использование токена.
    },
)

Также после получения Access token происходит его привязка к IP-адресу:

если вы используете авторизацию через SDK с обменом кода на фронтенде, Access token привязывается к IP-адресу пользователя. Этот токен можно использовать только с того клиентского устройства, на котором прошла авторизация;
если вы используете авторизацию через SDK с обменом кода на бэкенде, Access token привязывается к IP-адресу бэкенда сервиса. Токен можно использовать только на одном бэкенд-сервере — на том, который получил этот токен. Если передать токен на другой бэкенд-сервер или на фронтенд, возникнет ошибка.

Обработка ошибок Если авторизация пользователя завершается с ошибкой, её можно обработать и отобразить пользователю. Так он поймет, что пошло не так и почему авторизация не выполнилась. В результате ошибки авторизации в коде вы получите callback, в котором можно обработать ошибку.

OneTap(
    onError: (oAuth, error) {
        switch (error) {
            case AuthCancelledError():
                break;
            case AuthOtherError(description: var description):
                break;
        }
    },
)

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

Если приложению нужно получить данные пользователя, оно сможет воспользоваться методом VKID.fetchUser(). Этот метод использует сохранённый Aсcess token и сделает запрос к /user_info. Подробнее Обратите внимание, что для доступа к телефону и почте нужно передать scopes "phone" и "email" соответственно. Это можно сделать через класс OneTap, передав в параметре scopes нужные доступы:

OneTap(
    ...
    authParams: UIAuthParamsBuilder()
        .withScopes({ "phone", "email" })
        .build(),
)

Подключение дополнительных способов авторизации через Mail и ОК

One Tap поддерживает подключение дополнительных способов авторизации через аккаунты Mail и ОК. Для отображения этих способов входа используйте именованный конструктор: OneTap.withOAuths( alternativeOAuths: const { OneTapOAuth.mail, OneTapOAuth.ok }, )

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

При использовании схемы авторизации через SDK с обменом кода на бэкенде сгенерируйте параметры PKCE в приложении вашего сервиса согласно схеме и затем настройте авторизацию.
Реализуйте получение информации о пользователе и другие необходимые методы.