Web (iframe / WebSDK)

Интеграция модуля идентификации в веб-приложение может быть выполнена двумя способами:

Когда использовать

Используйте web-интеграцию, если пользователь проходит KYC-сценарий на сайте или в веб-приложении клиента. iframe подходит для быстрого встраивания готового модуля, WebSDK — когда нужно больше контроля над поведением и интеграцией с фронтендом.

iframe — встраивание модуля через iframe
WebSDK — интеграция через JavaScript SDK

iframe интеграция

Базовое использование

Модуль идентификации можно встроить в ваше веб-приложение через iframe:

<iframe 
  src="https://rim.idscan.mts.ru/l/{identificationUrl}" 
  width="100%" 
  height="600px"
  frameborder="0">
</iframe>

Где {identificationUrl} — URL, полученный при создании заявки через API.

PostMessage интерфейс

При использовании iframe, по завершению сценария сбора данных заявителя на фронте придет PostMessage:

{
  app: 'rim',
  method: 'flowFinished',
  context: 'biometrics'
}

Параметры PostMessage

Атрибут	Описание
app	Источник сообщения. Всегда принимает значение “rim”
method	Результат работы iframe. На данном этапе принимает значение `flowFinished`, сообщающее о прохождении этапа сбора данных
context	Подробности о результате работы. Может принимать одно из значений в зависимости от выбранного способа идентификации: – `biometrics` — получение данных через распознавание – `mobileid` — получение данных через Mobile ID – `manual` — ручной ввод данных

Пример обработки PostMessage

window.addEventListener('message', function(event) {
  // Проверяем источник сообщения
  if (event.origin !== 'https://rim.idscan.mts.ru') {
    return;
  }

  const { app, method, context } = event.data;

  if (app === 'rim' && method === 'flowFinished') {
    console.log('Идентификация завершена:', context);

    // Получаем результаты через API
    fetchIdentificationResults(identificationId);
  }
});

Подробнее см. API: Callback / PostMessage.

WebSDK интеграция

Подключение WebSDK

<script src="https://rim.idscan.mts.ru/sdk/web-sdk.js"></script>

Инициализация

const sdk = new MTSKYCWebSDK({
  identificationUrl: 'https://rim.idscan.mts.ru/l/{identificationUrl}',
  container: document.getElementById('kyc-container'),
  onSuccess: function(result) {
    console.log('Идентификация успешна:', result);
  },
  onError: function(error) {
    console.error('Ошибка идентификации:', error);
  }
});

// Запуск процесса идентификации
sdk.start();

Параметры конфигурации

При создании заявки через API можно настроить параметры для WebSDK:

linkLifetimeInMinutes — время жизни ссылки (1..195 минут, по умолчанию 195)
redirectUrl — URL для перенаправления после завершения идентификации
themeUI — тема оформления (light/dark)

Кастомизация

WebSDK поддерживает кастомизацию интерфейса через параметры конфигурации:

Визуальные параметры (цвета, шрифты, изображения)
Параметры логики приложения
Переводы текстов (i18n)

Подробнее см. раздел Кастомизация интерфейса.

Безопасность

Используйте HTTPS для всех запросов
Проверяйте origin в PostMessage событиях
Валидируйте данные, полученные от модуля
Не передавайте токены доступа на фронтенд

Пример полной интеграции

<!DOCTYPE html>
<html>
<head>
  <title>KYC Integration</title>
</head>
<body>
  <div id="kyc-container"></div>

  <script>
    // Получаем identificationUrl после создания заявки
    const identificationUrl = 'YOUR_IDENTIFICATION_URL';

    // Обработка PostMessage
    window.addEventListener('message', function(event) {
      if (event.origin !== 'https://rim.idscan.mts.ru') {
        return;
      }

      const { app, method, context } = event.data;

      if (app === 'rim' && method === 'flowFinished') {
        alert('Идентификация завершена: ' + context);
        // Получаем результаты через API
      }
    });

    // Создание iframe
    const iframe = document.createElement('iframe');
    iframe.src = `https://rim.idscan.mts.ru/l/${identificationUrl}`;
    iframe.width = '100%';
    iframe.height = '600px';
    iframe.frameBorder = '0';
    document.getElementById('kyc-container').appendChild(iframe);
  </script>
</body>
</html>