Перейти к основному содержимому

T-ID Widget Button

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

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

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

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

Рекомендации по интеграции TID

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

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

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

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

Рекомендации по интеграции TID

Перед добавлением кнопки на сайт, ознакомьтесь с рекомендациями по интеграции TID.

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

Чтобы подключить TID 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 — необязательный параметр, по умолчанию — «Войти с TID», максимальная длина текста — 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;
}

openapi@tbank.ru

АО «ТБанк» использует файлы «cookie», с целью персонализации сервисов и повышения удобства пользования веб-сайтом. «Cookie» представляют собой небольшие файлы, содержащие информацию о предыдущих посещениях веб-сайта. Если вы не хотите использовать файлы «cookie», измените настройки браузера.