\`Embed Didit identity verification into my web page using an iframe. \## Two Options \### Option A: UniLink (no backend — fastest setup) Copy your UniLink URL from Didit Console > Workflows > Copy Link. It looks like: https://verify.didit.me/u/ Embed it directly: \ ```> ⚠️ **Обязательно**: атрибут `allow` обязателен для доступа к камере во время проверки живости.### Ключевые преимущества- **Настройка менее чем за 1 минуту**: без бэкенда и без API-ключей - **Нулевая конфигурация**: URL обратного вызова задается в настройках сценария - **Идеально для MVP**: начните работу немедленно***## Iframe API-сессии (с бэкендом)Для продвинутых интеграций, которым нужна настройка на уровне каждой сессии.### Когда использовать- Передавать пользовательские `vendor_data` или `metadata` для каждой сессии - Задавать разные URL обратного вызова для каждой сессии - Отслеживать сессии на стороне сервера до начала верификации - Связывать сессии с вашими идентификаторами пользователей### Реализация**Шаг 1: создайте сессию (бэкенд)**В ответе на создание сессии есть поле **`url`**: используйте его как `src` для iframe.```javascript theme={null} // Node.js / Express app.post('/api/create-verification', async (req, res) => { const { userId } = req.body; const response = await fetch('https://verification.didit.me/v3/session/', { method: 'POST', headers: { 'x-api-key': process.env.DIDIT_API_KEY, 'Content-Type': 'application/json', }, body: JSON.stringify({ workflow_id: process.env.DIDIT_WORKFLOW_ID, vendor_data: userId, callback: 'https://yourapp.com/verification-callback', metadata: { source: 'web-app', timestamp: Date.now() }, }), }); if (!response.ok) { return res.status(response.status).send(await response.text()); } // 201 per OpenAPI: { session_id, session_number, session_token, url, vendor_data, // metadata, status, workflow_id, workflow_version, callback } const session = await response.json(); res.json({ sessionId: session.session_id, verificationUrl: session.url }); }); ```**Шаг 2: встройте в iframe (фронтенд)**```html theme={null} ```***## Прослушивание событий (postMessage)Страница верификации отправляет события родительскому окну. Каждое сообщение имеет такую оболочку:```typescript theme={null} { type: 'didit:', // e.g. 'didit:completed' data: { /* payload */ }, // event-specific; may be undefined timestamp: 1718000000000 // ms epoch } ```Payload **вложен**: читайте `event.data.data.sessionId`, а не `event.data.sessionId`:```javascript theme={null} window.addEventListener('message', (event) => { // Use your white-label domain here if you have one configured if (event.origin !== 'https://verify.didit.me') return; const { type, data } = event.data || {}; if (type === 'didit:ready') { console.log('Session ID:', data.sessionId); // available as soon as the page loads } if (type === 'didit:completed') { console.log('Done:', data.sessionId, data.status); // e.g. "Approved" | "Declined" | "In Review" // UI hint only — the canonical decision arrives on your backend via webhook } }); ```Основные события: `didit:ready` (`{ sessionId }`), `didit:started`, `didit:step_started` / `didit:step_completed` / `didit:step_changed` (`{ step, ... }`), `didit:status_updated` (`{ status }`), `didit:completed` (`{ sessionId, status }`), `didit:cancelled`, `didit:error` (`{ error, step? }`), `didit:close_request` и `didit:layout` (`{ contentHeight, colorScheme, dir }`, см. [ниже](#задайте-размер-iframe-по-diditlayout)). В [справочнике событий JavaScript SDK](https://docs.didit.me/ru/integration/web-sdks/javascript-sdk.md#справочник-событий) перечислены события верификации, доступные как типизированные callback-функции. Начиная с версии 0.5.0, SDK самостоятельно обрабатывает сообщения о макете и не передает их в `onEvent`.### Задайте размер iframe по `didit:layout`Страница верификации сообщает, сколько места ей нужно, с помощью сообщения `didit:layout`. Она отправляет его при загрузке и каждый раз, когда меняются высота содержимого, тема или направление текста:```typescript theme={null} { type: 'didit:layout', data: { contentHeight: 612, // CSS px colorScheme: 'light', // 'light' | 'dark' dir: 'ltr' // 'ltr' | 'rtl' }, timestamp: 1718000000000 } ```| Поле | Тип | Описание | | - | - | - | | `contentHeight` | `number` | Естественная высота содержимого страницы в CSS-пикселях, включая верхнюю панель | | `colorScheme` | `'light' \| 'dark'` | Тема, в которой отображается страница. При использовании цветов White label тему определяет цвет вашего фона, а не настройка устройства | | `dir` | `'ltr' \| 'rtl'` | Направление текста языка страницы |> [!NOTE] > > Чтобы получать `didit:layout` в вашем iframe, добавьте `sdk_presentation=embedded` к URL верификации. Начиная с версии 0.5.0, [JavaScript SDK](https://docs.didit.me/ru/integration/web-sdks/javascript-sdk.md) устанавливает этот параметр за вас. Без параметра presentation страница использует автономный макет и не отправляет сообщения о макете.Этот хост следует [рекомендуемым размерам](#размер-iframe): фиксированная карточка при ширине окна от 1024 px, полноэкранный режим при 540px и меньше, а между ними iframe шириной 500px, высота которого соответствует высоте, которую сообщает страница:```html theme={null} ```Для диапазона от 541px до 1023px этот пример использует начальную высоту 700px до получения сообщения о макете, но не более 90% высоты видимой области окна. Размеры для компьютера и телефона применяются сразу. На телефонах iframe занимает всё окно, поэтому предусмотрите в вашем приложении способ выйти из верификации. Используйте `colorScheme` и `dir`, чтобы согласовать элементы управления вокруг iframe с темой и направлением текста страницы.Если соединение пользователя пропадает, страница показывает экран «Нет подключения к интернету», который закрывается сам, как только соединение восстанавливается. Если пользователь выбирает **Exit Verification** на этом экране, страница отправляет `didit:error` с `error: "network_error"`, а затем `didit:cancelled`: закрывайте iframe по событию `didit:cancelled`.***## Реализация модального окнаДля аккуратного модального окна поверх вашей страницы:### HTML/CSS/JS```html theme={null} ```***## Компонент ReactМногоразовый React-компонент для верификации в модальном окне:```tsx theme={null} import { useState, useEffect } from 'react'; interface DiditInContextProps { /** * Either the `url` returned by POST /v3/session/ (API session) * or your UniLink URL copied from the Console (Workflows → Copy Link). * Don't derive the UniLink yourself — the path segment is a 22-character * base64url encoding of the workflow UUID's raw bytes, not btoa(workflowId). */ verificationUrl: string; isOpen: boolean; onClose: () => void; onComplete?: (sessionId: string, status: string) => void; } export function DiditInContext({ verificationUrl, isOpen, onClose, onComplete }: DiditInContextProps) { const [iframeSrc, setIframeSrc] = useState(''); useEffect(() => { if (isOpen) { setIframeSrc(verificationUrl); document.body.style.overflow = 'hidden'; } else { setIframeSrc(''); document.body.style.overflow = ''; } }, [isOpen, verificationUrl]); // Listen for postMessage from iframe // Messages look like: { type: 'didit:', data: {...}, timestamp } useEffect(() => { const handleMessage = (event: MessageEvent) => { // Use your white-label domain here if you have one configured if (event.origin !== 'https://verify.didit.me') return; if (event.data?.type === 'didit:completed' && onComplete) { onComplete(event.data.data?.sessionId, event.data.data?.status); onClose(); } }; window.addEventListener('message', handleMessage); return () => window.removeEventListener('message', handleMessage); }, [onComplete, onClose]); // Handle escape key useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === 'Escape' && isOpen) onClose(); }; document.addEventListener('keydown', handleEscape); return () => document.removeEventListener('keydown', handleEscape); }, [isOpen, onClose]); if (!isOpen) return null; return (

e.target === e.currentTarget && onClose()} >