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, в остальных случаях будет использоваться авторизация партнёра.