メインコンテンツへスキップ

インストール

依存関係の追加とパッケージマネージャーの設定
ステップ 1 — コンテンツセキュリティポリシー（CSP）の設定

Web SDK はセキュリティとパフォーマンスのために Web Workers を使用します。CSP に以下の設定を追加してください：

<meta
  http-equiv="Content-Security-Policy"
  content="
      script-src 'self' 'unsafe-eval' *.googleapis.com *.acesso.io *.unico.run *.unico.io *.unico.app *.sentry.io *.launchdarkly.com *.newrelic.com bam.nr-data.net;
      worker-src 'self' blob:;
      child-src 'self' blob:;
      style-src 'self' 'unsafe-inline' *.googleapis.com *.acesso.io *.unico.run *.unico.io *.unico.app;
      font-src 'self' https://fonts.gstatic.com *.acesso.io *.unico.run *.unico.io *.unico.app;
      img-src 'self' data: blob: *.acesso.io *.unico.run *.unico.io *.unico.app;
      media-src 'self' data: *.acesso.io *.unico.run *.unico.io *.unico.app;
      script-src-elem 'self' 'unsafe-inline' blob: *.googleapis.com *.acesso.io *.unico.run *.unico.io *.unico.app;
      connect-src *.googleapis.com *.acesso.io *.unico.run *.unico.io *.unico.app *.sentry.io *.launchdarkly.com *.newrelic.com bam.nr-data.net"
/>
警告

アプリケーションに CSP が設定されている場合、この設定は SDK の正常な動作を確保するために必須です。

各ディレクティブが必要な理由
  • 'unsafe-eval' (script-src) — liveness 検出エンジンが WebAssembly をコンパイルし、セキュリティルーティンを実行時に動的に評価するために必要です。
  • 'unsafe-inline' (style-src, script-src-elem) — SDK のインラインスタイルとインラインスクリプトのブートストラップに必要です。削除するとキャプチャ UI が機能しなくなります。
  • *.acesso.io — Unico のレガシーインフラドメインで、アセットおよび API 呼び出しに引き続き必要です。
  • *.unico.run / *.unico.io / *.unico.app — 現在の Unico サービスドメイン（CDN、API、アプリサブドメイン）。
  • *.googleapis.com (script-src, style-src, script-src-elem, connect-src) — Google Fonts スタイルシート（fonts.googleapis.com 経由の @font-face CSS）およびキャプチャ UI で使用されるその他の Google API リソースを読み込むために必要です。
  • fonts.gstatic.com (font-src) — fonts.googleapis.com から読み込まれたスタイルシートが参照するGoogle Fontsのバイナリフォントファイルを提供します。
  • *.sentry.io — Unico は SDK のエラートラッキングに Sentry を使用しています。エラーレポート呼び出しを許可するために script-src と connect-src に必要です。
  • *.launchdarkly.com — Unico は SDK の動作（例：カメラエンジンの選択）を制御するフィーチャーフラグの評価に LaunchDarkly を使用しています。フラグのストリーミングと評価呼び出しを許可するために script-src と connect-src に必要です。
  • *.newrelic.com / bam.nr-data.net — Unico は SDK のパフォーマンスモニタリングに New Relic Browser を使用しています。エージェントスクリプト用に script-src、ビーコン呼び出し用に connect-src に必要です。
  • blob: (worker-src, child-src, script-src-elem) — Web Workers および一部の SDK サブリソースが実行時に Blob URL として作成されるため必要です。
ステップ 2 — パッケージのインストール

Web SDK は npm パッケージまたは CDN を通じて提供されます。

npm install unico-webframe
ステップ 3 — SDK のインポート

インストール後、SDK をプロジェクトにインポートします。

import {
  UnicoCheckBuilder,
  SelfieCameraTypes,
  UnicoThemeBuilder,
  DocumentCameraTypes,
  UnicoConfig,
  LocaleTypes
} from 'unico-webframe'
ステップ 4 — 追加リソースファイルのダウンロード

Liveness キャプチャを実行するには追加リソースファイルが必要です。SDK バージョンに対応するファイルをダウンロードしてプロジェクトに含めてください：

アップグレードチェックリスト

リソースファイルは SDK のバージョンに紐付けられています。unico-webframe をバージョンアップするたびに、下の表から対応するリソースを必ず再ダウンロードしてください — バージョンが一致しない場合、Liveness キャプチャ中にランタイムエラーが発生します。

代替手段として、SDK 3.18.0 以降、SDK は初期化時にこれらのファイルを自動的に取得できるため、手動ダウンロードの手順が不要になります。setResourceDirectory オプションについては初期化を参照してください。

SDK バージョンFaceTec リソース
3.23.79.7.114
3.23.3 → 3.23.69.7.107
3.23.0 → 3.23.19.7.102
3.22.6 → 3.22.79.7.100
3.22.59.7.99
3.22.3 → 3.22.49.7.98
3.22.29.7.96
3.22.19.7.93
3.22.09.7.90
3.21.3 → 3.21.49.7.85
3.21.29.7.82
3.21.19.7.80
3.20.10 → 3.21.09.7.76
3.20.99.7.75
3.20.89.7.73
3.20.79.7.68
3.20.5 → 3.20.69.7.65
3.20.3 → 3.20.49.7.64
3.20.29.7.63
3.20.19.7.61
3.20.09.7.55
3.19.0 → 3.19.39.7.45 → 9.7.51
3.18.x9.6.92 → 9.7.41（レガシーテーブルを参照）

また、SDK の AI ファイルもダウンロードしてください：models.zip。

パブリックパス

すべての追加ファイルは、プロジェクト内の Web からアクセス可能な公開ロケーションにホストされている必要があります。

最終更新 に