Integración del Iframe

Paso 1: Crear una sesión

Primero, crea una sesión desde tu backend:

cURL

curl -X POST https://api.heuristik.com/v1/sessions \
  -H "Authorization: Bearer sk_live_your_key" \
  -H "Content-Type: application/json" \
  -d '{"referenceId": "user-12345"}'

Paso 2: Incrustar el iframe

HTML

index.html

<iframe
  id="heuristik-frame"
  src="https://verify.heuristik.com?token=SESSION_TOKEN"
  width="100%"
  height="600"
  frameborder="0"
  allow="camera; microphone"
></iframe>

React

VerificationFrame.tsx

interface Props {
  sessionToken: string;
}

export function VerificationFrame({ sessionToken }: Props) {
  return (
    <iframe
      src={`https://verify.heuristik.com?token=${sessionToken}`}
      width="100%"
      height={600}
      frameBorder={0}
      allow="camera; microphone"
      title="Heuristik Verification"
    />
  );
}

Vue

VerificationFrame.vue

<script setup lang="ts">
defineProps<{ sessionToken: string }>();
</script>

<template>
  <iframe
    :src="`https://verify.heuristik.com?token=${sessionToken}`"
    width="100%"
    height="600"
    frameborder="0"
    allow="camera; microphone"
    title="Heuristik Verification"
  />
</template>

Paso 3: Escuchar eventos

El iframe se comunica mediante postMessage:

events.js

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://verify.heuristik.com') return;

  const { type, payload } = event.data;

  switch (type) {
    case 'heuristik:ready':
      console.log('Iframe cargado');
      break;
    case 'heuristik:complete':
      console.log('Verificación completada:', payload.sessionId);
      break;
    case 'heuristik:error':
      console.error('Error de verificación:', payload.message);
      break;
  }
});

Seguridad

Siempre valida event.origin antes de procesar mensajes. Nunca confíes en mensajes de orígenes desconocidos.