Requisitos del navegador

Lee esto antes de depurar un flujo embebido que no arranca. La mayoría de los reportes se reducen a un header de tu propia página, y los navegadores reportan estos fallos mal, con frecuencia no reportan nada.

En todo lo que sigue, usa sdk.dev.auvral.com y verify.dev.auvral.com en sandbox.

Content-Security-Policy

Si tu página envía un Content-Security-Policy, tiene que permitir tanto el script del SDK como la capa de verificación:

Content-Security-Policy:
  script-src 'self' https://sdk.auvral.com;
  frame-src  'self' https://verify.auvral.com;

Falta script-src: AuvralVerification is not defined. La etiqueta de script está en tu HTML pero el global nunca aparece.

Falta frame-src: init() corre sin quejarse, la capa aparece, y está en blanco. onResult nunca se dispara.

Ambos registran una violación de CSP en la consola. Filtra por Content-Security-Policy si tu consola tiene mucho ruido.

Permissions-Policy

Este es el que le cuesta una tarde a la gente.

Si tu página envía Permissions-Policy: camera=(), la cámara queda deshabilitada para la página y para todo lo que ella embeba. Una página no puede otorgar un permiso que ella misma no tiene, así que la capa carga, tu usuario llega al paso de la cámara, y la cámara nunca se enciende.

Delega el permiso explícitamente:

Permissions-Policy: camera=(self "https://verify.auvral.com")

Síntoma: el flujo se dibuja, aparece el paso de la cámara, y la cámara falla, normalmente con un NotAllowedError, a menudo sin ningún diálogo de permiso. Como nunca le preguntan a tu usuario, esto se lee como "la cámara está rota" y no como "se denegó el permiso".

Si no envías ningún header Permissions-Policy, no hay nada que arreglar.

HTTPS

Las cámaras solo funcionan en un contexto seguro, así que tu página tiene que servirse por HTTPS.

localhost cuenta como seguro, así que el desarrollo local funciona sin certificados. Una dirección de red local como http://192.168.1.20:3000 no, que es exactamente lo que la gente usa cuando prueba en un celular. Usa un túnel (ngrok, cloudflared) o un certificado local para eso.

Tu propia página

La capa cubre el viewport con un z-index muy alto. Dos cosas que revisar:

• Elementos fijos tuyos con valores extremos de z-index, un widget de soporte o un banner de cookies, pueden terminar encima de ella.
• El bloqueo de scroll que tu página hace para sus propios modales puede pelearse con la capa. El SDK no bloquea el scroll por su cuenta.

Lista rápida

Antes de reportar un problema de integración, confirma:

• La página está en HTTPS, o en localhost.
• script-src permite el host del SDK.
• frame-src permite el host del verify.
• Si envías Permissions-Policy, delega camera al host del verify.
• allowedOrigins en POST /v1/sessions contiene el origen exacto de tu página: esquema, host y puerto, sin ruta. De esto depende onResult.
• AuvralVerification.version en la consola muestra la versión que esperas.

Relacionado

• SDK web
• Referencia del SDK