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

これらのガイドは本人確認を対象としています。エンドユーザーのサインインについては、認証プラットフォームのガイドをご利用ください。新しい認証パッケージはリリース時期に依存します。

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

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

連携方法

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

推奨: 本番の 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 に完全対応
モーダルとインラインのモード

クイックスタート:

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 の完全なドキュメント

InContext (Iframe)

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

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

クイックスタート:

<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 の完全なドキュメント

リダイレクト

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

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

クイックスタート:

// After creating a session via your backend
window.location.href = verificationUrl;

→ リダイレクトの完全なドキュメント

比較

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

3つの方法はいずれも、署名付きの最終結果を Webhook で届けます。上の比較は、ブラウザ上での UX を説明したものであり、確認結果の受け取り方を説明したものではありません。

設定

必須の iframe 権限

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

allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media"

サンプルリポジトリ

SDK Web のサンプル

React、Vue、Angular、Next.js、Nuxt、Svelte、素の JavaScript のサンプル

Iframe のサンプル

UniLink と API セッションの iframe のサンプル

Next.js の完全なデモ

エンドツーエンドの Next.js 連携

NPM パッケージ

npm 上の @didit-protocol/sdk-web

ガイド

Model Context Protocol (MCP)

Web SDK

ネイティブSDK

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

連携方法

JavaScript SDK

InContext (Iframe)

リダイレクト

比較

設定

必須の iframe 権限

サンプルリポジトリ

SDK Web のサンプル

Iframe のサンプル

Next.js の完全なデモ

NPM パッケージ

関連情報

​連携方法

​JavaScript SDK

​InContext (Iframe)

​リダイレクト

​比較

​設定

​必須の iframe 権限

​サンプルリポジトリ

SDK Web のサンプル

Iframe のサンプル

Next.js の完全なデモ

NPM パッケージ

​関連情報

連携方法

JavaScript SDK

InContext (Iframe)

リダイレクト

比較

設定

必須の iframe 権限

サンプルリポジトリ

関連情報