--- title: Instalasi description: Konfigurasikan CSP, instal paket Web SDK, dan unduh file resource yang diperlukan untuk pengambilan gambar Deteksi Kehidupan. canonical: https://developer.unico.io/id/dual-api/developers/sdks-and-tools/web/web-sdk/installation/ locale: id generated_by: markdown-export --- ## Tambahkan dependensi dan konfigurasikan manajer paket ****Langkah 1** — Konfigurasikan Content Security Policy (CSP)** Web SDK menggunakan Web Workers untuk keamanan dan performa. Tambahkan konfigurasi berikut ke CSP Anda: ```html ``` :::warning Jika aplikasi Anda memiliki CSP, konfigurasi ini wajib dilakukan untuk memastikan SDK berfungsi dengan benar. ::: :::info[Mengapa setiap direktif diperlukan] - **`'unsafe-eval'`** (script-src) — diperlukan oleh mesin deteksi kehidupan untuk mengompilasi WebAssembly dan mengevaluasi rutinitas keamanannya secara dinamis saat runtime. - **`'unsafe-inline'`** (style-src, script-src-elem) — diperlukan untuk inline styles dan bootstrapping skrip inline SDK. Menghapusnya akan merusak antarmuka pengambilan gambar. - **`*.acesso.io`** — domain infrastruktur Unico lama, masih diperlukan untuk aset dan panggilan API. - **`*.unico.run` / `*.unico.io` / `*.unico.app`** — domain layanan Unico saat ini (CDN, API, dan subdomain aplikasi). - **`*.googleapis.com`** (script-src, style-src, script-src-elem, connect-src) — diperlukan untuk memuat stylesheet Google Fonts (CSS `@font-face` melalui `fonts.googleapis.com`) dan sumber daya Google API lainnya yang digunakan oleh antarmuka tangkapan. - **`fonts.gstatic.com`** (font-src) — Menyajikan file font biner Google Fonts yang dirujuk oleh stylesheet yang dimuat dari `fonts.googleapis.com`. - **`*.sentry.io`** — Unico menggunakan Sentry untuk pelacakan kesalahan SDK. Diperlukan di `script-src` dan `connect-src` untuk mengizinkan panggilan pelaporan kesalahan. - **`*.launchdarkly.com`** — Unico menggunakan LaunchDarkly untuk evaluasi feature-flag yang mengontrol perilaku SDK (misalnya, pemilihan mesin kamera). Diperlukan di `script-src` dan `connect-src` untuk mengizinkan streaming dan evaluasi flag. - **`*.newrelic.com` / `bam.nr-data.net`** — Unico menggunakan New Relic Browser untuk pemantauan performa SDK. Diperlukan di `script-src` (skrip agent) dan `connect-src` (panggilan beacon). - **`blob:`** (worker-src, child-src, script-src-elem) — diperlukan karena Web Workers dan sub-sumber daya SDK tertentu dibuat sebagai URL Blob saat runtime. ::: ****Langkah 2** — Instal paket** Web SDK tersedia melalui paket npm atau CDN. ### npm ```bash npm install unico-webframe ``` ### yarn ```bash yarn add unico-webframe ``` ### CDN Unduh SDK dan impor ke proyek Anda: - [Unduh versi `3.23.7`](https://cdn.unico.io/sdk/check/bio/unico-webframe-3.23.7.zip) ****Langkah 3** — Impor SDK** Setelah menginstal, impor SDK ke dalam proyek Anda. ### Dari npm ```javascript import { UnicoCheckBuilder, SelfieCameraTypes, UnicoThemeBuilder, DocumentCameraTypes, UnicoConfig, LocaleTypes } from 'unico-webframe' ``` ### Dari CDN ```javascript import { UnicoCheckBuilder, SelfieCameraTypes, UnicoThemeBuilder, DocumentCameraTypes, UnicoConfig, LocaleTypes } from 'UnicoCheckBuilder.min.js' ``` ****Langkah 4** — Unduh file resource tambahan** File resource tambahan diperlukan untuk melakukan pengambilan gambar Liveness. Unduh file yang sesuai dengan versi SDK Anda dan sertakan dalam proyek Anda: :::warning[Daftar periksa peningkatan versi] File resource terikat pada versi SDK. Setiap kali Anda memperbarui `unico-webframe`, Anda **harus** mengunduh ulang resource yang sesuai dari tabel di bawah ini — penggunaan versi yang tidak cocok akan menyebabkan error runtime saat pengambilan gambar Liveness. **Sebagai alternatif**, sejak SDK 3.18.0 SDK dapat mengambil file-file ini secara otomatis saat inisialisasi, sehingga tidak perlu mengunduh secara manual. Lihat [Inisialisasi](/dual-api/developers/sdks-and-tools/web/web-sdk/initialization) untuk opsi `setResourceDirectory`. ::: | Versi SDK | Resource 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 (lihat tabel legacy) | Unduh juga **file AI** untuk SDK: [models.zip](https://cdn.unico.io/sdk/check/bio/models.zip). :::warning[Public path] Semua file tambahan harus dihosting di lokasi publik yang dapat diakses oleh Web dalam proyek Anda. :::