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

После инициализации VK ID SDK подключите авторизацию по One Tap. У One Tap есть два вида: кнопка и шторка. В этой статье описывается настройка кнопки One Tap.

Кнопка One Tap с логотипом VK

Рядом с кнопкой One Tap можно отобразить дополнительные способы входа — через аккаунты Одноклассники и Mail. В зависимости от подключенных способов входа — одного или нескольких — на экран авторизации добавляются соответствующие кнопки с иконками.

Дополнительные способы входа рядом с кнопкой One Tap

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

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

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

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

Настройка One Tap

OneTapButton — конфигурация стилизованной кнопки авторизации. Имеет два варианта инициализации: Инициализация конфигурации с ручной обработкой нажатия на кнопку

Поле	Описание
appearance	Определяет визуальные свойства кнопки. Например, чтобы изменить тему кнопки, передайте параметр theme с одним из значений: .light — светлая тема; .dark — тёмная тема; .system — системная тема, зависит от устройства пользователя.
layout	Оформление кнопки. Подробнее
onTap	Замыкание, которое вызывается при нажатии на кнопку. Подробнее

Инициализация конфигурации с запуском авторизации при нажатии на кнопку

Поле	Описание
appearance	Определяет визуальные свойства кнопки. Например, чтобы изменить тему кнопки, передайте параметр theme с одним из значений: .light — светлая тема; .dark — тёмная тема; .system — системная тема, зависит от устройства пользователя.
layout	Оформление кнопки. Подробнее
presenter	Объект, который отвечает за отображение экранов авторизации. Подробнее
authConfiguration	Конфигурация авторизации. Подробнее. По умолчанию задана конфигурация через SDK c обменом кода на фронтенде. Детальнее о ней рассказано в этапе 4
onCompleteAuth	Замыкание, которые вызывается при завершении авторизации. Подробнее

Чтобы использовать кнопку One Tap на своих экранах в приложении на iOS:

Cконфигурируйте OneTapButton.

let oneTap = OneTapButton { authResult in
    //Обработка результата авторизации.
    do {
        let session = try authResult.get()
        print("Auth succeeded with token: \(session.accessToken)")
    } catch AuthError.cancelled {
        print("Auth cancelled by user")
    } catch {
        print("Auth failed with error: \(error)")
    }
}

Получите UIView для нее.

let oneTapView = vkid.ui(for: oneTap).uiView()

// ...

self.view.addSubview(oneTapView)

Пример конфигурации кнопки с явно заданным оформлением

let oneTap = OneTapButton(
    appearance: .init(
        style: .primary(),
        theme: .matchingColorScheme(.system)
    ),
    layout: .regular(
        height: .large(.h56),
        cornerRadius: 28
    ),
    presenter: .newUIWindow
) { authResult in
    // Обработка результата авторизации.
}

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

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

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

let oneTap = OneTapButton(
    appearance: .init(
       title: .get // Текст кнопки.
       // ...
    ),
    // ...
)

При необходимости создайте конфигурацию авторизации — в ней вы можете указать выбранную схему — и добавьте ее в качестве параметра в кнопку One Tap. Детальная кастомизация OneTapButton доступна на экране OneTapButtonCustomizationController в демо.

Подключение дополнительных способов входа в кнопке One Tap

Перед подключением дополнительных способов входа убедитесь, что в подразделе Авторизация приложения указаны нужные дополнительные способы входа в ваш сервис: Авторизация через Одноклассники, Авторизация через Mail. Чтобы подключить дополнительные способы входа:

Создайте конфигурации OneTapButton и OAuthProviderConfiguration. В OAuthProviderConfiguration укажите список необходимых OAuth-провайдеров через параметр alternativeProviders.
let oAuthProviderConfiguration = OAuthProviderConfiguration( alternativeProviders: [.mail, .ok] ) let oneTapWithOAuthList = OneTapButton( // ... oAuthProviderConfiguration: oAuthProviderConfiguration, // ... )

Получите UIView для нее.

let oneTapWithOAuthListView = vkid.ui(for: oneTapWithOAuthList).uiView()

// ...

self.view.addSubview(oneTapWithOAuthListView)

Детальная кастомизация комбинации, в которой есть и OneTapButton, и OAuthListWidget, доступна на экране OAuthListWidgetCustomizationController в демо.

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

Выполните настройку авторизации
После того, как пользователь авторизуется в сервисе, получите информацию о пользовательской сессии