설치

종속성 추가 및 패키지 매니저 구성

1단계 — Content Security Policy(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;
      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"
/>

경고

애플리케이션에 CSP가 있는 경우 SDK가 올바르게 작동하려면 이 구성이 필수입니다.

각 지시문이 필요한 이유

'unsafe-eval' (script-src) — 라이브니스 감지 엔진이 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에 필요합니다.
blob: (worker-src, child-src, script-src-elem) — Web Workers 및 일부 SDK 하위 리소스가 런타임에 Blob URL로 생성되므로 필요합니다.

2단계 — 패키지 설치

Web SDK는 npm 패키지 또는 CDN을 통해 제공됩니다.

npm
yarn
CDN

npm install unico-webframe

yarn add unico-webframe

SDK를 다운로드하여 프로젝트에 가져오세요:

버전 3.23.7 다운로드

3단계 — SDK 가져오기

설치 후 프로젝트에 SDK를 가져오세요.

npm에서
CDN에서

import {
  UnicoCheckBuilder,
  SelfieCameraTypes,
  UnicoThemeBuilder,
  DocumentCameraTypes,
  UnicoConfig,
  LocaleTypes
} from 'unico-webframe'

import {
  UnicoCheckBuilder,
  SelfieCameraTypes,
  UnicoThemeBuilder,
  DocumentCameraTypes,
  UnicoConfig,
  LocaleTypes
} from 'UnicoCheckBuilder.min.js'

4단계 — 추가 리소스 파일 다운로드

라이브니스 캡처를 수행하려면 추가 리소스 파일이 필요합니다. SDK 버전에 맞는 파일을 다운로드하여 프로젝트에 포함하세요:

업그레이드 체크리스트

리소스 파일은 SDK 버전에 잠겨 있습니다. unico-webframe을 업그레이드할 때마다 아래 표에서 일치하는 리소스를 반드시 다시 다운로드해야 합니다 — 버전이 일치하지 않으면 라이브니스 캡처 중 런타임 오류가 발생합니다.

또는, SDK 3.18.0부터 SDK가 초기화 시 이 파일들을 자동으로 가져올 수 있어 수동 다운로드 단계가 필요 없습니다. setResourceDirectory 옵션은 초기화를 참조하세요.

SDK 버전	FaceTec 리소스
3.23.7	9.7.114
3.23.3 → 3.23.6	9.7.107
3.23.0 → 3.23.1	9.7.102
3.22.6 → 3.22.7	9.7.100
3.22.5	9.7.99
3.22.3 → 3.22.4	9.7.98
3.22.2	9.7.96
3.22.1	9.7.93
3.22.0	9.7.90
3.21.3 → 3.21.4	9.7.85
3.21.2	9.7.82
3.21.1	9.7.80
3.20.10 → 3.21.0	9.7.76
3.20.9	9.7.75
3.20.8	9.7.73
3.20.7	9.7.68
3.20.5 → 3.20.6	9.7.65
3.20.3 → 3.20.4	9.7.64
3.20.2	9.7.63
3.20.1	9.7.61
3.20.0	9.7.55
3.19.0 → 3.19.3	9.7.45 → 9.7.51
3.18.x	9.6.92 → 9.7.41 (레거시 표 참조)

SDK용 AI 파일도 다운로드하세요: models.zip.

공개 경로

모든 추가 파일은 프로젝트 내에서 웹에서 접근 가능한 공개 위치에 호스팅되어야 합니다.