> ## Documentation Index
> Fetch the complete documentation index at: https://docs.didit.me/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript 本人確認SDK：Web向けKYC導入

> DiditのJavaScript SDKで、KYC・KYB・AML・生体ライブネス検知をWebにすぐ導入できます。埋め込み、リダイレクト、iframeに対応。完全なKYCチェックは$0.33から、毎月$10の無料枠付き、契約不要です。



JavaScript SDK連携プロンプト
        プロンプトをクリップボードにコピー



      
      

\<pre>

\`Integrate Didit identity verification into my web application using the JavaScript SDK.

\## Setup
Install: npm install @didit-protocol/sdk-web
Or CDN: <script src="https://unpkg.com/@didit-protocol/sdk-web/dist/didit-sdk.umd.min.js"></script>

\## Integration Flow
1\. (Option A — UniLink) Use a fixed UniLink URL from the Didit Console (no backend needed)
2\. (Option B — API session) Backend creates a session via POST /v3/session/ → 201 response includes "url"
3\. Frontend calls DiditSdk.shared.startVerification({ url }) — the SDK opens a modal (or inline if embedded mode)
4\. On completion, the SDK invokes DiditSdk.shared.onComplete(result) with type "completed" | "cancelled" | "failed"
5\. Backend receives full signed decision via webhook (status.updated)

\## Frontend Code — Vanilla JS / TypeScript
import { DiditSdk } from '@didit-protocol/sdk-web';

DiditSdk.shared.onComplete = (result) => {
switch (result.type) {
case 'completed':
  // result.session.status: "Approved" | "Pending" | "Declined"
  console.log('Done:', result.session.sessionId, result.session.status);
  break;
case 'cancelled':
  console.log('User cancelled');
  break;
case 'failed':
  console.error('Failed:', result.error.type, result.error.message);
  break;
}
};

// Modal mode (default)
DiditSdk.shared.startVerification({
url: 'https://verify.didit.me/session/SESSION_TOKEN' // from backend OR UniLink
});

// Inline / embedded mode
DiditSdk.shared.startVerification({
url: 'https://verify.didit.me/session/SESSION_TOKEN',
configuration: { embedded: true, embeddedContainerId: 'didit-container' }
});

\## Frontend Code — React
function VerifyButton({ userId }) {
const [loading, setLoading] = useState(false);

async function handleVerify() {
setLoading(true);
const res = await fetch('/api/create-session', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ user_id: userId })
});
const { url } = await res.json(); // OpenAPI field is named "url"

const { DiditSdk } = await import('@didit-protocol/sdk-web');
DiditSdk.shared.onComplete = (result) => {
  if (result.type === 'completed') {
    // update UI; final, signed result arrives on backend via webhook
  }
  setLoading(false);
};
DiditSdk.shared.startVerification({ url });
}

return <button onClick={handleVerify} disabled={loading}>Verify Identity</button>;
}

\## Backend: Create Session
POST https://verification.didit.me/v3/session/
Headers: { "x-api-key": DIDIT_API_KEY, "Content-Type": "application/json" }
Body: { "workflow_id": DIDIT_WORKFLOW_ID, "callback": "https://myapp.com/done", "vendor_data": userId }
Returns 201 (all 10 fields, per OpenAPI):
\{
"session_id": "uuid",
"session_number": 43762,
"session_token": "3FaJ9wLqX2Mz",   // 12-char URL-safe token; valid until the session expires
"url": "https://verify.didit.me/session/3FaJ9wLqX2Mz",
"vendor_data": "userId",
"metadata": null,
"status": "Not Started",
"workflow_id": "uuid",
"workflow_version": 3,
"callback": "https://myapp.com/done"
}
Pass the "url" field to DiditSdk.shared.startVerification({ url }) — never build the URL by hand.
(If the request sets "language", the URL gains a language segment: https://verify.didit.me/es/session/...)

\## SDK Surface (singleton — DiditSdk.shared)
Methods:  startVerification(options), close(), destroy()
Callbacks: onComplete(result), onStateChange(state, error?), onEvent(event)
State enum: 'idle' | 'loading' | 'ready' | 'error'

\## Rate Limits
600 session-create requests per minute per API key (falls back to bearer token, then client IP), plus a shared budget of 300 write (POST/PATCH/DELETE) requests per minute across all endpoints — the 300/min budget is exhausted first. Exceeding either returns HTTP 429 with Retry-After.

\## Environment Variables
\- DIDIT_API_KEY — backend only (Didit Console > API & Webhooks)
\- DIDIT_WORKFLOW_ID — backend only (Didit Console > Workflows)
\- Never expose the API key on the frontend — the session_token embedded in "url" is the only credential the SDK needs. It grants access to that one session's flow (valid until the session expires), so don't log or share it either.

\## Docs
\- JavaScript SDK: https://docs.didit.me/integration/web-sdks/javascript-sdk
\- Create Session API: https://docs.didit.me/sessions-api/create-session
\- Webhooks: https://docs.didit.me/integration/webhooks`

\</pre>



      
      

貼り付け先

Didit JavaScript SDKを使うと、ユーザー体験を完全に制御しながら、Webアプリケーションにプログラムで認証を組み込めます。***## 機能- **シンプルなAPI** - 使いやすいメソッドを備えたシングルトンパターン
- **柔軟な連携** - UniLink URLを直接使うことも、バックエンド経由でセッションを作成することも可能
- **レスポンシブ** - デスクトップとモバイルのブラウザで動作
- **カスタマイズ可能** - スタイルと動作を調整できる設定オプション
- **複数のフォーマット** - ESM、CommonJS、UMDのビルドを提供
- **TypeScriptサポート** - 完全な型定義を同梱
- **モーダルモードとインラインモード** - モーダルオーバーレイとインライン埋め込みから選択可能
- **イベントコールバック** - 認証の進行状況をリアルタイムで通知するイベント（開始、ステップ完了、終了）
- **状態管理** - SDKの状態を監視してカスタムUIを構築可能***## インストール### NPM/Yarn```bash theme={null}
npm install @didit-protocol/sdk-web
# or
yarn add @didit-protocol/sdk-web
```### CDN (UMD)```html theme={null}
<script src="https://unpkg.com/@didit-protocol/sdk-web/dist/didit-sdk.umd.min.js"></script>
```> [!NOTE]
>
> npmで公開されている最新リリースは`0.5.1`です。
> `0.5.0`では`DiditSdk.shared.submitEvent()`が追加されました（[イベントの送信](#イベントの送信)を参照）。`0.5.1`では、ホスト型フローがSDK内でデジタルIDウォレットにユーザーのIDを要求できるようになり、起動に失敗した場合は`errorMessage`とともに`error`状態が維持されるようになりました。
> `0.4.0`では、ネイティブSDKですでに提供されているカメラオプションが追加されました。これには、顔撮影を背面カメラで開始する`defaultLivenessCamera`も含まれます（[カメラオプション](#カメラオプション)を参照）。### インストール済みバージョンの確認インストール済みのリリースについては、引き続きパッケージマネージャーの情報が信頼できる情報源です。```bash theme={null}
npm list @didit-protocol/sdk-web
npm view @didit-protocol/sdk-web version
```ランタイムのエクスポートを確認することもできます。```typescript theme={null}
const { SDK_VERSION } = await import('@didit-protocol/sdk-web');

console.log(SDK_VERSION);
````0.3.1`以降、このエクスポートはすべてのJavaScript形式（ESM、CommonJS、UMD、minified UMD）とTypeScript宣言において、パッケージのバージョンから生成されるため、常にインストール済みのリリースと一致します。`0.3.0`以前では、インストールされているバージョンにかかわらず、このエクスポートは`0.2.1`を返します。これらのリリースでは、代わりに`npm list`またはロックファイルを使用してください。***## Vanilla JavaScript### ESモジュール / TypeScript```typescript theme={null}
import { DiditSdk } from '@didit-protocol/sdk-web';

// Set up completion callback
DiditSdk.shared.onComplete = (result) => {
  switch (result.type) {
    case 'completed':
      console.log('Verification completed!');
      console.log('Session ID:', result.session?.sessionId);
      console.log('Status:', result.session?.status);
      break;
    case 'cancelled':
      console.log('User cancelled verification');
      break;
    case 'failed':
      console.error('Verification failed:', result.error?.message);
      break;
  }
};

// Start verification with the `url` returned by POST /v3/session/ (or your UniLink)
DiditSdk.shared.startVerification({
  url: 'https://verify.didit.me/session/3FaJ9wLqX2Mz'
});
```### スクリプトタグ (UMD)```html theme={null}
<script src="https://unpkg.com/@didit-protocol/sdk-web/dist/didit-sdk.umd.min.js"></script>
<script>
  const { DiditSdk } = DiditSDK;

  DiditSdk.shared.onComplete = (result) => {
    if (result.type === 'completed') {
      alert('Verification completed: ' + result.session.status);
    }
  };

  function startVerification() {
    DiditSdk.shared.startVerification({
      // You can get this link by clicking on "copy link" in the workflows view
      url: 'https://verify.didit.me/u/WORKFLOW_ID_IN_BASE_64'
    });
  }
</script>

<button onclick="startVerification()">Verify Identity</button>
```***## フレームワーク別の例> [card] [SDK Webサンプル](https://github.com/didit-protocol/sdk-web-examples)
>
> React、Angular、Svelte、Next.js、Nuxt、Vueなど。各フレームワークのサンプルとドキュメントを掲載しています。***## 連携方法SDKの連携方法は2つあります。### 方法1: UniLink URL (最もシンプル)Didit ConsoleからワークフローのUniLink URLを直接使用します。バックエンドは不要です。```typescript theme={null}
DiditSdk.shared.startVerification({
  // You can get this link by clicking on "copy link" in the workflows view
  url: 'https://verify.didit.me/u/WORKFLOW_ID_IN_BASE_64'
});
```UniLink URLは[Didit Console](https://business.didit.me) → 対象のワークフロー → Copy Linkで取得できます。**生成されたsession\_idはイベントで通知されます。**
**[イベントリファレンスはこちら](#イベントリファレンス)**### 方法2: バックエンドセッション (本番環境で推奨)バックエンドがDidit APIでセッションを作成し、ホスト型検証ページのURLを返します。この方法では、`vendor_data`、セッションごとの`callback`、`metadata`を制御でき、ユーザーがフロントエンドに到達する前にセッションを作成できます。詳しくは[Create Session APIリファレンス](https://docs.didit.me/ja/sessions-api/create-session.md)を参照してください。**バックエンド（Node.js / Express）**```javascript theme={null}
import express from 'express';
const app = express();
app.use(express.json());

app.post('/api/create-session', async (req, res) => {
  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: req.body.userId,             // links the session to your user
      callback: 'https://yourapp.com/verified', // optional — overrides workflow default
    }),
  });

  if (!response.ok) {
    return res.status(response.status).send(await response.text());
  }

  // 201 response fields (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({ session_id: session.session_id, url: session.url });
});
```**フロントエンド**```typescript theme={null}
import { DiditSdk } from '@didit-protocol/sdk-web';

const res = await fetch('/api/create-session', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ userId: 'user-123' }),
});
const { url } = await res.json();

DiditSdk.shared.startVerification({
  url,
  configuration: {
    loggingEnabled: true,
  },
});
```> [!NOTE]
>
> セッション作成レスポンスのフィールド名は`url`です（[Create Session OpenAPIスキーマ](https://docs.didit.me/ja/sessions-api/create-session.md)を参照）。これを`startVerification({ url })`にそのまま渡してください。***## 設定| オプション | 型 | デフォルト | 説明 |
| - | - | - | - |
| `loggingEnabled` | `boolean` | `false` | デバッグ用にSDKのログを有効化 |
| `containerElement` | `HTMLElement` | `document.body` | モーダルをマウントするカスタムコンテナ要素 |
| `zIndex` | `number` | `9999` | モーダルオーバーレイのZ-index |
| `showCloseButton` | `boolean` | `true` | モーダルに閉じるボタンを表示 |
| `showExitConfirmation` | `boolean` | `true` | 閉じる際に終了確認ダイアログを表示 |
| `closeModalOnComplete` | `boolean` | `false` | 認証完了時にモーダルを自動的に閉じる |
| `embedded` | `boolean` | `false` | モーダルオーバーレイではなくインラインで認証画面を表示 |
| `embeddedContainerId` | `string` | — | 埋め込みモード用のコンテナ要素ID（`embedded`が`true`の場合は必須） |
| `defaultDocumentCamera` | `'front' \| 'back'` | `'back'` | 書類撮影で最初に開くカメラ。[カメラオプション](#カメラオプション)を参照 |
| `defaultLivenessCamera` | `'front' \| 'back'` | `'front'` | 顔（ライブネス）撮影で最初に開くカメラ。[カメラオプション](#カメラオプション)を参照 |
| `showDocumentCameraSwitchButton` | `boolean` | `true` | 書類ステップで撮影中のカメラ切り替えボタンを表示 |
| `showLivenessCameraSwitchButton` | `boolean` | `true` | ライブネスステップで撮影中のカメラ切り替えボタンを表示 |> [!TIP]
>
> `DiditSdkConfiguration`インターフェースの全体は、下記の[TypeScript型定義](#typescriptの型)を参照してください。***## カメラオプション> [!NOTE]
>
> カメラオプションを使用するには、`@didit-protocol/sdk-web`**0.4.0**以降が必要です。Web SDKは、[ネイティブSDK](https://docs.didit.me/ja/integration/native-sdks/overview.md)と同じ4つのカメラオプションを提供します。デフォルトでは、書類の撮影では背面カメラが、顔（ライブネス）の撮影では前面（セルフィー）カメラが起動します。カメラを複数備えたデバイスでは、どちらのステップでも撮影中にカメラを切り替えるボタンが表示されます。顔の撮影を背面カメラで開始するには、`defaultLivenessCamera: 'back'`を設定します。キオスク端末で使う場合や、オペレーターがデバイスを持って認証対象者に向ける場合などに使います。| オプション | 型 | デフォルト | 説明 |
| - | - | - | - |
| `defaultDocumentCamera` | `'front' \| 'back'` | `'back'` | 書類撮影画面に最初に入ったときに使用するレンズ |
| `defaultLivenessCamera` | `'front' \| 'back'` | `'front'` | ライブネス（パッシブ顔認証）撮影画面に最初に入ったときに使用するレンズ |
| `showDocumentCameraSwitchButton` | `boolean` | `true` | 書類画面で撮影中のカメラ切り替えボタンを表示します。`false`にすると、ユーザーは`defaultDocumentCamera`で固定されます |
| `showLivenessCameraSwitchButton` | `boolean` | `true` | ライブネス画面で撮影中のカメラ切り替えボタンを表示します。`false`にすると、ユーザーは`defaultLivenessCamera`で固定されます |```typescript theme={null}
// A kiosk: the operator points the device at the person, on the rear camera, with no way to switch
DiditSdk.shared.startVerification({
  url,
  configuration: {
    defaultLivenessCamera: 'back',
    showLivenessCameraSwitchButton: false
  }
});
```- 指定できるレンズの値は`'front'`と`'back'`です。それ以外の値は無視されます。ブール値ではない切り替えボタンのフラグも同様に無視されます。
- 要求されたカメラがないデバイスでは、搭載されているカメラがそのまま使われます。たとえば、`'back'`を指定されたノートPCでもWebカメラが使用されます。カメラが1台のみのデバイスでは、フラグの設定にかかわらず切り替えボタンは表示されません。
- ライブネスのオプションは、パッシブライブネスチェックに適用されます。アクティブライブネスには影響しません。
- SDKは、これらのオプションを認証URLのクエリパラメーター`document_camera`、`liveness_camera`、`document_camera_switch`、`liveness_camera_switch`として認証ページに渡します。SDKを介さずに認証URLを直接開く場合は、これらを自分で設定してください。クエリ文字列のないURLには`?liveness_camera=back`を、すでにパラメーターがあるURLには`&liveness_camera=back`を付加します。`URL` APIで設定すれば、どちらの場合にも対応できます。```typescript theme={null}
const verificationUrl = new URL(url);
verificationUrl.searchParams.set('liveness_camera', 'back');
verificationUrl.searchParams.set('liveness_camera_switch', 'false');
window.location.assign(verificationUrl.toString());
```***## イベントの送信`DiditSdk.shared.submitEvent()`は、エンドユーザーのイベント（サインアップ、ログイン、ログイン失敗、ログアウト、パスワードリセット、MFA、デバイス変更）を、Diditのイベントモニタリング用にキューに追加します。
バックエンドでその人物用のモニタリングトークンを発行すると、SDKがデバイスフィンガープリントとともにイベントをバッチで送信します。
APIキーは決してブラウザに渡さないでください。```typescript theme={null}
DiditSdk.shared.submitEvent({
  monitoringToken, // minted by your backend for this person
  event: { category: "auth", actionType: "login", payload: { method: "password" } },
});
```トークン、イベントのフィールド、配信の動作については、[SDKイベント送信](https://docs.didit.me/ja/transaction-monitoring/sdk-event-submission.md)を参照してください。***## モーダルのサイズとスクロール> [!NOTE]
>
> 以下のサイズ調整の動作には**0.3.1**以降が必要です。**0.3.0**以前では、高さの低いデスクトップや横向きのビューポートで、認証フローの一部が切れて表示されることがあります。モーダルモードの最大幅は500px、最大高さは700pxです。高さの低いデスクトップや横向きのビューポートでは、iframeは表示中のビューポートの90%に合わせて調整されます。認証フローはiframe内でスクロールします。そのため、モーダルの背後のページはロックされたまま、すべてのステップにアクセスできます。SDKは、動的ビューポート単位に対応したブラウザでは`dvh`を使用し、サポート対象の古いブラウザでは`vh`にフォールバックします。幅540px以下では、モーダルが表示中のビューポート全体に表示されます。閉じるボタンと終了確認は、モーダル内に表示されたままです。### リニューアルされた認証フロー> [!NOTE]
>
> このセクションの内容はすべてバージョン**0.5.0**から適用されますが、このバージョンはまだ公開されていません。アップグレードするまで、モーダルは上記のサイズのままです。バージョン0.5.0以降では、ページが[`didit:layout`メッセージ](https://docs.didit.me/ja/integration/web-sdks/incontext-iframe#diditlayoutでiframeのサイズを調整する)でレイアウトを通知すると、モーダルはリニューアルされた認証フローに合わせてサイズを調整します。| ウィンドウ幅 | モーダル（バージョン0.5.0以降） |
| - | - |
| 1024px以上 | すべてのステップで960px×660px。ウィンドウの幅と高さの最大90% |
| 541px〜1023px | 幅500px。高さはページのコンテンツに合わせ、ウィンドウの高さの最大90% |
| 540px以下 | 全画面 |- **初期サイズ（バージョン0.5.0以降）：** ページがレイアウトを通知するまでの間、および通知しないページでは、モーダルは従来の最大サイズである500px×700pxのままです。高さの低いウィンドウにも引き続き収まり、540px以下では全画面で表示されます。
- **閉じるボタン（バージョン0.5.0以降）：** ページのトップバーの上に表示される44pxの円形ボタンです。ページのライトテーマまたはダークテーマに合わせて表示され、右から左に書く言語では左側に移動します。
- **埋め込みモード（バージョン0.5.0以降）：** 従来どおり、ホスト要素全体に表示されます（[埋め込みモード](#埋め込みモード)を参照）。
- **認証URL（バージョン0.5.0以降）：** SDKは`sdk_presentation`（`modal`または`embedded`）を追加します。モーダルの場合は`sdk_close_button`（`showCloseButton`に従って`true`または`false`）も追加します。これにより、ページは自身がどのように表示されているかを把握できます。
- **イベント（バージョン0.5.0以降）：** SDKは`didit:layout`を自身で処理し、`onEvent`には渡しません。設定は不要で、既存のオプションはすべて引き続き機能します。***## 埋め込みモード埋め込みモードには、モーダルの500px×700pxという上限は適用されません。SDKはホスト要素のコンテンツボックス全体に表示されます。そのため、ホスト要素には明示的な高さを指定するか、ほかの方法で高さが決まるようにしてください。```html theme={null}
<div id="verification-container" style="width: 500px; height: 700px;"></div>
``````typescript theme={null}
DiditSdk.shared.startVerification({
  url: 'https://verify.didit.me/u/...',
  configuration: {
    embedded: true,
    embeddedContainerId: 'verification-container'
  }
});
```ホスト要素の高さが決まっていない場合、埋め込みiframeにも使用できる高さがありません。レイアウトが変わったときは、ホスト要素のサイズを変更してください。SDKは引き続き自動的にその要素全体に表示されます。***## 認証結果SDKは3種類の結果を返します。### 完了認証フローが終了しました(承認済み、保留中、または却下)。```typescript theme={null}
{
  type: 'completed',
  session: {
    sessionId: 'session-uuid',
    status: 'Approved' | 'Pending' | 'Declined'
  }
}
```> [!NOTE]
>
> TypeScriptの型では`'Approved' | 'Pending' | 'Declined'`と宣言されていますが、値にはホスト型フローのセッションステータスがそのまま渡されるため、`In Review`などほかのステータスを受け取る場合もあります。`Pending`は、フローからステータスが報告されなかった場合にSDKが使うフォールバック値です。`status`は目安として扱い、正式な判定には[Webhook](https://docs.didit.me/ja/integration/webhooks.md)を利用してください。### キャンセルユーザーが認証モーダルを閉じました。`sessionId`がすでに判明している場合は`session`が含まれます(iframeがセッションIDを報告する前にユーザーがキャンセルした場合は`undefined`になることがあります)。```typescript theme={null}
{
  type: 'cancelled',
  session: {
    sessionId: 'session-uuid',
    status: 'Pending'
  }
}
```### 失敗認証中にエラーが発生しました。```typescript theme={null}
{
  type: 'failed',
  error: {
    type: 'sessionExpired' | 'networkError' | 'cameraAccessDenied' | 'unknown',
    message: 'Your verification session has expired.'
  }
}
```***## 状態管理独自のUIでSDKの状態を監視できます。```typescript theme={null}
DiditSdk.shared.onStateChange = (state, error) => {
  switch (state) {
    case 'idle':
      // Ready to start
      break;
    case 'loading':
      // Loading verification iframe
      showLoadingSpinner();
      break;
    case 'ready':
      // Verification in progress
      hideLoadingSpinner();
      break;
    case 'error':
      // Error occurred
      showError(error);
      break;
  }
};

// Check current state
console.log(DiditSdk.shared.state);

// Check if verification is presented
console.log(DiditSdk.shared.isPresented);
```***## APIリファレンス### DiditSdk.sharedSDKのシングルトンインスタンスです。### メソッド| メソッド | 説明 |
| - | - |
| `startVerification(options)` | 認証フローを開始します |
| `submitEvent(options)` | モニタリングトークンを使って、イベントモニタリング用のエンドユーザーイベントをキューに追加します |
| `close()` | 認証モーダルをプログラムで閉じます |
| `destroy()` | SDKインスタンスを破棄し、クリーンアップします |### プロパティ| プロパティ | 型 | 説明 |
| - | - | - |
| `state` | `DiditSdkState` | 現在のSDKの状態 |
| `configuration` | `DiditSdkConfiguration \| undefined` | アクティブな設定（認証の進行中に設定されます） |
| `isPresented` | `boolean` | 認証モーダルが開いているかどうか |
| `errorMessage` | `string \| undefined` | エラーメッセージ(状態が`error`のときに設定されます)。起動に失敗した場合は、再度開始するまで`error`のままです |### コールバック| コールバック | パラメーター | 説明 |
| - | - | - |
| `onComplete` | `(result: VerificationResult)` | 認証が終了したときに呼び出されます |
| `onStateChange` | `(state: DiditSdkState, error?: string)` | 状態が変化したときに呼び出されます |
| `onEvent` | `(event: VerificationEvent)` | 認証の詳細なイベントごとに呼び出されます |***## 詳細なイベント`onEvent`コールバックで認証の進行状況を追跡できます。```typescript theme={null}
DiditSdk.shared.onEvent = (event) => {
  console.log('Event:', event.type, event.data);
};
```### イベントリファレンス| イベント | 説明 | データペイロード |
| - | - | - |
| `didit:ready` | ページの準備が完了し、sessionIdが利用可能になった | `{ sessionId }` |
| `didit:started` | ユーザーが認証を開始した | `{ sessionId? }` |
| `didit:step_started` | 認証ステップが開始された | `{ step, sessionId? }` |
| `didit:step_completed` | ステップが正常に完了した | `{ step, nextStep?, sessionId? }` |
| `didit:step_changed` | 現在のステップが変更された | `{ step, previousStep?, sessionId? }` |
| `didit:media_started` | カメラ・メディアのキャプチャが開始された | `{ step, mediaType }` |
| `didit:media_captured` | 写真・動画がキャプチャされた | `{ step, isAuto }` |
| `didit:document_selected` | ユーザーが書類の種類と国を選択した | `{ documentType, country }` |
| `didit:verification_submitted` | データが処理のために送信された | `{ step, sessionId? }` |
| `didit:code_sent` | OTPコードが送信された | `{ step, channel?, codeSize?, sessionId? }` |
| `didit:code_verified` | OTPコードが検証された | `{ step, sessionId? }` |
| `didit:status_updated` | セッションのステータスが変更された | `{ status, previousStep?, sessionId? }` |
| `didit:completed` | 認証フローが完了した | `{ sessionId?, status?, country?, documentType? }` |
| `didit:cancelled` | ユーザーが認証をキャンセルした | `{ sessionId? }` |
| `didit:error` | エラーが発生した | `{ error: string, step?, sessionId? }` |
| `didit:close_request` | ユーザーがモーダルを閉じるよう要求した | (データなし) |### 接続が切れた場合ユーザーの接続が切断されると、検証ページはステップを読み込み中のままにせず、フロー上に「No internet connection」画面を表示します。
バックグラウンドで確認を続け、Didit に再び接続できるようになるとすぐにこの画面を自動的に閉じます。ユーザーは中断したステップから続行できます。
SDKのモーダルまたはiframe内では、この画面に**Exit Verification**も表示されます。これを選択すると、ページは`error: "network_error"`を含む`didit:error`を送信し、続いて`didit:cancelled`を送信します。SDKはモーダルを閉じ、`type: "cancelled"`で`onComplete`を呼び出します。バージョン0.5.0以降、ページの`didit:layout`メッセージはモーダルのサイズを調整するもので、`onEvent`には届きません。代わりに独自のiframeでページを埋め込む場合は、[`didit:layout`でiframeのサイズを設定する](https://docs.didit.me/ja/integration/web-sdks/incontext-iframe#diditlayoutでiframeのサイズを調整する)を参照してください。### ステップの値`step`フィールドには次のいずれかが入ります。- `document_selection` - 書類の種類の選択
- `document_front` - 書類の表面
- `document_back` - 書類の裏面
- `face` - 顔・ライブネス検証
- `email` - メールアドレス認証
- `phone` - 電話番号検証
- `poa` - 住所証明
- `questionnaire` - アンケートのステップ### チャネルの値`code_sent`の`channel`フィールドには次の値が入ります。- `email` - メールでコードを送信
- `sms` - SMSでコードを送信
- `whatsapp` - WhatsAppでコードを送信### コードの長さ`code_sent`の`codeSize`フィールドはOTPコードの桁数(例: 4桁または6桁)を示します。***## TypeScriptの型```typescript theme={null}
// Configuration types
interface DiditSdkConfiguration {
  /**
   * Enable SDK logging for debugging
   * @default false
   */
  loggingEnabled?: boolean;

  /**
   * Custom container element to mount the modal
   * @default document.body
   */
  containerElement?: HTMLElement;

  /**
   * Z-index for the modal overlay
   * @default 9999
   */
  zIndex?: number;

  /**
   * Show close button on modal
   * @default true
   */
  showCloseButton?: boolean;

  /**
   * Show exit confirmation dialog when closing
   * @default true
   */
  showExitConfirmation?: boolean;

  /**
   * Automatically close modal when verification completes
   * @default false
   */
  closeModalOnComplete?: boolean;

  /**
   * Render verification inline instead of modal overlay
   * @default false
   */
  embedded?: boolean;

  /**
   * Container element ID for embedded mode
   * Required when embedded is true
   */
  embeddedContainerId?: string;

  /**
   * Camera the document capture opens first.
   * @default 'back'
   */
  defaultDocumentCamera?: CameraLens;

  /**
   * Camera the face (liveness) capture opens first.
   * Applies to passive liveness; devices without a rear camera keep the front one.
   * @default 'front'
   */
  defaultLivenessCamera?: CameraLens;

  /**
   * Show the in-capture camera switcher on the document step.
   * false locks the user to defaultDocumentCamera.
   * @default true
   */
  showDocumentCameraSwitchButton?: boolean;

  /**
   * Show the in-capture camera switcher on the liveness step.
   * false locks the user to defaultLivenessCamera.
   * @default true
   */
  showLivenessCameraSwitchButton?: boolean;
}

type CameraLens = 'front' | 'back';

// Session + error types
type VerificationStatus = 'Approved' | 'Pending' | 'Declined';

interface SessionData {
  sessionId: string;
  status: VerificationStatus;
}

type VerificationErrorType =
  | 'sessionExpired'
  | 'networkError'
  | 'cameraAccessDenied'
  | 'unknown';

interface VerificationError {
  type: VerificationErrorType;
  message: string;
}

// Verification result — `session` and `error` are both optional fields
// on every result; which one is populated depends on `type`.
type VerificationResultType = 'completed' | 'cancelled' | 'failed';

interface VerificationResult {
  type: VerificationResultType;
  session?: SessionData;
  error?: VerificationError;
}

// State types
type DiditSdkState = 'idle' | 'loading' | 'ready' | 'error';

// Event types
type VerificationEventType =
  | 'didit:ready'
  | 'didit:started'
  | 'didit:step_started'
  | 'didit:step_completed'
  | 'didit:step_changed'
  | 'didit:media_started'
  | 'didit:media_captured'
  | 'didit:document_selected'
  | 'didit:verification_submitted'
  | 'didit:code_sent'
  | 'didit:code_verified'
  | 'didit:status_updated'
  | 'didit:completed'
  | 'didit:cancelled'
  | 'didit:error'
  | 'didit:close_request';

interface VerificationEventData {
  sessionId?: string;
  status?: string;
  step?: string;
  nextStep?: string;
  previousStep?: string;
  error?: string;
  country?: string;
  documentType?: string;
  isAuto?: boolean;
  mediaType?: string;
  channel?: string;
  codeSize?: number;
  [key: string]: unknown;
}

interface VerificationEvent {
  type: VerificationEventType;
  data?: VerificationEventData;
  timestamp?: number;
}

// Start verification options
interface StartVerificationOptions {
  url: string;
  configuration?: DiditSdkConfiguration;
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.