Instalación

CONFIGURACIÓN DE LA POLÍTICA DE SEGURIDAD DEL CONTENIDO (CSP)

El Web SDK emplea el uso de Web Workers para mejorar la seguridad y el rendimiento. Por lo tanto, debe agregar las siguientes configuraciones a su Política de seguridad de contenido (CSP)

<meta
  http-equiv="Content-Security-Policy"
  content="
      script-src 'self' 'unsafe-eval' *.googleapis.com *.acesso.io *.unico.run *.unico.io *.unico.app; 
      worker-src 'self' blob:; 
      child-src 'self' blob:;
      script-src-elem 'self' 'unsafe-inline' blob: *.googleapis.com *.acesso.io *.unico.run *.unico.io *.unico.app"
/>

Atención

Si su aplicación tiene un CSP, esta configuración es obligatoria para garantizar el correcto funcionamiento del SDK.

OBTENER LAS CREDENCIALES

Para usar el SDK, debe importar las credenciales (Client API Key) em su proyecto. Utilice el siguiente paso a paso para generar e importar credenciales:

Acceda a su instancia con nombre de usuario y contraseña;
Desplácese hacia abajo en la barra de menú y haga clic en el menú Configuración , luego haga clic en el menú Integración y finalmente haga clic en el menú API Key;
Para crear API Key, haga clic en + Nueva API Key or o para editar, haga clic en API Key deseada;
Si desea utilizar el modo de cámara selfie de prueba de vida de FaceTec, asegúrese de que el campo Usar vivacidad con interacción esté lleno con la opción Sí option. Si está lleno de NO, , o no aparece, comuníquese con el soporte a través del Centro de ayuda y solicite la activación; Para obtener más información sobre SMARTLIVE CON INTERACCIÓN (LIVENESS CON INTERACCIÓN), haga clic [aquí] (https://developers.unico.io/es/docs/check/visaogeralproduto).
En el campo Usar autenticación segura en el SDK , seleccione la opción Sí;
Expanda la sección SDK iOS, agregue el ID del proyecto y el Package Name;
Finalmente, haga clic en Guardar;
Volver a la sección APIKey;
Elija la API Key configurada, en la columna Bundle, haga clic en el botón Descargar;
Se abre una nueva sección, selecciona la opción iOS;
NOTA
Si la pestaña no se abre, verifique que su navegador esté bloqueando las ventanas emergentes.
Haga clic en Generar y se abrirá automáticamente una nueva pestaña en su navegador que contiene información del proyecto en formato JSON;
Guarde este JSON.

CARGANDO LAS CREDENCIALES A SU PROYECTO

Hay dos opciones para incorporar la información contenida en el JSON al proyecto:

Implementando la clase UnicoConfig (Método recomendado);
Cargando el archivo JSON (Método depreciado).

IMPLEMENTANDO LA CLASE UnicoConfig (MÉTODO RECOMENDADO)

Implemente la clase UnicoConfig.

Copie y pegue la información contenida en el JSON en sus respectivos métodos:

Archivo JSON
{
    "project_info":{
        "project_number":"<YOUR_PROJECT_NUMBER>",
        "project_id":"<YOUR_PROJECT_ID>"
    },
    "client_info":{
        "mobilesdk_app_id":"<YOUR_MOBILE_SDK_APP_ID>",
        "js_client_info":{
            "hostname":"<YOUR_HOSTNAME>"
        }
    },
    "host_info":{
        "host_info":"<YOUR_HOST_INFO>",
        "host_key":"<YOUR_HOST_KEY>"
    }
}

import { UnicoConfig } from "unico-webframe"

const config = new UnicoConfig()
  .setProjectNumber("<YOUR_PROJECT_NUMBER>")
  .setProjectId("<YOUR_PROJECT_ID>")
  .setMobileSdkAppId("<YOUR_MOBILE_SDK_APP_ID>")
  .setHostname("<YOUR_HOSTNAME>")
  .setHostInfo("<YOUR_HOST_INFO>")
  .setHostKey("<YOUR_HOST_KEY>");

CARGANDO EL ARCHIVO JSON (MÉTODO DEPRECIADO)

UBICACIÓN DEL ARCHIVO EN SU PROYECTO

El archivo JSON debe estar en un local público y visible para la Web dentro de su proyecto.

CARGANDO OTROS ARCHIVOS DEL UNICO CHECK A SU PROYECTO

PASO OPCIONAL

Este paso es opcional y depende de la configuración y opciones utilizadas en su proyecto

La siguiente tabla enumera los archivos de recursos adicionales disponibles para inclusión en su proyecto. Debe descargarlos e incluirlos en su proyecto dependiendo de las características que quiera utilizar. Funciones adicionales de Unico Check para la captura con la prueba de vida de FaceTec con interacción:

Release del SDK	Release de FaceTec (Haga clic en el número para descargar los archivos adicionales)
3.18.5	9.7.27
3.18.4	9.7.25
3.16.4 -> 3.17.0	9.6.89
3.16.3	9.6.85
3.16.2	9.6.84
3.14.1 -> 3.16.1	9.6.73
3.11.1 -> 3.14.0	9.6.65
3.10.2 -> 3.11.0	9.6.56
3.10.1	9.6.53
3.9.1 -> 3.10.0	9.6.40
3.9.0	9.6.38
3.8.3	9.6.33
3.8.2	9.6.30
3.8.0 -> 3.8.1	9.6.26
3.7.1 -> 3.7.2	9.6.24
3.6.5 -> 3.7.0	9.6.16
3.6.3 -> 3.6.4	9.6.11
3.6.1 -> 3.6.2	9.6.4
3.5.4 -> 3.6.0	9.4.18
3.5.3	9.4.14
3.5.0 -> 3.5.2	9.4.11

Para realizar la descarga del archivo de AI de Unico Check SDK Web haga clic aquí.

UBICACIÓN DEL ARCHIVO EN SU PROYECTO

Al igual que con el JSON del paso anterior, los archivos adicionales deben estar en un local público visible en la Web dentro de su proyecto.

INSTALACIÓN

El SDK Web está disponible a través de un paquete npm o cdn. Para la instalación, siga los siguientes pasos según su preferencia:

SUGERENCIA

Se recomienda utilizar las últimas versiones de los SDK. Para ello, esté atento a los Release notes.

Uso de Web Workers en el SDK

El Web SDK emplea Web Workers para mejorar la seguridad y el rendimiento. Para garantizar la funcionalidad de estos trabajadores al utilizar la Política de seguridad de contenido (CSP), agregue las siguientes configuraciones a su política:

Content-Security-Policy: ...; worker-src 'self' blob:; child-src 'self' blob:

INSTALACIÓN A TRAVÉS DEL PAQUETE NPM

Para instalar el SDK en su proyecto a través de npm, simplemente ejecute el comando a continuación:

npm install unico-webframe

O por el yarn, con el comando a continuación:

yarn add unico-webframe

INSTALACIÓN A TRAVÉS DEL CDN

Para instalar el SDK en su proyecto usando cdn, simplemente descargue el archivo a continuación e impórtelo a su proyecto.

Download de la versión 3.18.5

NOTA SOBRE LA CÁMARA INTELIGENTE Y MODELOS DE IA

Para utilizar la Cámara Inteligente, debe agregar al proyecto algunos modelos de IA para que todo funcione bien. Para ello, realice la descarga de los modelos en este enlace y agréguelos a su proyecto.

Los modelos deben estar disponibles en una carpeta con el nombre models accesible públicamente a través de la URL base de su aplicación. Por ejemplo: https://www.seudominio.com/models o https://localhost:8000/models.

IMPORTACIÓN

Después de instalar el SDK, simplemente impórtelo correctamente en su proyecto.

Si instaló el paquete usando npm:

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

Si instaló el paquete usando cdn:

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

RENDERIZACIÓN

La forma en que se renderiza el componente depende de si tiene o no la funcionalidad Smartlive (Prueba de vida) con interacción.

Sin utilizar Smartlive con interacción FaceTec

El frame para captura se renderiza dentro de una div que debe tener su id necesariamente igual a "box-camera".

Ejemplo:

<div id="box-camera"></div>

Alerta

El identificador de este div debe ser siempre igual a id='box-camera'.

Utilizando Smartlive con interacción FaceTec

Si su proyecto usa Smartlive con interacción, no necesita crear un div en su código para renderizar. En este caso, se muestra un modal dentro de la misma ventana.

¿Dudas?

¿No encontró algo o aún necesita ayuda? Si ya es cliente o asociado, puede contactarnos a través del Centro de Ayuda.

CONFIGURACIÓN DE LA POLÍTICA DE SEGURIDAD DEL CONTENIDO (CSP)​

OBTENER LAS CREDENCIALES​​

CARGANDO LAS CREDENCIALES A SU PROYECTO​​

IMPLEMENTANDO LA CLASE UnicoConfig (MÉTODO RECOMENDADO)​

CARGANDO EL ARCHIVO JSON (MÉTODO DEPRECIADO)​​

CARGANDO OTROS ARCHIVOS DEL UNICO CHECK A SU PROYECTO​​

INSTALACIÓN​

INSTALACIÓN A TRAVÉS DEL PAQUETE NPM​​

INSTALACIÓN A TRAVÉS DEL CDN​​

IMPORTACIÓN​

RENDERIZACIÓN​

Sin utilizar Smartlive con interacción FaceTec​​

Utilizando Smartlive con interacción FaceTec​

¿Dudas?​