Guía oficial de integración
Para sitios y aplicaciones web

fio.js funciona en navegadores modernos compatibles con una cámara web estándar o la cámara de un teléfono, sin necesidad de un sensor biométrico dedicado. La biblioteca JavaScript es independiente del framework y puede utilizarse con React, Vue, Angular, Next.js o JavaScript sin framework.

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

<script type="text/javascript">
  /* Crea una instancia de fio.js con el Public ID */
  const faceio = new faceIO("app-public-id");
</script>

<button onclick="enrollNewUser()">Registrar usuario nuevo</button>
<button onclick="authenticateUser()">Autenticar usuario</button>

<script type="text/javascript">
  const faceio = new faceIO("app-public-id");

  function enrollNewUser() {
    // faceio.enroll() inicia el flujo de registro
  }

  function authenticateUser() {
    // faceio.authenticate() inicia el flujo de autenticación
  }

  function handleError(errCode) {
    // Gestiona el error aquí
  }
</script>

Inicia el Widget de FACEIO para registrar un usuario nuevo mediante reconocimiento facial. Es el equivalente sin contraseña de un registro tradicional. Si la operación finaliza correctamente, devuelve una Promise resuelta con un objeto userInfo que contiene el Facial ID único del usuario, la marca de tiempo del registro y estimaciones demográficas de género y edad.

// Crea una instancia de fio.js 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": {
      /* Payload que se asociará con este usuario y se devolverá en sus futuras autenticaciones. */
      "whoami": 123456, // Identificador de ejemplo asociado a 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);
     // Procesa el resultado, guarda el Facial ID y redirige al panel
  }).catch(errCode => {
     // Registra el error producido durante el registro
     handleError(errCode);
  })
}

Inicia el Widget de FACEIO para verificar a un usuario registrado previamente. Es el equivalente sin contraseña de un inicio de sesión tradicional. Si la operación finaliza correctamente, devuelve una Promise resuelta con un objeto userData que contiene el Facial ID del usuario, la marca de tiempo de autenticación y el payload asociado durante el registro.

const faceio = new faceIO("app-public-id"); // Inicializa fio.js con el Public ID de tu aplicación
function authenticateUser(){
  faceio.authenticate({
      "locale": "auto" // Idioma predeterminado del usuario
  }).then(userData => {
      console.log("Operación correcta, usuario identificado")
      // Obtén el Facial ID asociado a este usuario. Será el mismo
      // en cada autenticación posterior correcta. FACEIO recomienda 
      // utilizar este Facial ID para identificar de forma única 
      // a los usuarios registrados en tu backend.
      console.log("Facial ID asociado: " + userData.facialId)
      // Obtén los datos arbitrarios asociados previamente a este usuario
      // durante el registro mediante el parámetro payload de enroll().
      console.log("Payload: " + JSON.stringify(userData.payload)) // Datos del ejemplo de enroll() anterior
  }).catch(errCode => {
      handleError(errCode)
  })
}

Reinicia la sesión actual de FACEIO para poder realizar una nueva llamada a enroll() o authenticate() en la misma página sin recargarla por completo. Resulta útil en terminales compartidos, puntos de registro en eventos u otros flujos donde varias personas utilizan la misma sesión del navegador de forma consecutiva.

Cuando enroll() o authenticate() fallan, la Promise se rechaza con un valor numérico fioErrCode. Gestiona los errores evaluando este valor dentro del controlador .catch(). Para restartSession(), comprueba el valor booleano devuelto (true o false).

Una implementación de referencia con enroll() y authenticate() y manejo de errores. Utilízala como punto de partida para tu integración.

Utiliza estas guías aportadas por la comunidad para implementar fio.js con React, Vue, Angular, Next.js o JavaScript sin framework, y consulta ejemplos para proyectos de React Native y Flutter.