\`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に最適**: すぐに始められます***## API Session iframe (バックエンドあり)セッションごとのカスタマイズが必要な高度な連携向けです。### 使用する場面- セッションごとにカスタムの`vendor_data`や`metadata`を渡す - セッションごとに異なるコールバックURLを設定する - 認証開始前にサーバー側でセッションを追跡する - セッションを自社のユーザーIDと関連付ける### 実装**ステップ1: セッションを作成する (バックエンド)**セッション作成のレスポンスには**`url`**というフィールドが含まれます。これをiframeの`src`として使用してください。```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 } ```ペイロードは**ネスト**されています。`event.data.sessionId`ではなく、`event.data.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 }`、[後述](#diditlayoutでiframeのサイズを調整する)を参照)。型付きコールバックとして利用できる認証イベントは、[JavaScript SDKイベントリファレンス](https://docs.didit.me/ja/integration/web-sdks/javascript-sdk.md#イベントリファレンス)に記載されています。バージョン0.5.0以降、SDKはレイアウトメッセージを`onEvent`に転送せず、内部で処理します。### `didit:layout`でiframeのサイズを調整する検証ページは、必要な領域の大きさを`didit:layout`メッセージで通知します。このメッセージは読み込み時に1回送信され、その後もコンテンツの高さ、テーマ、テキストの方向が変わるたびに送信されます。```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'` | ページの表示テーマ。ホワイトラベルの色を使用している場合は、デバイスの設定ではなく背景色によって決まります | | `dir` | `'ltr' \| 'rtl'` | ページの言語のテキスト方向 |> [!NOTE] > > 独自のiframeで`didit:layout`を受信するには、その認証URLに`sdk_presentation=embedded`を追加してください。バージョン0.5.0以降は、[JavaScript SDK](https://docs.didit.me/ja/integration/web-sdks/javascript-sdk.md)がpresentationを自動で設定します。presentationパラメーターがない場合、ページはスタンドアロンのレイアウトを使用し、レイアウトメッセージを送信しません。このホストページは[推奨サイズ](#iframeのサイズ)に従っています。幅1024px以上では固定サイズのカード、540px以下では全画面、その中間では幅500pxでページが通知する高さを使うiframeになります。```html theme={null} ```541pxから1023pxの間では、この例はレイアウトメッセージを受け取るまで700pxの初期高さを使用し、表示中のウィンドウの高さの90%を上限とします。PC向けとスマートフォン向けのサイズ設定はすぐに適用されます。スマートフォンではiframeがウィンドウ全体を覆うため、ホスト側で認証を終了する手段を用意してください。iframeの周囲に配置するコントロールは、`colorScheme`と`dir`を使ってページのテーマとテキスト方向に合わせてください。ユーザーの接続が切れると、ページには「No internet connection」画面が表示され、接続が回復すると自動的に閉じます。ユーザーがこの画面で**Exit Verification**を選択すると、ページは`error: "network_error"`を含む`didit:error`を送信し、続いて`didit:cancelled`を送信します。`didit:cancelled`を受け取ったらiframeを閉じてください。***## モーダルの実装ページに重ねて表示する洗練されたモーダルを実装するには:### 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()} >