--- title: インストール description: CSP を設定し、Web SDK パッケージをインストールして、ライブネス キャプチャに必要なリソースファイルをダウンロードします。 canonical: https://developer.unico.io/ja/dual-api/developers/sdks-and-tools/web/web-sdk/installation/ locale: ja generated_by: markdown-export --- ## 依存関係の追加とパッケージマネージャーの設定 ****ステップ 1** — コンテンツセキュリティポリシー（CSP）の設定** Web SDK はセキュリティとパフォーマンスのために Web Workers を使用します。CSP に以下の設定を追加してください： ```html ``` :::warning アプリケーションに CSP が設定されている場合、この設定は SDK の正常な動作を確保するために必須です。 ::: :::info[各ディレクティブが必要な理由] - **`'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 ```bash npm install unico-webframe ``` ### yarn ```bash yarn add unico-webframe ``` ### CDN SDK をダウンロードしてプロジェクトにインポートしてください： - [バージョン `3.23.7` をダウンロード](https://cdn.unico.io/sdk/check/bio/unico-webframe-3.23.7.zip) ****ステップ 3** — SDK のインポート** インストール後、SDK をプロジェクトにインポートします。 ### npm から ```javascript import { UnicoCheckBuilder, SelfieCameraTypes, UnicoThemeBuilder, DocumentCameraTypes, UnicoConfig, LocaleTypes } from 'unico-webframe' ``` ### CDN から ```javascript import { UnicoCheckBuilder, SelfieCameraTypes, UnicoThemeBuilder, DocumentCameraTypes, UnicoConfig, LocaleTypes } from 'UnicoCheckBuilder.min.js' ``` ****ステップ 4** — 追加リソースファイルのダウンロード** Liveness キャプチャを実行するには追加リソースファイルが必要です。SDK バージョンに対応するファイルをダウンロードしてプロジェクトに含めてください： :::warning[アップグレードチェックリスト] リソースファイルは SDK のバージョンに紐付けられています。`unico-webframe` をバージョンアップするたびに、下の表から対応するリソースを**必ず**再ダウンロードしてください — バージョンが一致しない場合、Liveness キャプチャ中にランタイムエラーが発生します。 **代替手段として**、SDK 3.18.0 以降、SDK は初期化時にこれらのファイルを自動的に取得できるため、手動ダウンロードの手順が不要になります。`setResourceDirectory` オプションについては[初期化](/dual-api/developers/sdks-and-tools/web/web-sdk/initialization)を参照してください。 ::: | SDK バージョン | FaceTec リソース | |---|---| | 3.23.7 | [9.7.114](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.114/resources.zip) | | 3.23.3 → 3.23.6 | [9.7.107](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.107/resources.zip) | | 3.23.0 → 3.23.1 | [9.7.102](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.102/resources.zip) | | 3.22.6 → 3.22.7 | [9.7.100](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.100/resources.zip) | | 3.22.5 | [9.7.99](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.99/resources.zip) | | 3.22.3 → 3.22.4 | [9.7.98](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.98/resources.zip) | | 3.22.2 | [9.7.96](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.96/resources.zip) | | 3.22.1 | [9.7.93](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.93/resources.zip) | | 3.22.0 | [9.7.90](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.90/resources.zip) | | 3.21.3 → 3.21.4 | [9.7.85](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.85/resources.zip) | | 3.21.2 | [9.7.82](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.82/resources.zip) | | 3.21.1 | [9.7.80](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.80/resources.zip) | | 3.20.10 → 3.21.0 | [9.7.76](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.76/resources.zip) | | 3.20.9 | [9.7.75](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.75/resources.zip) | | 3.20.8 | [9.7.73](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.73/resources.zip) | | 3.20.7 | [9.7.68](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.68/resources.zip) | | 3.20.5 → 3.20.6 | [9.7.65](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.65/resources.zip) | | 3.20.3 → 3.20.4 | [9.7.64](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.64/resources.zip) | | 3.20.2 | [9.7.63](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.63/resources.zip) | | 3.20.1 | [9.7.61](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.61/resources.zip) | | 3.20.0 | [9.7.55](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.55/resources.zip) | | 3.19.0 → 3.19.3 | [9.7.45 → 9.7.51](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.51/resources.zip) | | 3.18.x | 9.6.92 → 9.7.41（レガシーテーブルを参照） | また、SDK の **AI ファイル**もダウンロードしてください：[models.zip](https://cdn.unico.io/sdk/check/bio/models.zip)。 :::warning[パブリックパス] すべての追加ファイルは、プロジェクト内の Web からアクセス可能な公開ロケーションにホストされている必要があります。 :::