Saltar al contenido principal

Valida una identidad en modo embebido

Valida una identidad en modo embebido

Esta guía complementa la integración principal de Disclosure y se enfoca en los detalles específicos del modo embebido con el SDK web @soyio/soyio-widget.

Alcance del flujo embebido

Actualmente, el modo embebido soporta solo Disclosure con disclosure_request_id ya creado.

No se soporta la creación del disclosure request desde frontend en este modo.

Configuración obligatoria de CSP (whitelisted_domains)

Para usar Disclosure embebido debes registrar los dominios host en whitelisted_domains de tu compañía.

Si el dominio donde montas el flujo embebido no está permitido, el navegador bloqueará el render por política CSP (frame-ancestors).

En modo embebido, Soyio arma frame-ancestors con:

  • referer de la request
  • whitelisted_domains de la configuración

Qué cubre esta guía​

  • Configuración de CSP para modo embebido.
  • Implementación con DisclosureRequestBox.
  • Consideraciones de passkeys y troubleshooting.

Requisitos​

  1. Tener un disclosure_request_id ya creado (requisito obligatorio para embedded).
  2. Configurar whitelisted_domains con los orígenes donde se montará el flujo embebido.
  3. Instalar el SDK web:
npm install @soyio/soyio-widget

Implementación (SDK Web)​

<div id="embedded-disclosure"></div>

<script type="module">
  import { DisclosureRequestBox } from "@soyio/soyio-widget";

  const widget = new DisclosureRequestBox({
    disclosureRequestId: "<disclosure_request_id>",
    customColor: "#0F172A", // opcional
    onReady: () => {
      console.log("Embedded disclosure ready");
    },
    onEvent: (event) => {
      console.log("Embedded disclosure event:", event);
    },
    height: "720px", // opcional
    minHeight: "640px", // opcional
    isSandbox: true, // opcional
  });

  widget.mount("#embedded-disclosure");
</script>

Passkeys en modo embebido​

La creación y autenticación con passkeys no siempre está soportada dentro de contextos embebidos. En esos casos, el SDK abre un popup temporal para completar passkey y luego retorna automáticamente al flujo embebido.

Troubleshooting CSP​

Si ves la pantalla en blanco o errores en consola tipo Refused to frame ... because an ancestor violates Content Security Policy, revisa:

  1. Que el origen host esté en whitelisted_domains.
  2. Que el dominio de staging/producción sea exactamente el esperado.