T-ID Widget Button

Бизнес-описание продукта

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

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

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

Сценарий использования

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

T‑ID полностью закрывает эту потребность и предлагает конкурентное преимущество, так как продукт частично разработан на стороне банка.

Техническое описание продукта

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

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

<script src="https://sso-forms-prod.cdn-tinkoff.ru/tinkoff-id/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. Флаг, который позволяет включать распознавание имени пользователя.

recognized: true

Если передано значение recognized: true и мы смогли распознать пользователя, у кнопки изменится текст. Также нужно задать максимальную ширину блоку-контейнеру, куда встраивается кнопка, так как кнопка растягивается на 100% по ширине.

FAQ

Кнопка отображается не так, как хотелось бы

Чтобы кастомизировать кнопку под свой дизайн, можно переопределить стили кнопки. Для этого в CSS-файле добавьте соответствующие классы. Пример с изменением цвета кнопки на красный:

.tid-4PNRE-button-primary {
  background-color: red;
}