Widget incrustable
Widget incrustable
Ejecuta la verificación dentro de tu propio sitio con un pequeño script y un iframe. El solicitante no sale de tu página (salvo en móviles, ver más abajo). Por los eventos del navegador no viaja nada del solicitante: solo nombres de evento, un nombre de paso o un código de error. El resultado te llega por webhook o API, como siempre.
Inicio rápido
- En el panel abre el flujo y añade los Orígenes de incrustación: los orígenes exactos de las páginas que alojarán el iframe
(
https://www.example.com, sin ruta, sin comodín, solo https, hasta 10). Un flujo sin orígenes no se puede incrustar. - Crea una sesión (API
POST /sessionso el panel) y pasa laurla tu página. - Añade el script y móntalo:
<div id="trustid"></div>
<script src="https://YOUR-LEGITFLASH-DOMAIN/embed/v1/embed.js"
integrity="sha384-HNjyNQ7Qo7hAYDcLlChRMLOwxo/4Y1scZIKTGk5uBCumX/2gQ6U1627VD5cDvCsa"
crossorigin="anonymous"></script>
<script>
TrustID.mount(document.getElementById('trustid'), {
url: 'https://YOUR-LEGITFLASH-DOMAIN/v/SESSION-TOKEN', // la `url` de la sesión
mobile: 'redirect', // opcional, ver "Móviles"
onEvent: (event) => console.log(event),
});
</script>
mount devuelve { iframe, destroy() } (o null si redirigió un móvil). El iframe se crea con
allow="camera", sandbox="allow-scripts allow-same-origin allow-forms" y referrerpolicy="no-referrer", y se
ajusta solo a su contenido.
Subresource Integrity
Cada versión del script tiene una ruta y un hash fijos. Usa el hash de la versión que cargues:
| Versión | Ruta | SRI |
|---|---|---|
| v1 | /embed/v1/embed.js |
sha384-HNjyNQ7Qo7hAYDcLlChRMLOwxo/4Y1scZIKTGk5uBCumX/2gQ6U1627VD5cDvCsa |
Una corrección con el mismo comportamiento se publica en la misma ruta con un hash nuevo (indicado aquí y en los cambios);
un cambio incompatible tendrá una ruta nueva (/v2/) y v1 seguirá funcionando 12 meses. Recalcula el hash tú mismo con
openssl dgst -sha384 -binary embed.js | openssl base64 -A.
Eventos
onEvent recibe { type, step?, code? }:
type |
Cuándo | Extra |
|---|---|---|
trustid:ready |
el marco cargó | |
trustid:step |
el solicitante abrió un paso | step: overview, id_front, id_back, selfie, liveness, poa |
trustid:submitted |
la evidencia se envió a revisión | |
trustid:closed |
el solicitante pulsó el botón de cerrar | |
trustid:error |
falló una petición | code: un código corto como network, too_many, steps_incomplete |
El script ignora cualquier mensaje que no venga del origen de LegitFlash y de ese iframe. Haz lo mismo si escuchas
eventos message por tu cuenta, y no tomes nunca una decisión de negocio por un evento: espera al webhook firmado.
El marco solo publica hacia el origen padre que validó con la lista del flujo (el origen de la propia página, enviado por
embed.js, o el primer origen de la lista como alternativa).
Qué debe permitir tu sitio
- Tu CSP:
frame-src https://YOUR-LEGITFLASH-DOMAINyscript-src https://YOUR-LEGITFLASH-DOMAIN(o el nonce de tu propia etiqueta script). Con SRI mantén tambiéncrossorigin="anonymous"en la etiqueta. - Cámara: el iframe lleva
allow="camera". Si creas el iframe tú, añádelo, y no definas unaPermissions-Policyque bloqueecamerapara el marco. - Enmarcado: LegitFlash responde
Content-Security-Policy: frame-ancestors <tus orígenes>solo para la página incrustada. Una página en un origen que no esté en la lista la bloquea el navegador. - Cookies: ninguna. El widget funciona con las cookies de terceros bloqueadas. El navegador del solicitante guarda una clave de dispositivo en el almacenamiento del marco; si el navegador lo bloquea, la sesión continúa hasta que se recargue la página.
Móviles
iOS exige HTTPS y un gesto del usuario para iniciar la cámara, y muchos navegadores integrados en apps restringen la cámara dentro de iframes.
Recomendamos enviar los móviles al flujo a pantalla completa: mobile: 'redirect' lo hace automáticamente (navega al
enlace sin embed; configura las URL de retorno del flujo para que el solicitante vuelva a tu sitio). En escritorio, el paso
a un móvil con QR sigue disponible dentro del marco.