Comienza con FACEIO

Crea y configura la aplicación:

1

Accede a FACEIO Console ↗.

2

En la vista principal de Console, selecciona Nueva aplicación. Se abrirá el Asistente de aplicaciones.

3

En el Asistente de aplicaciones, sigue las instrucciones en pantalla. Introduce el nombre de la aplicación y la URL de la política de privacidad, y selecciona un motor de reconocimiento facial, una región en la nube o un despliegue on-premises, las opciones de seguridad y la personalización del widget.

Abrir el Asistente de aplicaciones

4

Revisa la configuración y envíala. Cuando se cree la aplicación, accederás al Administrador de aplicaciones ↗, donde podrás administrarla y consultar la guía de integración.

1 Carga fio.js en tu sitio

Pega el siguiente fragmento antes de la etiqueta de cierre </body> de las páginas HTML donde utilizarás fio.js:

<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>

El fragmento anterior carga fio.js de forma asíncrona. Una página HTML básica puede inicializar la biblioteca así:

<html>
  <head>
    <title>Acceso mediante reconocimiento facial</title>
  </head>
  <body>
    <div id="faceio-modal"></div>
    <script src="https://cdn.faceio.net/fio.js"></script>
  </body>
</html>

2 Crea un objeto faceIO

Para inicializar fio.js, crea un objeto faceIO() y pasa el Public ID de la aplicación, como se muestra a continuación. Puedes colocarlo después del código de carga del paso 1. Consulta la plantilla HTML completa.

<script type="text/javascript">
   /* Inicializa fio.js con el Public ID de tu aplicación */
    const faceio = new faceIO("app-public-id");
</script>

Método enroll()

• Llama a enroll() en el objeto faceIO inicializado para registrar un usuario nuevo. El método abre el Widget de FACEIO e inicia el registro facial desde la página de registro o incorporación de tu sitio.

• Al llamar a enroll(), el widget de FACEIO se abre, solicita el consentimiento y el acceso a la cámara cuando corresponde, y captura los datos necesarios. El motor de reconocimiento facial seleccionado genera e indexa el hash biométrico utilizado para futuras autenticaciones.

• enroll() acepta varios parámetros opcionales, como locale para el idioma del widget, permissionTimeout para el tiempo de espera del permiso de cámara y payload, que contiene datos propios que puedes asociar al usuario como un correo electrónico, nombre o identificador. El payload se devuelve después de una futura autenticación.

• enroll() devuelve una Promise que se resuelve con un objeto userInfo cuando el registro se completa. Incluye el Facial ID, la fecha de registro y las estimaciones details.age y details.gender. Usa el Facial ID como clave de consulta para la cuenta correspondiente durante una futura autenticación.

• Si el usuario rechaza el acceso a la cámara o los Términos de servicio, la Promise se rechaza con el código de error correspondiente, como fioErrCode.PERMISSION_REFUSED o fioErrCode.TERMS_NOT_ACCEPTED. Consulta la sección Códigos de error para ver la lista.

• El método enroll(), sus parámetros, valores devueltos y errores están documentados en la Guía de integración.

Método authenticate()

• Llama a authenticate() en el objeto faceIO inicializado para reconocer a un usuario registrado. Utilízalo desde el flujo de inicio de sesión de tu sitio o aplicación web.

• Al llamar a authenticate(), el widget de FACEIO se abre, solicita acceso a la cámara cuando corresponde, ejecuta las comprobaciones configuradas de vivacidad y reconocimiento facial, y devuelve el resultado.

• Según la configuración de seguridad, después de que el motor reconozca al usuario, deberá confirmar el PIN Code elegido durante el registro) para que el método authenticate() se complete.

• authenticate() acepta varios parámetros opcionales, incluidos permissionTimeout para el tiempo de espera del permiso de cámara, locale para el idioma y otras opciones documentadas aquí.

• authenticate() devuelve una Promise que se resuelve con un objeto userData cuando la autenticación se completa. Sus propiedades principales son: payload (los datos vinculados durante el registro) y facialId (el identificador único del usuario). Puedes utilizarlos como claves de consulta en tu backend.

• El método authenticate(), sus parámetros, valores devueltos y errores están documentados en la Guía de integración.

Registrar un usuario nuevo

El registro de un usuario nuevo (la captura y el indexado de sus características faciales tras obtener el consentimiento) se inicia mediante una llamada a enroll():

// Crea un objeto faceIO con el Public ID de tu aplicación
const faceio = new faceIO("app-public-id");
function enrollNewUser(){
  faceio.enroll({
    "locale": "auto", // Idioma predeterminado del usuario
    "payload": {
        /* El payload que se asociará con este usuario y se devolverá tras una futura autenticación. */
        "whoami": 123456, // ID de ejemplo asociado con este usuario
        "email": "john.doe@example.com"
        }
    }).then(userInfo => {
        // Usuario registrado correctamente 
        alert(
            `Usuario registrado correctamente. Detalles:
           Facial ID único: ${userInfo.facialId}
           Fecha de registro: ${userInfo.timestamp}
           Género estimado: ${userInfo.details.gender}
           Edad aproximada: ${userInfo.details.age}`
        );
       console.log(userInfo);
       // Gestiona el resultado, guarda el Facial ID y redirige al panel
    }).catch(errCode => {
       // Registra el error producido durante el registro
       handleError(errCode);
    })
}

• Inicialización: Crea el objeto faceIO con el Public ID de tu aplicación. Sustituye "app-public-id" por el Public ID disponible en FACEIO Console ↗.

• Llamada de registro: enroll() inicia el registro, solicita el consentimiento y el acceso a la cámara cuando corresponde, y comienza la extracción de características faciales. El parámetro payload permite asociar datos propios, como un ID de usuario (whoami) y un correo electrónico. Este payload se devolverá después de una futura autenticación.

• Resultado del registro: Cuando el registro se completa, la Promise se resuelve con un objeto userInfo que contiene el Facial ID, la fecha de registro y las estimaciones details.gender y details.age. Guarda el Facial ID en tu base de datos para vincular futuras autenticaciones con el usuario.

• Tratamiento de errores: Captura los fallos de registro e implementa una función handleError() para tratar cada código. Consulta la documentación de códigos de error para ver los códigos disponibles.

Autenticar un usuario existente

De forma similar, la autenticación de un usuario registrado anteriormente se inicia mediante una llamada a authenticate():

const faceio = new faceIO("app-public-id"); // Inicializa con el Public ID de tu aplicación
function authenticateUser(){
    faceio.authenticate({
        "locale": "auto" // Idioma predeterminado del usuario
    }).then(userData => {
        console.log("Correcto, usuario identificado")
        // Lee el Facial ID devuelto para este usuario. Se mantiene igual
        // después de cada autenticación correcta en esta aplicación.
        // Guárdalo como clave de consulta de la cuenta correspondiente en el backend.
        console.log("Facial ID asociado: " + userData.facialId)
        // Lee los datos que asociaste con este usuario, si existen
        // durante el registro mediante el parámetro payload de enroll().
        console.log("Payload: " + JSON.stringify(userData.payload)) // Datos del payload del ejemplo de enroll() anterior
    }).catch(errCode => {
        handleError(errCode)
    })
}

• Inicialización: Inicializa el objeto faceIO con el Public ID, como en el ejemplo de registro.

• Llamada de autenticación: authenticate() inicia la autenticación, solicita acceso a la cámara cuando corresponde y ejecuta el reconocimiento facial. El parámetro locale define el idioma del widget.

• Resultado de la autenticación: Cuando la autenticación se completa, la Promise se resuelve con un objeto userData. userData.facialId es el identificador estable del usuario en sus autenticaciones. Utilízalo como clave principal para consultar al usuario en tu backend. El userData.payload contiene los datos asociados durante el registro, por ejemplo {"whoami": 123456, "email": "john.doe@example.com"}.

• Tratamiento de errores: Captura los fallos de autenticación e implementa una función handleError() para tratar cada código devuelto. Consulta la documentación de códigos de error para ver los códigos disponibles.