Перейти к содержанию

Интеграция через виджет

Самый простой способ — встраиваемый веб-компонент <session-widget>. Добавляется на страницу одним <script> тегом, не требует бэкенда с вашей стороны.

Быстрый старт

<script src="https://sessions-widget.explorer.debex.ru/main.js" type="module"></script>

<session-widget
  flow-id="ID_ПРОЦЕССА"
  autostart
></session-widget>

Виджет сам загрузит шрифты и стили — никаких дополнительных зависимостей не нужно.

Полный пример

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Интеграция с DEBEX</title>
</head>
<body>

<script src="https://sessions-widget.explorer.debex.ru/main.js" type="module"></script>

<session-widget
  style="max-width: 500px; display: block; margin: 0 auto;"
  flow-id="b3f70e2e-ed61-4145-a2ed-f69a459a8934"
  webhook-url="https://example.com/webhook"
  webhook-events='["session_completed", "session_failed"]'
  show-cookies="true"
  autostart
></session-widget>

<script>
  const widget = document.querySelector('session-widget');

  widget.addEventListener('sessionStarted', (e) => {
    console.log('Сессия создана:', e.detail.session_id);
    console.log('Токен:', e.detail.token);
  });

  widget.addEventListener('sessionUpdated', (e) => {
    console.log('Текущий шаг:', e.detail.step_name);
  });

  widget.addEventListener('sessionCompleted', (e) => {
    console.log('Готово! Cookies:', e.detail.cookies);
  });
</script>

</body>
</html>

Атрибуты

Атрибут Тип По умолчанию Описание
flow-id string "" ID процесса. Если указан — сразу выбирает процесс
token string "" JWT-токен существующей сессии. Если указан — открывает эту сессию
autostart boolean false Автоматически запустить сессию (если все параметры валидны)
show-cookies boolean false Показать cookies в UI после завершения
show-process-inputs boolean true Показать выбор процесса. Включается автоматически, если flow-id невалиден
show-webhook-inputs boolean true Показать настройку вебхуков
webhook-url string "" URL для вебхуков (должен начинаться с https://)
webhook-events JSON [] Список событий для вебхуков, например '["session_completed"]'

События

Виджет выбрасывает три CustomEvent, на которые можно подписаться через addEventListener:

sessionStarted

Сессия создана, процесс запущен.

widget.addEventListener('sessionStarted', (e) => {
  e.detail.session_id     // ID сессии
  e.detail.token          // JWT-токен для доступа к сессии
  e.detail.webhook_secret // Секрет для верификации вебхуков (HMAC-SHA256)
  e.detail.flow_name      // Название процесса
});

sessionUpdated

Состояние сессии изменилось (смена шага, отправка формы).

widget.addEventListener('sessionUpdated', (e) => {
  e.detail.step_name       // Название текущего шага
  e.detail.step_description // Описание шага
  e.detail.elements        // Элементы формы (см. ниже)
  e.detail.is_failed       // true, если шаг не удался
});

sessionCompleted

Сессия завершена успешно, cookies получены.

widget.addEventListener('sessionCompleted', (e) => {
  e.detail.cookies         // Массив cookies
  e.detail.is_completed    // true
});

{
  "name": "auth_token",
  "value": "abc123...",
  "domain": ".mos.ru",
  "path": "/",
  "expires": 1735689600,
  "http_only": true,
  "secure": true,
  "same_site": "Lax"
}

Элементы формы

Каждый шаг содержит массив elements — полей, которые виджет отображает пользователю:

Тип Описание
input Текстовое поле (логин, пароль и т.д.)
select Выпадающий список
input_combined Мультисимвольный ввод (OTP-код)
error Сообщение об ошибке
info Информационное сообщение 
{
  "code": "login",
  "type": "input",
  "name": "Логин",
  "value": "",
  "is_masked": false
}