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

T-ID Widget White Label

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

Widget White Label от TID — это скрипт на сайте партнера, в его интерфейсе и дизайне окна авторизации, который отслеживает ввод номера телефона пользователя и направляет его на авторизацию через TID, направляя ему брендированную СМС от имени партнера или от TID с кодом авторизации.

Основные преимущества продукта:

  1. Партнеру не требуется фронт-разработка, так как решение подключается одной библиотекой.
  2. Обезличенный дизайн формы ввода ОТП.
  3. Возможность автозаполнения данных по клиентам банка в системе партнера.

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

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

Интегрируя это решение на своей стороне, партнер получает возможность реализации любого из описанных сценариев и их расширение, дополнительно подключая сервисы идентификации, платежного решения или платежей Долями.

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

Принцип работы

  1. Виджет перехватывает событие формы с введенным номером телефона при нажатии на кнопку — например, Войти.
  2. Открывается форма TID с вводом кода, который пользователь получил по указанному номеру телефона.

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

Чтобы подключить TID Widget White Label на сайте, в блоке head вставьте следующий скрипт:

<script src="https://sso-forms-prod.cdn-tinkoff.ru/tinkoff-id/widget.js"></script>

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

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>

<script src="https://sso-forms-prod.cdn-tinkoff.ru/tinkoff-id/widget.js"></script>
</head>
<body>
<form id="login-form">
<input type="text" name="phone" id="phone-input">
<button type="submit" id="login-button">Войти</button>
</form>

<script>
const tidSdk = new TidSDK({
redirectUri: 'https://mysite.ru/auth/success',
responseType: 'code',
clientId: 'XXXX',
state: 'XXXX'
});

tidSdk.addWL({
target: '_blank',
input: '#phone-input',
actionElement: '#login-form'
});
</script>
</body>
</html>

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

Auth Params

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

UI Params

  • input string | HTMLInputElement — input элемент, в котором содержится номер телефона. Примеры: #input.input или сам элемент.
  • actionElement string | HTMLElement — необязательный параметр. Если параметр не передан, событие повесится на элемент из параметра input. Элемент, на который вешается событие отправки номера телефона. Если форма передана, повесится событие submit, в ином случае — click.
  • target _parent | _self | _blank | _top — необязательный параметр, по умолчанию — _blank. Определяет, в каком окне будет открываться форма авторизации. Если вам нужно открывать окно вместо текущей вкладки, используйте _self.
  • redirectUri string — необязательный параметр. В случае, если redirectUri зависит от страницы, на которой находится пользователь, при вызове метода addWL можно передать новый redirectUri.
  • percentageAuth number — необязательный параметр, по умолчанию percentageAuth = 5. Добавляет вероятноть появления сценария white-label. Например, если percentageAuth = 5, с вероятностью 5% будет включаться white-label, в остальных случаях будет использоваться авторизация партнера.

openapi@tbank.ru

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