Widget Button

Бизнес-описание

Кнопка T-ID — способ запуска авторизации клиентов для ускорения и упрощения их пути от входа до получения сервиса или покупки.

T‑ID Widget Button — это кнопка, которая встраивается на сайт партнера одной строкой кода.

Преимущества:

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

Рекомендации по интеграции T‑ID

Подключение библиотеки на сайте

Чтобы подключить T‑ID Widget Button на сайте, в блоке head вставьте следующий скрипт:

<script src="https://sso-forms-prod.t-static.ru/tid/widget.js"></script>

Пример инициализации скрипта:

const authParams = {
  redirectUri: 'https://mysite.ru/auth/success',
  responseType: 'code',
  clientId: 'XXXX',
  state: 'XXXX'
}

const uiParams = {
  container: '#container-for-tid-button',
  size: 'm',
  color: 'primary',
  text: 'Т-Банк',
  target: '_self'
}

const tidSdk = new TidSDK(authParams);

tidSdk.addButton(uiParams);

Описание параметров

Auth Params

redirectUri string — URI, на который будет перенаправлен клиент после завершения авторизационного диалога.
responseType string — определяет, какой авторизационный процесс будет запущен и какие параметры будут переданы после завершения авторизации.
clientId string — идентификатор клиента (приложения).
state string — уникальный случайный параметр, который генерируется партнерским приложением для связи контекста запуска авторизации с завершением.
customUri string, необязательный параметр — если передается, редирект будет происходить на указанный адрес, игнорируя redirectUri.

UI Params

container string | HTMLElement — элемент-контейнер, внутри которого располагается кнопка. Пример: #container, .container или сам элемент.
size xs | s | m | l — размер кнопки.
color primary | black | grey | business — цвет кнопки.
text string — необязательный параметр, по умолчанию — «Войти с T‑ID», максимальная длина текста — 20 символов. Текст кнопки.
textPosition left | right — необязательный параметр, по умолчанию — left. Определяет, с какой стороны от логотипа показывать текст.
target _parent | _self | _blank | _top — необязательный параметр, по умолчанию — _blank. Определяет, в каком окне будет открываться форма авторизации. Если вам нужно открывать окно вместо текущей вкладки, используйте _self.
recognized true | false — необязательный параметр, по умолчанию — false. Флаг, который позволяет включать распознавание имени пользователя.
Если передано значение true и мы смогли распознать пользователя, у кнопки изменится текст. Также нужно задать максимальную ширину блоку-контейнеру, куда встраивается кнопка — она растягивается на 100% по ширине.