Skip to main content

Captura de documentos

Esta guía está diseñada para ayudarlo a implementar el SDK Web de forma rápida y fácil. Se proporcionan conceptos básicos, ejemplos de implementación de SDK y también cómo interactuar con las API REST de los motores.

A través de esta guía, se puede:

  • Implementar la apertura de la cámara y la captura de imágenes;
  • Manipular los datos de devolución;
  • Utilizar la devolución del SDK con las API del motor.

Antes de comenzar, asegúrese de haber seguido las instrucciones paso a paso para instalar e importar el SDK en esta guía.

RECURSOS DISPONIBLES​

SDK Web ofrece un componente para la captura de documentos que contiene un frame de captura que ayuda al usuario a colocar el documento de manera correcta para la foto. Luego de posicionar correctamente, el usuario debe hacer clic en un botón para capturar la foto del documento.

La captura de los siguientes tipos de documentos está disponible:

  • Licencia de conducir: Captura de la Licencia de Conducir abierta;
  • Lado delantero de la Licencia de Conducir: Captura del lado delantero de la Licencia de conducir;
  • Lado reverso de la Licencia de conducir: Captura del lado reverso de la Licencia de conducir;
  • CPF: Captura del documento CPF;
  • Lado delantero del RG: Captura del lado delantero del RG;
  • Lado reverso del RG: Captura del lado reverso del RG;
  • Lado delantero del nuevo Documento de identidad brasileño (RG): Captura del lado delantero del nuevo tipo de Documento de identidad brasileño (RG);
  • Lado reverso del nuevo Documento de identidad brasileño (RG): Captura del lado reverso del nuevo tipo de Documento de identidad brasileño (RG);
  • Otros: Captura documento genérico. Para este tipo de captura, debe informar el título del documento que se mostrará en la captura al usuario utilizando la propiedad optional.LABEL_DOCUMENT_TYPE_OTHERS.
Atenção

Os frames Novo RG frente e Novo RG verso não funcionam com Tipificação e OCR

Captura Manual

IMPLEMENTACIÓN​

Al seguir esta guía paso a paso, tendrá todo el potencial del SDK integrado en su aplicación Web.

  1. INICIALIZAR EL SDK​

    Como primer paso, debes realizar 3 sencillos pasos en su proyecto:

    Instancie un nuevo Builder:

    const unicoCameraBuilder = new UnicoCheckBuilder();

    Especifique el camino de los archivos adicionales (caso agregado en su proyecto):

    unicoCameraBuilder.setResourceDirectory("/resources");

  2. CONFIGURAR EL TAMAÑO DEL FRAME​

    Como primer paso, se recomienda que configure el tamaño del frame dentro de su aplicación, para optimizar el área de captura dentro de su WebApp. Consulte a continuación cómo realizar esta configuración para Web Desktop o Mobile.

    SUGERENCIA

    Muchas veces el funcionamiento del frame puede verse afectado por algunos design-systems que tienen algún tipo de grid-system, como por ejemplo, bootstrap o material-ui. Para minimizar este riesgo, asegúrese de posicionar el frame (id="box-camera") en algún lugar del código que no herede reglas indeseadas de css.

    En las versiones Web Desktop, es posible restringir el tamaño del frame para que no utilice toda la dimensión de su WebApp. Para ello, simplemente envuelva el frame (id="box-camera") en otra tag html, como en el siguiente ejemplo:

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

    Idealmente, debe intentar de mantener una proporción adecuada entre el alto y ancho, lo que facilitará encuadrar el rostro del usuario. A continuación un ejemplo:

    .container {
      width: 800px;
      height: 600px;
      position: relative;
    }

    Siguiendo el ejemplo anterior, el frame respeta el tamaño del elemento "padre", en este caso representado por el contenedor. De esta manera, tiene la flexibilidad de implementar el frame de la manera más conveniente para su aplicación (como en un modal, por ejemplo).

    PROBAR DIVERSOS TAMAÑOS DE PANTALLA

    Las pruebas que cambian el tamaño de la pantalla a través del modo de desarrollador de su browser no funcionan. Se recomienda que este tipo de prueba se realice cambiando el tamaño de la ventana de su browser.

  3. CONFIGURAR FUNCIONES DE CALLBACK​

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

      var callback = {
        on: {
          success: (obj) => {
            console.log(obj.base64);
            console.log(obj.encrypted);
          },
          error: (error) => {
            console.error(error)
            //confira na aba "Configurações" sobre os tipos de erros
          },
          support: (supportMessage) => {
            console.log(supportMessage);
          }
        }
      };

    Este objeto es obligatorio y si no se implementa correctamente (incluyendo todos los eventos de success o error) genera una excepción, que si no se trata, se muestra en la consola del usuario.

    ::alert importante

    El atributo Encrypted está estrictamente destinado a enviar la imagen a través de las API de Unico. No debes abrir ni serializar este atributo, ya que sus características pueden cambiar sin previo aviso. Su uso debe ser exclusivo en interacciones con APIs para garantizar la integridad y seguridad de los datos. Unico no es responsable de ningún daño resultante de esta práctica, ya que pueden ocurrir cambios de manera impredecible. :::

    Para obtener más detalles sobre los códigos de error devueltos por el SDK, consulte esta guía.

  4. CONFIGURAR DISPOSICIÓN DEL FRAME​

    Esta es una etapa opcional, sin embargo, muy recomendable.

    Para personalizar el frame de captura con Theme Builder, simplemente genere una instancia de la clase UnicoThemeBuilder e invoque los métodos que personalizan cada una de las propiedades del frame de captura, como se ejemplifica a continuación:

    const unicoTheme = new UnicoThemeBuilder()
    .setColorSilhouetteSuccess("#0384fc")
    .setColorSilhouetteError("#D50000")
    .setColorSilhouetteNeutral("#fcfcfc")
    .setBackgroundColor("#dff1f5")
    .setColorText("#0384fc")
    .setBackgroundColorComponents("#0384fc")
    .setColorTextComponents("#dff1f5")
    .setBackgroundColorButtons("#0384fc")
    .setColorTextButtons("#dff1f5")
    .setBackgroundColorBoxMessage("#fff")
    .setColorTextBoxMessage("#000")
    .setHtmlPopupLoading(`<div style="position: absolute; top: 45%; right: 50%; transform:
    translate(50%, -50%); z-index: 10; text-align: center;">Carregando...</div>`)
    .build();

    Después de generar el objeto de tema, como se ejemplificó anteriormente, debe pasarse como parámetro al método setTheme del builder unicoCameraBuilder

    unicoCameraBuilder.setTheme(unicoTheme);

  5. CONFIGURAR MODO DE CAPTURA E INICIAR LA CÁMARA​

    Para iniciar la cámara con las configuraciones realizadas hasta aquí, se debe crear una instancia del builder a través del método build().

    const unicoCamera = unicoCameraBuilder.build();

    La cámara se preparará a partir del método prepareDocumentCamera(), disponible a partir del builder. Este método recibe 2 parámetros:

    • El archivo JSON con sus credenciales (generado a través de este guía);
    • Tipo de documento que será capturado, ellos son:
      • DocumentCameraTypes.CNH: Frame para captura de Licencia de conducir.
      • DocumentCameraTypes.CNH_FRENTE: Frame para captura del lado delantero de la Licencia de conducir.
      • DocumentCameraTypes.CNH_VERSO: Frame para captura del lado reverso de la Licencia de conducir.
      • DocumentCameraTypes.CPF: Frame para captura del Registro de Personas Físicas brasileño (CPF).
      • DocumentCameraTypes.OTHERS("descrição"): Frame solamente con el rectángulo donde se puede usar para otros tipos de documentos. En este tipo hay un parámetro con la descripción del documento. (Ej. contrato)
      • DocumentCameraTypes.RG_FRENTE: Frame para captura del lado delantero del Documento de identidad brasileño (RG).
      • DocumentCameraTypes.RG_VERSO: Frame para captura del lado reverso del Documento de identidad brasileño (RG).
      • DocumentCameraTypes.RG_FRENTE_NOVO: Frame para captura del lado delantero del nuevo Documento de identidad brasileño (RG).
      • DocumentCameraTypes.RG_VERSO_NOVO: Frame para captura del lado reverso del nuevo Documento de identidad brasileño (RG).

    Este método genera una promise que al ser resuelta, devuelve un objeto que se utiliza para realmente abrir la cámara a través del método open, que recibe como parámetro las funciones de callback configuradas en este paso.

    CONVIENE RECORDAR

    Para optimizar la apertura de la cámara se puede separar las llamadas de los métodos prepareSelfieCamera() y open(). Vea un ejemplo en esta POC realizada en React con TypeScript.

    A continuación un ejemplo utilizando la captura de la Licencia de Conducir:

    Usando la clase UnicoConfig:

    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>");

      const cameraPromised = unicoCamera.prepareDocumentCamera(config, DocumentCameraTypes.CNH);
      
      cameraPromised.then(cameraOpener => cameraOpener.open(callback));

    Usando el archivo json:

    const cameraPromised = unicoCamera.prepareDocumentCamera("/services.json",
    DocumentCameraTypes.CNH);

    cameraPromised.then(cameraOpener => cameraOpener.open(callback));

  6. LLAMAR LAS APIS​​

    La captura de las imágenes es solo la primera parte del viaje. Después de capturar la imagen, es necesario enviar el Encrypted generado a las API, seleccionando uno de los flujos disponibles detallados en Flujos.

    Atención

    Por motivos de seguridad, el intervalo entre la generación del Encriptado y su envío a través de uno de los flujos disponibles debe ser de un máximo de 10 minutos. Los envíos realizados más allá de este período serán rechazados automáticamente por la API.

¿Dudas?​

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