Documentación


Instalación

Importar el script:

versión actualizada (recomendado)
<script src="https://id4face.eclipsoft.com/dist/id4face@latest.js" crossorigin="anonymous" defer></script>

version específica con integrity hash
<script src="https://id4face.eclipsoft.com/dist/id4face@2.4.0.js" integrity="sha384-/G0JS1Wpu/qyVtbtZD7mfPRK5wsjh/ye7hbSOBLWGb9tJzus5/xZnJi48jheE88h" crossorigin="anonymous" defer></script>

… y declarar el tag <eclipsoft-id4face></eclipsoft-id4face> en un documento html.

<html>
    <body>
        <!-- Ejemplo con opciones de atributos -->
        <eclipsoft-id4face dismissable dark oval limits></eclipsoft-id4face>
    </body>
</html>


Configuración

La configuración se define con un objeto de opciones como argumento al ejecutar el método load() y contiene las siguientes propiedades

Se recomienda el parpadeo obligatorio por mayor seguridad con { blink: true }


Autorización

El token de autorización se debe generar preferiblemente de lado del servidor para no hacer públicas las credenciales:

curl -d '{"username":"user", "password":"pass"}' -H "Content-Type: application/json" https://id4face.eclipsoft.com/api/authenticate

El jwt en la respuesta { id_token: '...' } se asigna como una propiedad token y se envía en un Authorization header:

const id4face = document.querySelector('eclipsoft-id4face')
id4face.token = id_token


Imagen de referencia

En caso de optar por verificación biométrica hay dos formas de proveer una imagen de referencia para la comparación:

// Check ID
const config = {
    checkId: {
        id: "4561234754",
        dactilar: 'V44233'
    }
}

id4face.reference = "/9j/4AAQSkZJRg..." // base64


Prueba de vida y verificación biométrica

Para mostrar el mdoal al usuario y empezar el proceso de validación se llama al método start()
Si quieres incluir la verificación biométrica en las opciones debe ir { faceRecognition: true }. Considera que debes también incluir un número de cédula y código dactilar si quieres consultar los datos del Registro Civil o una imagen en base64.

// Configuración por defecto

const config = {
    minMatch: "98",
    faceMask: false,
    blink: true,
    env: "dev",
    callbackUrl: "",
    faceRecognition: false,
    checkId: {
        id: "",
        dactilar: ""
    }
}

try {
    await id4face.load(config)  // Valida la configuración y el token. Debe ejecutarlo una vez renderizado el componente.
    id4face.start()       // Presenta el modal y inicia el proceso de verificación
} catch(error){
    console.error("Error: ", error) // Errores lanzados por métodos load() o start()
}


Callback

El callback se envía después de los eventos result (en caso de ser exitoso) o failed y contiene los mismos datos del evento entre otros:

// Ejemplo de payload
{
    identification: '0926412354',           // Identificación del usuario
    requestId: '63efff9387c7057fad76eec3',  // Identificador de la solicitud
    blinked: true,                          // Indica si el usuario parpadeó
    status: 'VERIFIED',                     // Estado de la solicitud: "VERIFIED" | "UNVERIFIED"
    match: 99.96,                           // Porcentaje de similitud
    hostname: 'id4face.eclipsoft.dev',      // Origen de la solicitud
    date: '2023-02-17T17:06:09.613'         // Fecha y hora en formato ISO
}


Tema

Puedes escoger entre modo día o noche con el atributo dark

<eclipsoft-id4face dark></eclipsoft-id4face>


API


Métodos


Declaración Descripción
load: async (config: ID4FaceConfig) => Promise<void> Define y valida las opciones de configuración y el token de autenticación
start: () => void Presenta el modal al usuario para empezar el proceso de verificación

Eventos


Evento Detalle Descripción Trigger
'ready' message: string Indica que el modelo está listo Al finalizar descarga de modelo de ML
'result' status: string
blinked: boolean
match: number
evidence: Blob[]		 Estado de la verificación: 'VERIFIED' | 'UNVERIFIED'
Indica si el usuario parpadeó
Porcentaje de similitud
Array con los frames que se analizaron		 Al recibir respuesta de la validación
'failed' status: string
message: string		 Estado de la verificación: 'FAILED'
Mensaje descriptivo		 Al fallar la verificación 3 veces
Nota importante sobre eventos al integrar componentes web en React.js:

“Events emitted by a Web Component may not properly propagate through a React render tree. You will need to manually attach event handlers to handle these events within your React components.”

https://legacy.reactjs.org/docs/web-components.html#using-web-components-in-react

Atributos

Atributo Descripción
dismissable Permite cerrar el modal
dark Modo nocturno
mesh Indicador de rejilla en facciones del rostro
oval Indicador en contorno del rostro
limits Muestra los limites del marco de validacion