Integration Guide

Include the SDK files in your HTML:

<!-- Include CSS -->
<link rel="stylesheet" href="modal.css">

<!-- Include SDK files -->
<script src="sdk-config.js"></script>
<script src="verification-sdk.js"></script>

Configure the SDK in sdk-config.js:

window.verificationSDKOptions = {
    baseUrl: 'https://verify.test.okid.io',        // Your v2client URL
    onSuccess: function(data) {
        console.log('Verification completed:', data);
        // Handle successful verification
        // - Update user status in your database
        // - Redirect to success page
        // - Enable restricted features
    },
    onError: function(error) {
        console.error('Verification error:', error);
        // Handle verification error
        // - Show error message to user
        // - Log error for debugging
        // - Provide retry options
    },
    onClose: function() {
        console.log('Modal closed');
        // Handle modal close
        // - Clean up any temporary state
        // - Return to previous screen
    }
};

Advanced event handling:

// Listen for iframe messages
window.addEventListener('message', (event) => {
    if (event.origin !== 'https://verify.test.okid.io') return;
    
    const { type, data } = event.data;
    
    switch (type) {
        case 'verification_complete':
            handleVerificationSuccess(data);
            break;
        case 'verification_error':
            handleVerificationError(data);
            break;
        case 'verification_closed':
            handleVerificationClosed();
            break;
        case 'verification_step_change':
            handleStepChange(data.step);
            break;
    }
});

function handleVerificationSuccess(data) {
    // Update user status in your system
    updateUserVerificationStatus(data.user_id, 'verified');
    
    // Show success message
    showSuccessMessage('Verification completed successfully!');
    
    // Redirect or enable features
    window.location.href = '/dashboard';
}

Webhook endpoint implementation:

// Webhook endpoint
app.post('/api/webhooks/verification', (req, res) => {
    const { verification_id, status, user_data } = req.body;
    
    // Verify webhook signature (recommended)
    const signature = req.headers['x-webhook-signature'];
    if (!verifyWebhookSignature(req.body, signature)) {
        return res.status(401).json({ error: 'Invalid signature' });
    }
    
    // Handle different verification statuses
    switch (status) {
        case 'completed':
            handleVerificationCompleted(verification_id, user_data);
            break;
        case 'failed':
            handleVerificationFailed(verification_id, user_data);
            break;
        case 'expired':
            handleVerificationExpired(verification_id);
            break;
    }
    
    res.json({ received: true });
});

function handleVerificationCompleted(verificationId, userData) {
    // Update user status in database
    updateUserVerificationStatus(userData.user_id, 'verified');
    
    // Send confirmation email
    sendVerificationConfirmationEmail(userData.email);
    
    // Log completion
    console.log(`Verification completed for user: ${userData.user_id}`);
}

Secure message handling:

// Secure iframe message handling
const ALLOWED_ORIGINS = ['https://verify.test.okid.io', 'https://verify.yourdomain.com'];

window.addEventListener('message', (event) => {
    // Validate origin
    if (!ALLOWED_ORIGINS.includes(event.origin)) {
        console.warn('Rejected message from untrusted origin:', event.origin);
        return;
    }
    
    // Validate message structure
    if (!event.data || typeof event.data !== 'object' || !event.data.type) {
        console.warn('Invalid message structure');
        return;
    }
    
    // Process trusted message
    handleTrustedMessage(event.data);
});

// Rate limiting implementation
const rateLimiter = new Map();

function checkRateLimit(userId) {
    const now = Date.now();
    const userRequests = rateLimiter.get(userId) || [];
    
    // Remove old requests (older than 1 hour)
    const recentRequests = userRequests.filter(time => now - time < 3600000);
    
    // Check if user has exceeded limit (5 requests per hour)
    if (recentRequests.length >= 5) {
        throw new Error('Rate limit exceeded');
    }
    
    // Update user requests
    recentRequests.push(now);
    rateLimiter.set(userId, recentRequests);
}