JAAK KYC Mosaic Web

curl -X POST https://sandbox.kyc.jaak.ai/api/v1/sessions \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "kyc",
    "metadata": {
      "user_id": "12345",
      "campaign": "onboarding"
    }
  }'

{
  "session_id": "sess_abc123",
  "session_url": "https://sandbox.kyc.jaak.ai/session/jsi8lPd",
  "status": "pending",
  "created_at": "2025-01-15T10:30:00Z"
}

const config = {
    steps: [
        { key: 'DOCUMENT_EXTRACT' },
        { key: 'DOCUMENT_VERIFY' },
        { key: 'IVERIFICATION' }
    ],
    shortKey: 'jsi8lPd'  // El shortKey obtenido en el paso 2
};

// Paso 1: Crear sesión en tu backend
async function createKYCSession(userId) {
    const response = await fetch('https://sandbox.kyc.jaak.ai/api/v1/sessions', {
        method: 'POST',
        headers: {
            'Authorization': 'Bearer YOUR_API_TOKEN',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            type: 'kyc',
            metadata: { user_id: userId }
        })
    });
    
    const data = await response.json();
    return data;
}

// Paso 2: Extraer shortKey de la URL
function extractShortKey(sessionUrl) {
    // sessionUrl: "https://sandbox.kyc.jaak.ai/session/jsi8lPd"
    const parts = sessionUrl.split('/');
    return parts[parts.length - 1]; // "jsi8lPd"
}

// Paso 3: Usar shortKey en tu integración
async function initializeKYC(userId) {
    // Crear sesión
    const session = await createKYCSession(userId);
    
    // Extraer shortKey
    const shortKey = extractShortKey(session.session_url);
    
    // Opción A: Usar con Embed
    const embedConfig = {
        steps: [
            { key: 'DOCUMENT_EXTRACT' },
            { key: 'DOCUMENT_VERIFY' },
            { key: 'IVERIFICATION' }
        ],
        shortKey: shortKey
    };
    
    // Enviar al iframe
    document.getElementById('kycMosaic').contentWindow.postMessage({
        type: 'CONFIG',
        data: embedConfig
    }, '*');
    
    // Opción B: Generar Link
    const kycLink = `https://mosaic.qa.jaak.ai/link?shortKey=${shortKey}&steps=DOCUMENT_EXTRACT,DOCUMENT_VERIFY,IVERIFICATION`;
    
    return { shortKey, kycLink };
}

<iframe 
    id="kycMosaic" 
    src="https://mosaic.sandbox.jaak.ai/"
    width="100%" 
    height="600"
    allow="camera; geolocation">
</iframe>

const config = {
    steps: [
        { key: 'DOCUMENT_EXTRACT' },
        { key: 'DOCUMENT_VERIFY' },
        { key: 'IVERIFICATION' }
    ],
    shortKey: 'SU_SHORT_KEY_AQUI'
};

document.getElementById('kycMosaic')
    .contentWindow.postMessage({
        type: 'CONFIG',
        data: config
    }, '*');

window.addEventListener('message', function(event) {
    switch(event.data.type) {
        case 'FLOW_COMPLETE':
            console.log('KYC completado', event.data);
            // Procesar resultados
            break;
            
        case 'ERROR':
            console.error('Error', event.data);
            // Manejar error
            break;
    }
});

let directWindow = null;

function openDirectKYC() {
    const url = 'https://mosaic.sandbox.jaak.ai/direct';
    const features = 'width=800,height=600';
    
    directWindow = window.open(url, 'kyc', features);
}

window.addEventListener('message', function(event) {
    if (event.data.type === 'READY') {
        const config = {
            steps: [
                { key: 'DOCUMENT_EXTRACT' },
                { key: 'IVERIFICATION' }
            ],
            shortKey: 'SU_SHORT_KEY_AQUI'
        };
        
        directWindow.postMessage({
            type: 'CONFIG',
            data: config
        }, '*');
    }
});

window.addEventListener('message', function(event) {
    switch(event.data.type) {
        case 'FLOW_COMPLETE':
            console.log('KYC completado en Direct', event.data);
            break;
            
        case 'ERROR':
            console.error('Error en Direct', event.data);
            break;
    }
});

function generateKYCLink(shortKey, steps, redirectUrl) {
    const baseUrl = 'https://mosaic.sandbox.jaak.ai/link';
    const params = new URLSearchParams({
        shortKey: shortKey,
        steps: steps.join(',')
    });
    
    if (redirectUrl) {
        params.append('redirectUrl', redirectUrl);
    }
    
    return `${baseUrl}?${params.toString()}`;
}

// Uso
const link = generateKYCLink(
    'ABC123',
    ['DOCUMENT_EXTRACT', 'IVERIFICATION', 'OTO'],
    'https://mi-app.com/success'
);

console.log(link);

const config = {
    steps: [
        { key: 'WELCOME' },
        { key: 'DOCUMENT_EXTRACT' },
        { key: 'DOCUMENT_VERIFY' },
        { key: 'IVERIFICATION' },
        { key: 'OTO' },
        { key: 'FINISH' }
    ],
    shortKey: 'SU_SHORT_KEY_AQUI'
};

window.addEventListener('message', function(event) {
    const message = event.data;
    
    switch(message.type) {
        case 'READY':
            // Enviar configuración
            console.log('Mosaic listo');
            break;
            
        case 'STEP_COMPLETE':
            console.log('Paso completado:', message.data.stepKey);
            console.log('Datos del paso:', message.data.data);
            // Guardar datos del paso si es necesario
            break;
            
        case 'FLOW_COMPLETE':
            console.log('KYC completado exitosamente');
            console.log('Datos finales:', message.data);
            // Procesar resultados finales y continuar con su flujo
            break;
            
        case 'ERROR':
            console.error('Error en KYC:', message.data.error);
            console.error('Mensaje:', message.data.message);
            // Mostrar mensaje de error al usuario
            break;
            
        case 'SESSION_EXPIRED':
            console.warn('Sesión expirada');
            // Reiniciar flujo o mostrar mensaje al usuario
            break;
    }
});

{
    type: 'STEP_COMPLETE',
    data: {
        stepKey: 'DOCUMENT_EXTRACT',
        data: {
            // Datos específicos del paso
            face: 'data:image/jpeg;base64,...'
        }
    }
}

{
    type: 'FLOW_COMPLETE',
    data: {
        completedSteps: ['DOCUMENT_EXTRACT', 'IVERIFICATION', 'OTO'],
        allData: {
            DOCUMENT_EXTRACT: { /* datos */ },
            IVERIFICATION: { /* datos */ },
            OTO: { /* datos */ }
        }
    }
}

{
    type: 'ERROR',
    data: {
        error: 'AUTHENTICATION_FAILED',
        message: 'Invalid shortKey provided'
    }
}

<!-- Configuración correcta del iframe -->
<iframe 
    id="kycMosaic" 
    src="https://mosaic.sandbox.jaak.ai/"
    allow="camera; geolocation"
    width="100%" 
    height="600">
</iframe>

const config = {
    steps: [
        { 
            key: 'OTO',
            data: {
                face: 'data:image/jpeg;base64,...',        // Imagen del documento
                bestFrame: 'data:image/jpeg;base64,...'   // Imagen de liveness
            }
        }
    ],
    shortKey: 'SU_SHORT_KEY_AQUI'
};

// Buena práctica: abrir desde un evento de click
button.addEventListener('click', function() {
    openDirectKYC();
});

window.addEventListener('message', function(event) {
    // Validar origen si es necesario (producción)
    // if (event.origin !== 'https://mosaic.sandbox.jaak.ai') return;
    
    console.log('Mensaje recibido:', event.data);
});

window.addEventListener('message', function(event) {
    if (event.data.type === 'SESSION_EXPIRED') {
        console.warn('Sesión expirada');
        
        // Opción 1: Reiniciar automáticamente
        setTimeout(() => {
            sendConfiguration();
        }, 2000);
        
        // Opción 2: Mostrar mensaje y esperar acción del usuario
        // showModal('Su sesión ha expirado. ¿Desea reiniciar?');
    }
});

<!DOCTYPE html>
<html>
<head>
    <title>Onboarding - Mi App</title>
    <style>
        #kycContainer {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="kycContainer">
        <h1>Verificación de Identidad</h1>
        <p>Complete el proceso de verificación para activar su cuenta</p>
        
        <iframe 
            id="kycMosaic" 
            src="https://mosaic.sandbox.jaak.ai/"
            width="100%" 
            height="600"
            allow="camera; geolocation">
        </iframe>
    </div>

    <script>
        // Configuración
        const config = {
            steps: [
                { key: 'WELCOME' },
                { key: 'DOCUMENT_EXTRACT' },
                { key: 'DOCUMENT_VERIFY' },
                { key: 'IVERIFICATION' },
                { key: 'OTO' }
            ],
            shortKey: 'ONBOARDING_KEY_123'
        };

        // Enviar configuración cuando cargue el iframe
        window.addEventListener('load', function() {
            setTimeout(() => {
                document.getElementById('kycMosaic')
                    .contentWindow.postMessage({
                        type: 'CONFIG',
                        data: config
                    }, '*');
            }, 1000);
        });

        // Manejar eventos
        window.addEventListener('message', function(event) {
            if (event.data.type === 'FLOW_COMPLETE') {
                // Redirigir a dashboard
                window.location.href = '/dashboard?verified=true';
            }
        });
    </script>
</body>
</html>

// En una aplicación móvil o web app
class KYCVerification {
    constructor(shortKey) {
        this.shortKey = shortKey;
        this.directWindow = null;
        this.setupMessageListener();
    }

    setupMessageListener() {
        window.addEventListener('message', (event) => {
            this.handleMessage(event.data);
        });
    }

    open() {
        const url = 'https://mosaic.sandbox.jaak.ai/direct';
        const features = 'width=800,height=600,scrollbars=yes,resizable=yes';
        
        this.directWindow = window.open(url, 'kycVerification', features);
        
        if (!this.directWindow) {
            alert('Por favor permita ventanas emergentes para continuar');
            return false;
        }
        
        return true;
    }

    handleMessage(message) {
        switch(message.type) {
            case 'READY':
                this.sendConfiguration();
                break;
                
            case 'FLOW_COMPLETE':
                this.onComplete(message.data);
                break;
                
            case 'ERROR':
                this.onError(message.data);
                break;
        }
    }

    sendConfiguration() {
        if (this.directWindow && !this.directWindow.closed) {
            this.directWindow.postMessage({
                type: 'CONFIG',
                data: {
                    steps: [
                        { key: 'DOCUMENT_EXTRACT' },
                        { key: 'IVERIFICATION' },
                        { key: 'OTO' }
                    ],
                    shortKey: this.shortKey
                }
            }, '*');
        }
    }

    onComplete(data) {
        console.log('Verificación completada', data);
        // Guardar resultados en tu backend
        this.saveResults(data);
    }

    onError(error) {
        console.error('Error en verificación', error);
        alert('Hubo un error en la verificación. Por favor intente nuevamente.');
    }

    async saveResults(data) {
        try {
            const response = await fetch('/api/kyc/save', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            
            if (response.ok) {
                window.location.href = '/verification-success';
            }
        } catch (error) {
            console.error('Error guardando resultados', error);
        }
    }
}

// Uso
const kycBtn = document.getElementById('startKYC');
kycBtn.addEventListener('click', function() {
    const kyc = new KYCVerification('MOBILE_KEY_456');
    kyc.open();
});

// Script para generar enlaces de campaña
function generateCampaignLinks(campaign, recipients) {
    const baseUrl = 'https://mosaic.sandbox.jaak.ai/link';
    const campaignShortKey = 'CAMPAIGN_2025_001';
    
    const links = recipients.map(recipient => {
        const params = new URLSearchParams({
            shortKey: campaignShortKey,
            steps: 'DOCUMENT_EXTRACT,DOCUMENT_VERIFY,IVERIFICATION',
            redirectUrl: `https://mi-app.com/campaign-complete?user=${recipient.id}&campaign=${campaign.id}`
        });
        
        return {
            recipient: recipient.email,
            link: `${baseUrl}?${params.toString()}`
        };
    });
    
    return links;
}

// Generar enlaces para campaña
const campaign = {
    id: 'onboarding-q1-2025',
    name: 'Onboarding Q1 2025'
};

const recipients = [
    { id: 'user123', email: '[email protected]' },
    { id: 'user456', email: '[email protected]' }
];

const campaignLinks = generateCampaignLinks(campaign, recipients);

// Enviar emails
campaignLinks.forEach(item => {
    sendEmail({
        to: item.recipient,
        subject: 'Complete su verificación de identidad',
        body: `
            Hola,
            
            Para completar su registro, por favor complete el proceso de verificación
            haciendo clic en el siguiente enlace:
            
            ${item.link}
            
            Este enlace es válido por 30 días.
            
            Saludos,
            Equipo de Mi App
        `
    });
});

console.log('Enlaces de campaña generados:', campaignLinks);

// Configuración de producción recomendada
const PRODUCTION_CONFIG = {
    mosaicUrl: 'https://mosaic.jaak.ai/',
    shortKey: process.env.JAAK_SHORT_KEY, // Desde variable de entorno
    allowedOrigins: ['https://mosaic.jaak.ai'],
    timeout: 900000, // 15 minutos
    retryAttempts: 3
};

// Uso seguro en producción
function initKYC() {
    if (!PRODUCTION_CONFIG.shortKey) {
        console.error('Short Key no configurado');
        return;
    }
    
    // Continuar con inicialización...
}