T-ID Widget Button
Бизнес-описание продукта
T‑ID Widget Button — это кнопка, которая встраивается на сайт партнера одной строчкой кода.
Преимущества:
- Не нужно разрабатывать механизм авторизации на frontend.
- Не нужно верстать кнопку.
- Партнер легко выполняет настройку дизайна кнопки с учетом строгих требований к стайлгайдам банка.
- Партнер может получать данные по аналитике виджета: нажатие на кнопку, прохождение форм авторизации, время затраченное на авторизацию и другие данные, которые банк отслеживает на своей стороне.
Рекомендации по интеграции T‑ID
Сценарий использования
Партнер реализует интеграцию с банками на своем сайте в части авторизации клиентов для ускорения и упрощения их пути от входа до получения сервиса или покупки.
T‑ID полностью закрывает эту потребность и предлагает конкурентное преимущество, так как продукт частично разработан на стороне банка.
Техническое описание продукта
Рекомендации по интеграции T‑ID
Перед добавлением кнопки на сайт, ознакомьтесь с рекомендациями по интеграции 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;
}