Добавление кнопки Войти по Сбер ID

Обновлено 28 августа 2023

Добавление кнопки Войти по Сбер ID

Загрузки настроек SDK без кнопки Сбер ID

Начиная с версии 3.0.0 добавлен новый способ инициализации SDK SberIDInitializer.initialize. Используя этот метод, можно больше не передавать через верстку или конструктор clientId.

Данный метод в будущем станет обязательным, сейчас можно начинать переходить на него.

/**
 * Метод инициализирует SDK.
 * @param application необходим для создания зависимостей
 * @param clientId    нужен для проверки доступности SDK и загрузки настроек
 */
fun initialize(application: Application, clientId: String)

Его необходимо вызвать при создании вашего Application и передать два параметра application и client_id.

class MyApplication : Application() {

    override fun onCreate() {
        super.onCreate()
        SberIDInitializer.initialize(this, this.getString(R.string.client_id_1))
    }
}

Добавление в xml разметке

import sberid.sdk.auth.view.SberIDButton

<sberid.sdk.auth.view.SberIDButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

Кнопка автоматически устанавливает иконку Сбербанка, текст, шрифт, цвет по указанным в атрибутах значениям либо значениями по умолчанию. Высота кнопки органичена интервалом 28dp-64dp, при установке высоты, выходящей за пределы интервала, высота будет автоматически приведена в соответствующей границе. Ширина кнопки имеет минимальное значение, исходя из размеров выбранного текста, логотипа и отступов. Максимальная ширина кнопки не ограничена.

при установке ширины кнопки менее минимально допустимой величины будет выполнена попытка приведения ширины кнопки к минимально допустимой. При этом в логи будет выведена ошибка с указанием расчетного и фактического значений в dp, просьба обращать на это внимание. Найти ошибку в логах можно по тэгу SberIDButtonWidthError

Вам остается только добавить:

параметры положения кнопки;
отступы;
идентификатор партнера (значение client_id из параметров oidc).

Начиная с версии SDK 2.0.0 в разметке кнопки нужно указывать идентификатора партнера. Для этого передавайте новый атрибут app:clientId со строковым значением.. Переданное значение используется для более корректного сбора и анализа метрик по событиям, происходящим в рамках процесса авторизации по Сбер ID, а также выполнения фоновых проверок на допустимость выполнения самой авторизации. При неуспешном прохождении такой проверки кнопка авторизации будет скрыта от пользователя, подробнее см. пункт «Проверка на допустимость авторизации по Сбер ID»

Подробную информацию о стиле кнопок вы найдете в руководстве по дизайну Сбер ID.

Пример объявления кнопки с дизайном по умолчанию (способ размещения кнопки в контейнере зависит от реализации вашей разметки)

<sberid.sdk.auth.view.SberIDButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="36dp"
    app:clientId="your_client_id" 
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>

Добавление через конструктор

Начиная с версии 2.4.0 появилась возможность создавать кнопку через конструктор, без xml. Данный способ актуален для партнеров, которые используют мультиплатформенные фреймворки, например Flutter.

val sberIDButton = SberIDButton(
    context = this,
    sberIDButtonModel = SberIDButtonModel(
        clientId = "4361-69c-43e-87e1-3fd6351", //id приложения партнера
        width = 120,   // размер кнопки в dp
        height = 40, // размер кнопки в dp
        type = ButtonType.DEFAULT_TYPE, // тип кнопки, Enum класс ButtonType
        text = ButtonText.LOGIN_SHORT,  // текст кнопки, Enum класс ButtonType
        cornerRadius = 4, // скругление кнопки в dp
        strokeColor = Color.rgb(76, 76, 76), //цвет граней для белой кнопки
        buttonLoader = false // нужно ли отображать загрузку со старта
    )
)

// Описание Enum класса для типа кнопки
ButtonType {
    DEFAULT_TYPE, // Зеленная кнопка, 
    WHITE_TYPE    // Белая кнопка
}

// Описание Enum класса для текста кнопки
ButtonText {
    LOGIN_SHORT, // Сбер ID,
    CONTINUE,    // Продолжить cо Сбер ID
    FILL         // Заполнить cо Сбер ID
}

//Далее добавляем ее в ирархию виджетов
container.addView(sberIDButton)

Необходимо направить запрос на SberId@sber.ru на добавление deeplink в список доверенных. В запросе указывается client_id и список deeplink, по которым будет производиться возврат в мобильное приложение партнера. Сотрудник банка добавит домен в список разрешенных.

Кастомизация кнопки

Тип

По умолчанию используется стандартный вид кнопки:

Для изменения стиля кнопки, укажите параметр в xml кнопки app:buttonType="значение из списка".

Значение 'white_type соответствует белой кнопке с серой обводкой:

Обводка

В случае установки типа кнопки "white_type" есть возможность переопределить значение цвета обводки для соответствия вашему дизайну, если на экране присутствует несколько однотипных кнопок.

Для этого установите конкретный цвет через атрибут кнопки app:buttonStrokeColor="@color/..."

При установке цвета обводки для стандартной зеленой кнопки значение будет проигнорировано.

Скругление

Для изменения скругления кнопки, укажите параметр в xml кнопки app:buttonCornerRadius="значение_dp". Предопределенные значения "corner_small" и "corner_large" соответствуют 4 и 32 dp соответственно. Есть возможность указать здесь собственное значение радиуса скругления в dp.

Текст

Для изменения текста кнопки, укажите параметр в xml кнопки app:buttonText="значение из списка".

Соответствие значений:

login → Войти по Сбер ID

login_short → Сбер ID

continue_on → Продолжить по Сбер ID

fill → Заполнить по Сбер ID

Значение по умолчанию - Войти по Сбер ID. Установка собственного текста, шрифта, цвета текста не поддерживается.

allCaps всегда выключен (т.е. текст не будет заглавными буквами);
тексты поддерживают английскую локализацию на устройстве. При выборе локализации, отличной от русской и английской, тексты будут на русском.

В примере кнопка с текстом "Сбер ID" отрисована с минимально допустимой шириной

Персонализация кнопки

Начиная с версии SDK 1.2.0 кнопка входа по Сбер ID автоматически поддерживает персонализацию при выполнении следующих условий:

на устройстве установлено МП СБОЛ версии от 11.8 и выше
в МП СБОЛ пользователем включен функционал персонализации входа в приложениях партнера (МП СБОЛ - Профиль пользователя - Сбер ID - Настройки входа)

Дополнительных действий от разработчиков при интеграции этой версии SDK не требуется.

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

Если персонализация на стороне МП СБОЛ отключена либо на устройстве не установлено МП СБОЛ либо процедура персонализации завершилась неуспешно, текст на кнопке будет отображаться тот, который вы указали в разметке при ее добавлении.

Если кнопка была добавлена с коротким текстом "Сбер ID", персонализация кнопки не будет запущена в любом случае. Если дизайн экрана предполагает наличие широкой кнопки входа по Сбер ID, рекомендуется использовать один из длинных вариантов текста

При запуске процедуры персонализации на кнопке отображается индикатор загрузки:

После завершения персонализации кнопка выглядит следующим образом:

Если имя пользователя слишком длинное, чтобы уместиться в отведенное размерами кнопки место, итоговый текст будет автоматически обрезан с правой стороны:

Управление статусом загрузки

Начиная с версии SDK 1.3.5 появилась возможность вручную программно управлять статусом загрузки в кнопке (анимированное лого СберБанка, как в разделе Персонализация кнопки).

Это может быть полезно, если перед тем, как дать возможность пользователю нажать на кнопку, вам необходимо например сделать запрос на сервер и получить oidc-параметры для авторизации по Сбер ID. Либо уже после запуска авторизации дождаться результата ее выполнения. При ручной установке статуса загрузки кнопка перестает реагировать на нажатия, при снятии - начинает.

Установка/снятие статуса загрузки вручную не мешает работе процедуры персонализации кнопки, эти процессы не связаны друг с другом. Если на момент снятия вами статуса загрузки процедура персонализации еще не будет завершена, то анимация лого продолжится до ее завершения.

Предусмотрено два варианта управления статусом:

атрибут в xml разметке кнопки app:buttonLoader="значение_true_false". Если ваш экран подразумевает ожидание каких-либо данных при первоначальной отрисовке UI, рекомендуем пользоваться именно этим способом, выставляя в разметке значение true. Если атрибут в разметке не указан, по умолчанию значение принимается за false.

публичный метод в классе кнопки SberIDButton для управления статусом загрузки по мере необходимости из программного кода

/**
* Установить актуальный статус индикатора загрузки в кнопке
* В слуачае установки статуса загрузки стартует анимация, текст в кнопке зануляется
* В случае отмены статуса загрузки анимация останавливается, в кнопке отображается
* стандартный/персонализированный текст, либо продолжается анимация до завершения работы процедуры персонализации
*
* @param isLoading - true, если необходимо отобразить на кнопке статус загрузки, false - в противном случае
*/
fun setLoaderState(isLoading: Boolean)

Добавление кнопки Войти по Сбер ID