---
title: 安装
description: 配置 CSP，安装 Web SDK 包，并下载活体检测采集所需的资源文件。
canonical: https://developer.unico.io/zh-CN/dual-api/developers/sdks-and-tools/web/web-sdk/installation/
locale: zh-CN
generated_by: markdown-export
---

## 添加依赖项并配置包管理器

****步骤 1** — 配置内容安全策略（CSP）**

Web SDK 使用 Web Workers 来提升安全性和性能。请将以下配置添加到您的 CSP 中：

  ```html
  <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"
  />
  ```

  :::warning
  如果您的应用程序配置了 CSP，则此配置是确保 SDK 正常运行的必要条件。
  :::

  :::info[为什么每条指令都是必需的]
  - **`'unsafe-eval'`** (script-src) — 活体检测引擎在运行时编译 WebAssembly 并动态评估其安全例程时所必需的。
  - **`'unsafe-inline'`** (style-src, script-src-elem) — SDK 的内联样式和内联脚本引导所必需的。移除此指令会导致采集界面无法正常工作。
  - **`*.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）以及采集界面所需的其他 Google API 资源。
  - **`fonts.gstatic.com`** (font-src) — 提供由从 `fonts.googleapis.com` 加载的样式表所引用的 Google Fonts 二进制字体文件。
  - **`*.sentry.io`** — Unico 使用 Sentry 进行 SDK 错误追踪。需要在 `script-src` 和 `connect-src` 中配置，以允许错误上报调用。
  - **`*.launchdarkly.com`** — Unico 使用 LaunchDarkly 进行功能开关评估，以控制 SDK 行为（例如摄像头引擎的选择）。需要在 `script-src` 和 `connect-src` 中配置，以允许标志流式传输和评估调用。
  - **`*.newrelic.com` / `bam.nr-data.net`** — Unico 使用 New Relic Browser 进行 SDK 性能监控。需要在 `script-src`（代理脚本）和 `connect-src`（beacon 调用）中配置。
  - **`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` 时，您**必须**从下表重新下载匹配的资源文件 — 版本不匹配将在活体采集过程中导致运行时错误。

  **或者**，自 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 访问。
  :::