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

1. Добавьте репозиторий и пропишите значения в Manifest Placeholders.
2. Организуйте работу с подходящим для вас модулем VK ID SDK — Compose или XML. Дальнейшая работа с кнопкой определяется вашим подходом к работе с UI.

Работа с Compose

Укажите зависимости

dependencies {
    implementation("com.vk.id:onetap-compose:${sdkVersion— указывается последняя версия SDK, смотрите номер версии в начале страницы}")
    //...
}

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

@Composable
fun VKIDAuthScreen() {
    val bottomSheetState = rememberOneTapBottomSheetState()
    OneTapBottomSheet(
        state = bottomSheetState,
        onAuth = { /*...*/ },
        serviceName = "Some app"
    )
    //...
 }

Управляйте шторкой

1. Создайте объект OneTapBottomSheetState с помощью метода rememberOneTapBottomSheetState().
2. Передайте его в шторку.

@Composable
fun VKIDAuthScreen() {
    val bottomSheetState = rememberOneTapBottomSheetState()
    OneTapBottomSheet(
        state = bottomSheetState,
        onAuth = { /*...*/ },
        serviceName = "Some app"
    )
    // Показать шторку.
    bottomSheetState.show()
    // Скрыть шторку.
    bottomSheetState.hide()
}

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

OneTapBottomSheet(
    ...
    scenario = OneTapScenario.EnterService,
)

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

OneTapBottomSheet(
        ...
        fastAuthEnabled = false,
    )

Настройка внешнего вида шторки

OneTapBottomSheet(
    onAuth = {},
    serviceName = "VKID Sample",
    style = OneTapBottomSheetStyle.Dark(
        cornersStyle = OneTapSheetCornersStyle.None,
        buttonsCornersStyle = OneTapButtonCornersStyle.None,
        buttonsSizeStyle = OneTapButtonSizeStyle.SMALL_32
    )
)

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

@Composable
fun ScreenWithVKIDFloating() {
    OneTapBottomSheet(onAuth = { oAuth, token ->
        // Использование токена.
    })
}

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

Автоподнятие шторки

• autoShowSheetDelayMillis = null — шторка не будет подниматься автоматически: она отобразится, например, после нажатия пользователем на кнопку входа с VK ID;
• autoShowSheetDelayMillis = 0 — шторка поднимется автоматически сразу же при входе пользователя в приложение;
• autoShowSheetDelayMillis = 1500 — шторка поднимется через 1.5 секунды после входа пользователя в приложение.

OneTapBottomSheet(
    autoShowSheetDelayMillis = 1500 // Шторка поднимается через 1.5 секунды.
)

Работа с XML

Укажите зависимости

dependencies {
    implementation("com.vk.id:onetap-xml:${sdkVersion — указывается последняя версия SDK, смотрите номер версии в начале страницы}")
    //...
}

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

<com.vk.id.onetap.xml.OneTapBottomSheet
    android:id="@+id/vkid_bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:vkid_bottomSheetServiceName="Some xml app"
    app:vkid_bottomSheetScenario="OrderInService"
    app:vkid_autoHideOnSuccess="false"
    />

Управляйте шторкой

• show() — отображает шторку;
• hide() — скрывает шторку.

val vkidOneTapBottomSheet = findViewById<OneTapBottomSheet>(R.id.vkid_bottom_sheet)
vkidOneTapBottomSheet.show()

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

<com.vk.id.onetap.xml.OneTapBottomSheet
    ...
    app:vkid_bottomSheetScenario="EnterService" />

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

• С помощью атрибута vkid_onetapFastAuthEnabled:
  <com.vk.id.onetap.xml.OneTapBottomSheet
          app:vkid_onetapFastAuthEnabled="false" />

• С помощью property fastAuthEnabled:
  findViewById<OneTapBottomSheet>(R.id.vkid_bottom_sheet).fastAuthEnabled = false

Настройка внешнего вида шторки

<com.vk.id.onetap.xml.OneTapBottomSheet
       android:id="@+id/vkid_bottom_sheet"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:vkid_bottomSheetStyle="dark"
       app:vkid_bottomSheetServiceName="Sample xml"
       app:vkid_bottomSheetScenario="OrderInService"
       app:vkid_bottomSheetCornerRadius="0dp"
       app:vkid_buttonsCornerRadius="0dp"
       app:vkid_autoHideOnSuccess="false"
       />

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

val vkidOneTapBottomSheet = findViewById<OneTapBottomSheet>(R.id.vkid_bottom_sheet)
vkidOneTapBottomSheet.setCallbacks(
        onAuth = { oAuth, token ->
            // успешная авторизация
        }, onFail = { oAuth, fail ->
            // обработка ошибок
        })

fun onCreate(/* ... */) {
    findViewById<OneTapBottomSheet>(R.id.OneTapBottomSheet).setCallbacks(
        onAuth = { oAuth, token -> /* Использование токена */ }
    )
}

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

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

OneTapBottomSheet(
    ...
    authParams = VKIDAuthUIParams {
        scopes = setOf("phone", "email")
    }
)

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

1. Убедитесь, что в подразделе Авторизация приложения указаны нужные дополнительные способы входа в ваш сервис: Авторизация через Одноклассники, Авторизация через Mail.
2. Воспользуйтесь инструкцией ниже в зависимости от выбранного модуля VK ID SDK: Compose или XML.

1. Укажите список необходимых OAuth-провайдеров для их отображения:
   OneTapBottomSheet(
       ...
       oAuths = seOf(OneTapOAuth.Mail, OneTapOAuth.OK)
   )

2. После вы получите OAuth в callback, с помощью которого авторизовался пользователь:
   OneTapBottomSheet(
       ...
       onAuth = { oAuth, token -> when (oAuth) { ... } },
       onFail = { oAuth, fail -> when (oAuth) { ... } }
   )

1. Укажите список необходимых OAuth-провайдеров для их отображения. Вы можете сделать это в вёрстке с помощью атрибута vkid_onetapOAuths:
   <com.vk.id.onetap.xml.OneTapBottomSheet
       android:layout_width="300dp"
       android:layout_height="wrap_content"
       app:vkid_onetapOAuths="mail,ok"
       />

   Или программно с помощью property oAuths:
   findViewById<OneTapBottomSheet>(R.id.vkidBottomSheet).oAuths = setOf(OneTapBottomSheetOAuth.MAIL, OneTapBottomSheetOAuth.OK)

2. После вы получите OAuth в callback, с помощью которого авторизовался пользователь:
   findViewById<OneTapBottomSheet>(R.id.vkidBottomSheet).setCallbacks(
       onAuth = { oAuth, token -> when (oAuth) { ... } },
       onFail = { oAuth, fail -> when (oAuth) { ... } }
   )

Автоподнятие шторки

• с помощью атрибута vkid_autoShowDelayMillis;

<com.vk.id.onetap.xml.OneTapBottomSheet
        app:vkid_autoShowDelayMillis="1500" /> // Шторка поднимается через 1.5 секунды.

• с помощью property autoShowDelayMillis.

findViewById<OneTapBottomSheet>(R.id.vkid_bottom_sheet).autoShowDelayMillis = 1500 // Шторка поднимается через 1.5 секунды.

• autoShowSheetDelayMillis = null — шторка не будет подниматься автоматически: она отобразится, например, после нажатия пользователем на кнопку входа с VK ID;
• autoShowSheetDelayMillis = 0 — шторка поднимется автоматически сразу же при входе пользователя в приложение;
• autoShowSheetDelayMillis = 1500 — шторка поднимется через 1.5 секунды после входа пользователя в приложение.

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

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