Esta guía ha sido elaborada para ayudarlo a implementar el SDK Web de manera rápida y fácil. A continuación, verá el paso a paso de todo el proceso de integración. Después de eso, si desea personalizar la experiencia, no olvide consultar la sección de Personalización Web.

Inicializar el SDK

Para comenzar, debe realizar 3 pasos simples en su proyecto:

Instancie un nuevo Builder:

const unicoCameraBuilder = new UnicoCheckBuilder();

Especifique la ruta de los archivos adicionales (en caso de que se hayan agregado a su proyecto):

unicoCameraBuilder.setResourceDirectory("/resources");

Especifique la ruta de los archivos de los modelos de IA, en caso de que utilice la funcionalidad de Cámara Inteligente.

unicoCameraBuilder.setModelsPath("https://meusite.com.br/models");

Configuración de entornos

Es posible configurar el entorno que se utilizará en la ejecución del SDK. Use el enumerado SDKEnvironmentTypes, que contiene los siguientes enumerados:

• SDKEnvironmentTypes.PROD: para el entorno de Producción;

• SDKEnvironmentTypes.UAT: para el entorno de Homologación.

Vea cómo implementarlo en el siguiente ejemplo:

import {
  ...
  UnicoCheckBuilder,
  SDKEnvironmentTypes
  ...
} from "unico-webframe"

unicoCameraBuilder.setEnvironment(SDKEnvironmentTypes.UAT);

Implementar las funciones de callback

Uno de los objetos que debe ser pasado como parámetro al método responsable de renderizar el frame de captura es el de callback. Este objeto deberá contener funciones de callback para los casos de éxito y error, como se ejemplifica a continuación.

  const callback = {
    on: {
      success: (obj) => {
        console.log(obj.base64);
        console.log(obj.encrypted);        
      },
      error: (error) => {
        console.error(error)
        //confira na aba "Referências" sobre os erros possíveis
      }
    }
  };

Este objeto es obligatorio y, si no se implementa correctamente (cubriendo todos los eventos de éxito o error), generará una excepción, que, si no se maneja, se mostrará en la consola del usuario.

Configurar e iniciar

Para iniciar la cámara con las configuraciones realizadas hasta ahora, es necesario crear una instancia del builder mediante el método build().

const unicoCamera = unicoCameraBuilder.build();

A continuación, con la cámara "montada", se debe configurar el modo de captura de la cámara.

La preparación de la cámara se realizará a partir del método prepareSelfieCamera(), disponible a partir del builder. Este método recibe 2 parámetros:

• La clase UnicoConfig obtenida en este paso;

• El modo de cámara deseado, siendo estos:

  • SelfieCameraTypes.NORMAL para el modo de cámara normal;

  • SelfieCameraTypes.SMART para el modo de cámara inteligente.

Este método genera una promise que, al resolverse, devuelve un objeto que se utiliza para abrir efectivamente la cámara mediante el método open, el cual recibe como parámetro las funciones de callback configuradas en el paso anterior.

Si desea utilizar la captura automática, pase el parámetro Unico.SelfieCameraTypes.SMART al método prepareSelfieCamera.

Para la captura inteligente, los modelos de visión computacional también deben ser cargados mediante el método setModelsPath, tal como se explicó en el primer paso de esta guía.

Usando la clase UnicoConfig:

const config = new UnicoConfig()
  .setHostname("<YOUR_HOSTNAME>")
  .setHostKey("<YOUR_HOST_KEY>");

  unicoCamera.prepareSelfieCamera(
    config, 
    SelfieCameraTypes.SMART
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
    // confira na aba "Referências" sobre os erros possíveis
  });

Configurar el modo de captura en iFrames

Es posible utilizar el SDK Web con Liveness Interactivo incrustado en un iFrame. Para ello, es necesario realizar una implementación similar a la sección anterior en la preparación de la cámara.

La preparación de la cámara se realizará mediante el método prepareSelfieCameraForIFrame(), también disponible a partir del builder. Este método recibe los mismos parámetros que prepareSelfieCamera():

const unicoCamera = unicoCameraBuilder.build();

const config = new UnicoConfig()
  .setHostname("<YOUR_HOSTNAME>")
  .setHostKey("<YOUR_HOST_KEY>");

  unicoCamera.prepareSelfieCameraForIFrame(
    config, 
    SelfieCameraTypes.SMART
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
    // confira na aba "Referências" sobre os erros possíveis
  });

Implementación del elemento iFrame

Para que la captura funcione correctamente, es necesario implementar el elemento <iframe> como en el siguiente ejemplo:

<iframe allow="fullscreen;camera;geolocation" allowFullScreen src="your_app_url"></iframe>

Comportamiento en pantalla completa

Para realizar la captura, es necesario estar en modo pantalla completa en el navegador para que el SDK pueda redimensionarse automáticamente. Por lo tanto, al realizar la captura, el SDK mostrará una pantalla solicitando la apertura del frame en modo pantalla completa. Vea el siguiente ejemplo:

Después de permitir el uso de pantalla completa, el frame de captura se abrirá normalmente:

Realizar una solicitud POST a la API REST

La captura de las imágenes es solo la primera parte del proceso. Después de capturar la imagen, es necesario enviar el encrypted generado por el SDK a las APIs REST. Obtenga más información en la sección Creación de proceso.

¿Dudas?

¿No encontraste algo o aún necesitas ayuda? Si ya eres cliente o socio, puedes ponerte en contacto a través del Centro de Ayuda.

Frames de documentos disponibles

En este modo de cámara, existe un frame de captura para ayudar al usuario a posicionar el documento correctamente. Después de posicionar el documento correctamente, el usuario debe hacer clic en el botón para realizar la captura de la foto del documento.

En este modo de cámara es posible capturar los siguientes documentos:

• CPF: Captura del frente del CPF;

• CNH: Captura de la CNH abierta;

• CNH frente: Captura del frente de la CNH;

• CNH verso: Captura del reverso de la CNH;

• RG frente: Captura del frente del RG;

• RG verso: Captura del reverso del RG;

• Otros: Captura de cualquier otro documento.

Inicializar el SDK

Para comenzar, debe realizar 2 pasos simples en su proyecto:

Instancie un nuevo Builder:

Especifique la ruta de los archivos adicionales (en caso de que se hayan agregado a su proyecto):

Configurar el tamaño del frame

Se recomienda que configure el tamaño del frame dentro de su aplicación, para optimizar el área de captura dentro de su WebApp. A continuación, vea cómo hacer esta configuración para Web Desktop o Mobile.

Implementar las funciones de callback

Uno de los objetos que debe pasar como parámetro al método responsable de renderizar el frame de captura es el de callback. Este objeto debe contener funciones de callback para los casos de éxito y error, como se ejemplifica a continuación.

Este objeto es obligatorio y, si no se implementa correctamente (cubriendo todos los eventos de éxito o error), generará una excepción que, si no se maneja, se mostrará en la consola del usuario.

Configurar e iniciar la cámara

Para iniciar la cámara con las configuraciones realizadas hasta ahora, es necesario crear una instancia del builder mediante el método build().

A continuación, con la cámara "montada", debe configurarse el modo de captura de la cámara.

La preparación de la cámara se realiza mediante el método prepareDocumentCamera(), disponible a partir del builder. Este método recibe 2 parámetros:

• El tipo de documento a capturar, siendo estos:

Este método genera una promesa que, al resolverse, devuelve un objeto que se utiliza para abrir efectivamente la cámara a través del método open, que recibe como parámetro las funciones de callback configuradas en el paso anterior.

A continuación, un ejemplo utilizando la captura de CNH:

Usando la clase UnicoConfig:

Realice una solicitud POST a la API REST

¿Dudas?

Componentes de la SDK

La SDK implementa componentes preparados con atributos HTML para accesibilidad, como aria-label, tabindex, role, entre otros, que habilitan la navegación por teclado entre elementos, activan orientaciones por audio y son utilizados por software de lectura de pantalla.

Buenas prácticas

Al integrar la SDK Web en una página, es posible que existan otros elementos interactivos en la página que no sean visibles durante el flujo de apertura de la cámara y captura de imagen. Estos elementos pueden generar conflictos con la información del flujo de captura, afectando la experiencia del usuario. Por lo tanto, es importante eliminar o desactivar la interacción con otros elementos mientras se realiza la captura.

Esto se puede hacer de diversas maneras y depende de los elementos existentes y los frameworks utilizados en la página. A continuación, se muestra un ejemplo utilizando el atributo aria-hidden:

Referencias

¿Dudas?