T-ID Widget White Label
Бизнес-описание продукта
Widget White Label от T‑ID — это скрипт на сайте партнера, в его интерфейсе и дизайне окна авторизации, который отслеживает ввод номера телефона пользователя и направляет его на авторизацию через T‑ID, направляя ему брендированную СМС от имени партнера или от T‑ID с кодом авторизации.
Основные преимущества продукта:
- Партнеру не требуется фронт-разработка, так как решение подключается одной библиотекой.
- Обезличенный дизайн формы ввода ОТП.
- Возможность автозаполнения данных по клиентам банка в системе партнера.
Сценарий использования
Партнер хочет минимизировать затраты на отправляемые СМС-уведомления, ускорить регистрацию пользователя в своих системах, увеличить конверсию, продвинуть торговую марку и найти пути для маркетинговых активностей.
Интегрируя это решение на своей стороне, партнер получает возможность реализации любого из описанных сценариев и их расширение, дополнительно подключая сервисы идентификации, платежного решения или платежей Долями.
Техническое описание продукта
Принцип работы
- Виджет перехватывает событие формы с введенным номером телефона при нажатии на кнопку — например, Войти.
- Открывается форма T‑ID с вводом кода, который пользователь получил по указанному номеру телефона.
Подключение библиотеки на сайте
Чтобы подключить T‑ID 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, в остальных случаях будет использоваться авторизация партнера.