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

Описание продукта.

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

Tinkoff ID Widget White Label