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

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

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

Настройка шторки

OneTapBottomSheet — конфигурация для модальной шторки авторизации. Инициализация имеет следующие поля:
ПолеОписание
serviceNameНазвание сервиса в заголовке шторки
targetActionTextТекст для целевого действия в шторке. Подробнее
oneTapButtonКонфигурация для One Tap. Позволяет настраивать высоту и радиус скругления кнопки. Подробнее
authConfigurationКонфигурация авторизации. Подробнее. По умолчанию задана конфигурация через SDK c обменом кода на фронтенде. Детальнее о ней рассказано в этапе 4
oAuthProviderConfigurationКонфигурация OAuth-провайдеров, используемых в шторке. По умолчанию конфигурация содержит пустой массив. Подробнее
themeЦветовая тема шторки со значением matchingColorScheme(_ scheme: Appearance.ColorScheme), где scheme — цветовая схема. По умолчанию в scheme задано значение current. Подробнее
autoDismissOnSuccessПризнак того, что шторку нужно автоматически скрывать, если авторизация успешна. По умолчанию имеет значение true
onCompleteAuthЗамыкание, которое вызывается при завершении авторизации. Подробнее
Для использования авторизации с помощью шторки в приложении на iOS:
  1. Сконфигурируйте OneTapBottomSheet. Пример создания конфигурации 
    let oneTapSheet = OneTapBottomSheet(
    serviceName: "Your service name",
    targetActionText: .signIn,
    oneTapButton: .init(
        height: .medium(.h44),
        cornerRadius: 8
    ),
    theme: .matchingColorScheme(.system),
    autoDismissOnSuccess: true
) { 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)")
    }
}
  2. Отобразите шторку авторизации подходящим способом:
    • получите UIViewController и отобразите его модально. Пример получения UIViewController 
      let sheetViewController = VKID.shared.ui(for: oneTapSheet).uiViewController()

// ...

self.present(sheetViewController, animated: true)
    • или настройте автоматическое отображение шторки. Пример автоматического отображения шторки 
      oneTapSheet.autoShow(factory: vkid)
      Перед настройкой автоматического показа сконфигурируйте autoShowConfiguration.
Также вы можете настроить текст шторки, который увидит пользователь. Это реализовано в виде поддержки нескольких сценариев.
ПараметрСценарийЗаголовок шторкиТекст кнопкиОписание
.signInВходВойдите в сервис или зарегистрируйтесьВойти с VK IDСценарий по умолчанию
.signInToService(String)ВходВойти в учетную запись название сервисаВойти с VK IDАльтернативный сценарий входа
.registerForEventРегистрация на мероприятиеЗарегистрируйтесь на мероприятиеПродолжить c VK IDДля образовательных проектов и участия в тендерах
.applyForЗаявкаПодайте заявку с VK IDПродолжить c VK IDДля e-commerce и сервисов, где требуется оставить заявку на участие
.orderCheckoutОформление заказаОформить заказ с VK IDОформить с VK IDДля корзин в e-commerce
.orderCheckoutAtService(String)Оформление заказаОформите заказ в название сервиса с VK IDОформить с VK IDДля корзин в e-commerce, альтернативный текст
После выбора сценария примените его к кнопке: 
let oneTapSheet = OneTapBottomSheet(
    // ...
    targetActionText: . signInToService("Your Service Name"), // Текст шторки.
    // ...
)
При необходимости создайте конфигурацию авторизации — в ней вы можете указать выбранную схему — и добавьте ее в качестве параметра в шторку. Детальная кастомизация OneTapBottomSheet доступна на экране OneTapBottomSheetCustomizationController в демо.

Настройка автоматического отображения шторки

Вы можете настроить автоматический показ шторки сразу же при входе пользователя в приложение или с задержкой. Чтобы это сделать, вызовите метод autoShow(_ autoShowConfiguration: AutoShowConfiguration, factory: VKID) в конфигурации OneTapBottomSheet.
ПараметрОписание
autoShowConfigurationКонфигурация автоматического показа шторки
factoryФабрика для создания UI элемента — в данном случае это VKID
Инициализация AutoShowConfiguration имеет следующие поля:
ПараметрОписание
presenterСпособы отобразить шторку авторизации. Возможные значения:
  • newUIWindow — показывает экран на новом UIWindow;
  • uiWindow(_:) — показывает экран на заданном UIWindow;
  • uiViewController(_:) — показывает экран на заданном UIViewController;
  • custom(_:) — показывает экран при помощи пользовательской логики.
Подробнее
delayMillisecondsЗадержка автоматического отображения шторки в миллисекундах. При значении 0 шторка поднимется сразу же при входе пользователя в приложение
Пример инициализации AutoShowConfiguration 
let oneTapBottomSheet = OneTapBottomSheet(
        serviceName: "Your service name",
        targetActionText: .signIn,
        oneTapButton: .init(),
        onCompleteAuth: nil
    )
    
    let autoShowConfiguration = AutoShowConfiguration(
        presenter: .newUIWindow,  // Шторка отобразится на новом UIWindow.
        delayMilliseconds: 1500  // Шторка поднимется через 1.5 секунды.
    )
    oneTapBottomSheet.autoShow(autoShowConfiguration, factory: vkid)

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

Перед подключением дополнительных способов входа убедитесь, что в подразделе Авторизация приложения указаны нужные дополнительные способы входа в ваш сервис: Авторизация через Одноклассники, Авторизация через Mail. Чтобы подключить дополнительные способы входа:
  1. Создайте конфигурации OneTapBottomSheet и OAuthProviderConfiguration. В OAuthProviderConfiguration укажите список необходимых OAuth-провайдеров через параметр alternativeProviders. 
    let oAuthProviderConfiguration = OAuthProviderConfiguration(
    alternativeProviders: [.mail, .ok]
)

let oneTapSheet = OneTapBottomSheet(
    // ...
    oAuthProviderConfiguration: oAuthProviderConfiguration,

    // ...
)
  2. Отобразите шторку авторизации подходящим способом:
    • получите UIViewController и отобразите его модально. Пример получения UIViewController 
      let sheetViewController = VKID.shared.ui(for: oneTapSheet).uiViewController()

// ...

self.present(sheetViewController, animated: true)
    • или настройте автоматическое отображение шторки. Пример автоматического отображения шторки 
      oneTapSheet.autoShow(factory: vkid)

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