> ## 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.

# Web向け本人確認SDK: JavaScriptとiframe

> Didit の Web SDK は KYC、KYB、AML、生体ライブネスに対応。JavaScript、iframe、リダイレクト、WebView を選べます。フル KYC は1回$0.33から、毎月$10無料、契約不要。

> [!NOTE]
>
> これらのガイドは本人確認を対象としています。エンドユーザーのサインインについては、[認証プラットフォームのガイド](https://docs.didit.me/authentication/overview.md) をご利用ください。新しい認証パッケージはリリース時期に依存します。

Didit の本人確認を Web アプリケーションに組み込みます。アーキテクチャとユーザー体験の要件に合わせて、7つの連携方法を用意しています。スタックに合うものを選んでください。

> [!NOTE]
>
> **連携方法を選ぶ**: ノーコードですぐ使える iframe から、JavaScript SDK による完全なプログラム制御、WordPress、Shopify、Salesforce 向けのドロップインのプラグインまで揃っています。

***

## 連携方法

| 方法 | セットアップ時間 | バックエンド | 最適な用途 |
| - | - | - | - |
| [JavaScript SDK](https://docs.didit.me/integration/web-sdks/javascript-sdk.md) | 3分 | 任意 | 完全な制御 - React/Vue/Angular/Next.js/Nuxt/Svelte/素の JavaScript |
| [InContext (Iframe)](https://docs.didit.me/integration/web-sdks/incontext-iframe.md) | \< 1分 | 任意 | リダイレクトなしの組み込み体験 |
| [リダイレクト](https://docs.didit.me/integration/web-sdks/web-redirect.md) | 5分 | 必要 | 最大限の互換性、クロスデバイスのフロー |
| [WebView (iOS/Android)](https://docs.didit.me/integration/web-sdks/webview-in-ios-android.md) | 15分 | 必要 | ネイティブ SDK が使えない場合のモバイル向けフォールバック |
| [WordPress + WooCommerce](https://docs.didit.me/integration/web-sdks/wordpress-woocommerce.md) | 5分 | ノーコード | WordPress サイト、WooCommerce ストア |
| [Shopify](https://docs.didit.me/integration/web-sdks/shopify.md) | 5分 | ノーコード | Shopify ストア - チェックアウト時またはアカウントの確認 |
| [Salesforce](https://docs.didit.me/integration/web-sdks/salesforce.md) | 10分 | ノーコード | Salesforce CRM - 取引先責任者/リードのレコードの確認 |

> [!NOTE]
>
> **推奨**: 本番の Web アプリでは、最良の UX と完全なプログラム制御のために **JavaScript SDK** を使用してください。最短でセットアップするなら **InContext iframe**、クロスデバイスの確認が必要なら **リダイレクト**、WordPress、Shopify、Salesforce をお使いなら専用の **WordPress / Shopify / Salesforce** 連携が適しています。

***

## JavaScript SDK

Didit の JavaScript SDK は、ユーザー体験を完全に制御しながら、プログラムで確認を組み込む方法を提供します。

**主な機能:**

* セッション管理とイベントコールバック
* React、Vue、Angular、NextJS、Nuxt、Svelte、素の JavaScript に対応
* TypeScript に完全対応
* モーダルとインラインのモード

**クイックスタート:**

```javascript theme={null}
import { DiditSdk } from '@didit-protocol/sdk-web';

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'
});
```

→ [**JavaScript SDK の完全なドキュメント**](https://docs.didit.me/integration/web-sdks/javascript-sdk.md)

***

## InContext (Iframe)

iframe を使って、確認フローをアプリケーションの中に直接埋め込みます。ユーザーをサイトの外にリダイレクトすることなく、シームレスな体験を提供します。

**主な機能:**

* UniLink (バックエンド不要) - 1分未満でセットアップ
* API セッション (バックエンドあり) - 完全なカスタマイズ
* モーダルとインラインの実装
* React コンポーネントの例

**クイックスタート:**

```html theme={null}
<iframe 
  src="https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64"
  style="width: 100%; height: 700px; border: none;" 
  allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media"
></iframe>
```

→ [**InContext の完全なドキュメント**](https://docs.didit.me/integration/web-sdks/incontext-iframe.md)

***

## リダイレクト

ユーザーを Didit がホストする確認ページにリダイレクトします。完了後、ユーザーはコールバック URL に戻ります。

**主な機能:**

* 最大限のブラウザ互換性
* クロスデバイスの確認に対応
* シンプルな連携
* iframe でのカメラアクセスに問題がある場合にも動作

**クイックスタート:**

```javascript theme={null}
// After creating a session via your backend
window.location.href = verificationUrl;
```

→ [**リダイレクトの完全なドキュメント**](https://docs.didit.me/integration/web-sdks/web-redirect.md)

***

## 比較

| 機能 | JavaScript SDK | InContext (Iframe) | リダイレクト |
| - | - | - | - |
| セットアップ時間 | 3分 | \< 1分 | 5分 |
| バックエンドの要否 | 任意 | 任意 | 必要 |
| 自社ドメインに留まる | はい | はい | いいえ |
| クロスデバイス対応 | はい | はい | はい |
| 完全なプログラム制御 | はい | 限定的 | コールバックのみ |
| イベントコールバック | リアルタイム | `postMessage` | コールバックのみ |
| ホワイトラベル | はい | はい | はい |
| ブラウザ互換性 | すべて | すべて | すべて |

> [!NOTE]
>
> 3つの方法はいずれも、署名付きの最終結果を [Webhook](https://docs.didit.me/integration/webhooks.md) で届けます。上の比較は、ブラウザ上での UX を説明したものであり、確認結果の受け取り方を説明したものではありません。

***

## 設定

### 必須の iframe 権限

InContext iframe の連携では、必ず次の権限を含めてください。

```html theme={null}
allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media"
```

***

## サンプルリポジトリ

> **[SDK Web のサンプル](https://github.com/didit-protocol/sdk-web-examples)**
>
> React、Vue、Angular、Next.js、Nuxt、Svelte、素の JavaScript のサンプル

> **[Iframe のサンプル](https://github.com/didit-protocol/iframe-example)**
>
> UniLink と API セッションの iframe のサンプル

> **[Next.js の完全なデモ](https://github.com/didit-protocol/didit-full-demo)**
>
> エンドツーエンドの Next.js 連携

> **[NPM パッケージ](https://www.npmjs.com/package/@didit-protocol/sdk-web)**
>
> npm 上の `@didit-protocol/sdk-web`

## 関連情報

* [Webhook](https://docs.didit.me/integration/webhooks.md) - 署名付きの確認結果をバックエンドで受け取ります
* [セッション作成API](https://docs.didit.me/sessions-api/create-session.md) - すべての Web SDK の背後にあるエンドポイント
* [ネイティブ SDK](https://docs.didit.me/ja/integration/native-sdks/overview.md) - iOS、Android、React Native、Flutter


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