Tinkoff ID Widget White Label
Бизнес описание продукта.
Описание продукта.
Widget White Label от Tinkoff ID — это скрипт, который на сайте партнёра, в его интерфейсе и дизайне окна авторизации, отслеживает ввод номера телефона пользователя, а затем направляет его на авторизацию с помощью технологии Tinkoff ID, направляя ему брендированную СМС от имени партнёра или от Tinkoff ID с кодом авторизации.
Основные преимущества продукта заключаются в следующем:
- Партнёру не требуется фронт разработка, так как решение подключается одной библиотекой;
- Обезличенный дизайн формы ввода ОТП;
- Возможность автозаполнять данные по клиентам банка в системе партнёра.
Экранные формы для ознакомления доступны по ссылке
Сценарий использования.
Партнёр ищет возможность минимизации затрат на отправляемые СМС уведомления, ускорения регистрации пользователя в своих системах, возможные пути увеличения конверсии, продвижения торговой марки, пути для маркетинговых активностей, интегрируя данное решение на своей стороне, партнёр получает возможность в реализации любого из описанных сценариев, а так же дополнительно расширять их, дополнительно подключая сервисы идентификации, платёжного решения, платежей долями.
Техническое описание продукта.
Принцип работы
По нажатию на кнопку (например "Войти") виджет перехватит событие формы с введенным номером телефона. Далее появится форма Tinkoff ID с вводом кода, который получил пользователь по указанному номеру телефона.
Подключение библиотеки на сайте
Для подключения на сайте необходимо вставить в блок head следующий скрипт:
<script src="https://business.cdn-tinkoff.ru/static/projects/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://business.cdn-tinkoff.ru/static/projects/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',
scopeParameters: '',
clientId: 'XXXX',
state: 'XXXX'
});
tidSdk.addWL({
target: '_blank',
input: '#phone-input',
actionElement: '#login-form'
});
</script>
</body>
</html>
Описание параметров
Auth Params
- redirectUri
string
- Uri, на который будет перенаправлен клиент после завершения авторизационного диалога - responseType
string
- Определяет какой авторизационный процесс будет запущен и какие параметры будут переданы по завершению авторизации - scopeParameters
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