sunuid-sdk 1.0.51 → 1.0.52

package/examples/secure-integration-example.js

@@ -0,0 +1,186 @@
+// ========================================
+// INTÉGRATION SÉCURISÉE SUNUID SDK
+// ========================================
+// Les credentials ne sont JAMAIS exposés dans le code client
+
+// 1. INCLUSION DES SCRIPTS (dans le HTML)
+/*
+<script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
+<script src="https://unpkg.com/sunuid-sdk@1.0.34/dist/sunuid-sdk.min.js"></script>
+*/
+
+// 2. CONFIGURATION SÉCURISÉE (sans credentials)
+const secureConfig = {
+    // Aucun credential ici - ils seront récupérés via secure-init.php
+    type: 2, // 1=KYC, 2=AUTH, 3=SIGNATURE
+    partnerName: 'MonApplication', // Nom de votre application
+    theme: 'light',
+    language: 'fr',
+    
+    // Activer l'initialisation sécurisée
+    secureInit: true,
+    secureInitUrl: '/secure-init.php', // URL vers votre endpoint sécurisé
+    
+    // Options de sécurité
+    enableSecurityLogs: true,
+    validateInputs: true,
+    maxRetries: 3,
+    requestTimeout: 10000,
+    
+    // Callbacks
+    onSuccess: (data) => console.log('🎉 Authentification réussie:', data),
+    onError: (error) => console.error('💥 Erreur:', error),
+    onStatusUpdate: (status) => console.log('📊 Statut:', status)
+};
+
+// 3. CODE D'INTÉGRATION SÉCURISÉE
+async function initSunuIDSecure() {
+    try {
+        console.log('🔒 Initialisation sécurisée...');
+        
+        // Créer l'instance SDK avec configuration sécurisée
+        const sunuid = new SunuID(secureConfig);
+        
+        // Initialiser (les credentials seront récupérés automatiquement)
+        await sunuid.init();
+        
+        console.log('✅ SDK initialisé de manière sécurisée');
+        console.log('🔒 Credentials récupérés via token sécurisé');
+        
+        // Générer le QR code
+        const result = await sunuid.generateQR('qr-container');
+        
+        console.log('✅ QR Code généré:', result.qrCodeUrl);
+        return result;
+        
+    } catch (error) {
+        console.error('❌ Erreur sécurisée:', error.message);
+        throw error;
+    }
+}
+
+// 4. UTILISATION SIMPLE
+// initSunuIDSecure().then(result => console.log('Succès:', result));
+
+// ========================================
+// EXEMPLE AVEC GESTION D'ÉTAT SÉCURISÉE
+// ========================================
+
+let secureSunuidInstance = null;
+
+async function initSecureSDK() {
+    if (secureSunuidInstance) {
+        console.log('SDK sécurisé déjà initialisé');
+        return secureSunuidInstance;
+    }
+    
+    console.log('🔒 Création instance SDK sécurisée...');
+    secureSunuidInstance = new SunuID(secureConfig);
+    await secureSunuidInstance.init();
+    
+    console.log('✅ SDK sécurisé initialisé');
+    return secureSunuidInstance;
+}
+
+async function generateSecureQRCode(containerId = 'qr-container') {
+    if (!secureSunuidInstance) {
+        await initSecureSDK();
+    }
+    
+    return await secureSunuidInstance.generateQR(containerId);
+}
+
+// ========================================
+// EXEMPLE AVEC DIFFÉRENTS TYPES SÉCURISÉS
+// ========================================
+
+// Authentification sécurisée
+async function generateSecureAuthQR() {
+    const authConfig = { ...secureConfig, type: 2 };
+    const sunuid = new SunuID(authConfig);
+    await sunuid.init();
+    return await sunuid.generateQR('qr-container');
+}
+
+// KYC sécurisé
+async function generateSecureKYCQR() {
+    const kycConfig = { ...secureConfig, type: 1 };
+    const sunuid = new SunuID(kycConfig);
+    await sunuid.init();
+    return await sunuid.generateQR('qr-container');
+}
+
+// Signature sécurisée
+async function generateSecureSignatureQR() {
+    const signatureConfig = { ...secureConfig, type: 3 };
+    const sunuid = new SunuID(signatureConfig);
+    await sunuid.init();
+    return await sunuid.generateQR('qr-container');
+}
+
+// ========================================
+// EXEMPLE COMPLET AVEC HTML
+// ========================================
+
+/*
+HTML requis :
+
+<div id="qr-container">
+    <!-- Le QR code sera affiché ici -->
+</div>
+
+<button onclick="initSunuIDSecure()">Générer QR Code Sécurisé</button>
+*/
+
+// ========================================
+// FONCTIONS UTILITAIRES SÉCURISÉES
+// ========================================
+
+// Vérifier le statut de sécurité
+function checkSecurityStatus() {
+    if (!secureSunuidInstance) {
+        return { initialized: false, secure: false };
+    }
+    
+    return {
+        initialized: secureSunuidInstance.isInitialized,
+        secure: secureSunuidInstance.config.secureInit,
+        token: secureSunuidInstance.config.token ? '***' + secureSunuidInstance.config.token.slice(-8) : null,
+        websocket: secureSunuidInstance.getWebSocketStatus()
+    };
+}
+
+// Obtenir les logs de sécurité
+function getSecurityLogs() {
+    if (!secureSunuidInstance) {
+        return [];
+    }
+    return secureSunuidInstance.getSecurityLogs();
+}
+
+// Nettoyer les logs de sécurité
+function clearSecurityLogs() {
+    if (secureSunuidInstance) {
+        secureSunuidInstance.clearSecurityLogs();
+    }
+}
+
+// ========================================
+// EXPORT POUR UTILISATION MODULE
+// ========================================
+
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = {
+        initSunuIDSecure,
+        initSecureSDK,
+        generateSecureQRCode,
+        generateSecureAuthQR,
+        generateSecureKYCQR,
+        generateSecureSignatureQR,
+        checkSecurityStatus,
+        getSecurityLogs,
+        clearSecurityLogs,
+        secureConfig
+    };
+}
+

package/examples/secure-integration.html

@@ -0,0 +1,410 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SunuID SDK - Intégration Sécurisée</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .header h1 {
+            color: #333;
+            margin-bottom: 10px;
+        }
+        .header p {
+            color: #666;
+            font-size: 16px;
+        }
+        .security-info {
+            background: #e8f5e8;
+            border: 1px solid #4caf50;
+            border-radius: 5px;
+            padding: 15px;
+            margin-bottom: 20px;
+        }
+        .security-info h3 {
+            color: #2e7d32;
+            margin-top: 0;
+        }
+        .qr-container {
+            text-align: center;
+            margin: 20px 0;
+            min-height: 300px;
+            border: 2px dashed #ddd;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .qr-container.loading {
+            background: #f8f9fa;
+        }
+        .qr-container.error {
+            border-color: #dc3545;
+            background: #f8d7da;
+        }
+        .qr-container.success {
+            border-color: #28a745;
+            background: #d4edda;
+        }
+        .buttons {
+            text-align: center;
+            margin: 20px 0;
+        }
+        .btn {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 5px;
+            cursor: pointer;
+            margin: 5px;
+            font-size: 16px;
+        }
+        .btn:hover {
+            background: #0056b3;
+        }
+        .btn:disabled {
+            background: #6c757d;
+            cursor: not-allowed;
+        }
+        .btn.success {
+            background: #28a745;
+        }
+        .btn.success:hover {
+            background: #1e7e34;
+        }
+        .btn.warning {
+            background: #ffc107;
+            color: #212529;
+        }
+        .btn.warning:hover {
+            background: #e0a800;
+        }
+        .status {
+            margin: 20px 0;
+            padding: 15px;
+            border-radius: 5px;
+            font-family: monospace;
+            font-size: 14px;
+        }
+        .status.info {
+            background: #d1ecf1;
+            border: 1px solid #bee5eb;
+            color: #0c5460;
+        }
+        .status.success {
+            background: #d4edda;
+            border: 1px solid #c3e6cb;
+            color: #155724;
+        }
+        .status.error {
+            background: #f8d7da;
+            border: 1px solid #f5c6cb;
+            color: #721c24;
+        }
+        .logs {
+            background: #f8f9fa;
+            border: 1px solid #dee2e6;
+            border-radius: 5px;
+            padding: 15px;
+            margin-top: 20px;
+            max-height: 200px;
+            overflow-y: auto;
+        }
+        .logs h4 {
+            margin-top: 0;
+            color: #495057;
+        }
+        .log-entry {
+            margin: 5px 0;
+            padding: 5px;
+            border-left: 3px solid #007bff;
+            background: white;
+        }
+        .log-entry.error {
+            border-left-color: #dc3545;
+        }
+        .log-entry.success {
+            border-left-color: #28a745;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🔒 SunuID SDK - Intégration Sécurisée</h1>
+            <p>Authentification sécurisée sans exposition des credentials</p>
+        </div>
+
+        <div class="security-info">
+            <h3>🛡️ Sécurité Garantie</h3>
+            <p><strong>Aucun credential n'est exposé dans le code client.</strong> Les credentials sont récupérés de manière sécurisée via un token temporaire généré par le serveur.</p>
+        </div>
+
+        <div class="buttons">
+            <button class="btn" onclick="initSecureSDK()">🔒 Initialiser SDK Sécurisé</button>
+            <button class="btn success" onclick="generateAuthQR()">🔐 Authentification</button>
+            <button class="btn warning" onclick="generateKYCQR()">📋 KYC</button>
+            <button class="btn" onclick="generateSignatureQR()">✍️ Signature</button>
+            <button class="btn" onclick="checkStatus()">📊 Statut</button>
+            <button class="btn" onclick="showLogs()">📝 Logs</button>
+        </div>
+
+        <div id="qr-container" class="qr-container">
+            <p>Cliquez sur "Initialiser SDK Sécurisé" pour commencer</p>
+        </div>
+
+        <div id="status" class="status info" style="display: none;">
+            <!-- Le statut sera affiché ici -->
+        </div>
+
+        <div id="logs" class="logs" style="display: none;">
+            <h4>📝 Logs de Sécurité</h4>
+            <div id="log-content">
+                <!-- Les logs seront affichés ici -->
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts requis -->
+    <script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
+    <script src="../src/sunuid-sdk.js"></script>
+
+    <script>
+        // Configuration sécurisée (sans credentials)
+        const secureConfig = {
+            type: 2, // Authentification par défaut
+            partnerName: 'DemoSécurisée',
+            theme: 'light',
+            language: 'fr',
+            
+            // Activer l'initialisation sécurisée
+            secureInit: true,
+            secureInitUrl: '../secure-init.php', // Chemin vers votre endpoint sécurisé
+            
+            // Options de sécurité
+            enableSecurityLogs: true,
+            validateInputs: true,
+            maxRetries: 3,
+            requestTimeout: 10000,
+            
+            // Callbacks
+            onSuccess: (data) => {
+                console.log('🎉 Authentification réussie:', data);
+                showStatus('✅ Authentification réussie !', 'success');
+                updateQRContainer('success', '🎉 Authentification réussie !');
+            },
+            onError: (error) => {
+                console.error('💥 Erreur:', error);
+                showStatus('❌ Erreur: ' + error.message, 'error');
+                updateQRContainer('error', '❌ Erreur: ' + error.message);
+            },
+            onStatusUpdate: (status) => {
+                console.log('📊 Statut:', status);
+                showStatus('📊 Mise à jour: ' + JSON.stringify(status), 'info');
+            }
+        };
+
+        let secureSunuidInstance = null;
+
+        // Initialiser le SDK de manière sécurisée
+        async function initSecureSDK() {
+            try {
+                showStatus('🔒 Initialisation sécurisée en cours...', 'info');
+                updateQRContainer('loading', '🔒 Initialisation sécurisée...');
+
+                if (secureSunuidInstance) {
+                    showStatus('⚠️ SDK déjà initialisé', 'info');
+                    return secureSunuidInstance;
+                }
+
+                console.log('🔒 Création instance SDK sécurisée...');
+                secureSunuidInstance = new SunuID(secureConfig);
+                await secureSunuidInstance.init();
+
+                showStatus('✅ SDK sécurisé initialisé avec succès', 'success');
+                updateQRContainer('success', '✅ SDK initialisé ! Cliquez sur un type de service.');
+                
+                console.log('✅ SDK sécurisé initialisé');
+                return secureSunuidInstance;
+
+            } catch (error) {
+                console.error('❌ Erreur initialisation sécurisée:', error);
+                showStatus('❌ Erreur: ' + error.message, 'error');
+                updateQRContainer('error', '❌ Erreur: ' + error.message);
+                throw error;
+            }
+        }
+
+        // Générer QR code d'authentification
+        async function generateAuthQR() {
+            try {
+                if (!secureSunuidInstance) {
+                    await initSecureSDK();
+                }
+
+                showStatus('🔐 Génération QR Authentification...', 'info');
+                updateQRContainer('loading', '🔐 Génération QR Authentification...');
+
+                const result = await secureSunuidInstance.generateQR('qr-container');
+                
+                showStatus('✅ QR Authentification généré', 'success');
+                console.log('✅ QR Authentification:', result);
+                
+                return result;
+
+            } catch (error) {
+                console.error('❌ Erreur QR Authentification:', error);
+                showStatus('❌ Erreur: ' + error.message, 'error');
+                updateQRContainer('error', '❌ Erreur: ' + error.message);
+            }
+        }
+
+        // Générer QR code KYC
+        async function generateKYCQR() {
+            try {
+                if (!secureSunuidInstance) {
+                    await initSecureSDK();
+                }
+
+                showStatus('📋 Génération QR KYC...', 'info');
+                updateQRContainer('loading', '📋 Génération QR KYC...');
+
+                const result = await secureSunuidInstance.generateKYCQR('qr-container');
+                
+                showStatus('✅ QR KYC généré', 'success');
+                console.log('✅ QR KYC:', result);
+                
+                return result;
+
+            } catch (error) {
+                console.error('❌ Erreur QR KYC:', error);
+                showStatus('❌ Erreur: ' + error.message, 'error');
+                updateQRContainer('error', '❌ Erreur: ' + error.message);
+            }
+        }
+
+        // Générer QR code Signature
+        async function generateSignatureQR() {
+            try {
+                if (!secureSunuidInstance) {
+                    await initSecureSDK();
+                }
+
+                showStatus('✍️ Génération QR Signature...', 'info');
+                updateQRContainer('loading', '✍️ Génération QR Signature...');
+
+                const result = await secureSunuidInstance.generateSignatureQR('qr-container');
+                
+                showStatus('✅ QR Signature généré', 'success');
+                console.log('✅ QR Signature:', result);
+                
+                return result;
+
+            } catch (error) {
+                console.error('❌ Erreur QR Signature:', error);
+                showStatus('❌ Erreur: ' + error.message, 'error');
+                updateQRContainer('error', '❌ Erreur: ' + error.message);
+            }
+        }
+
+        // Vérifier le statut
+        function checkStatus() {
+            if (!secureSunuidInstance) {
+                showStatus('⚠️ SDK non initialisé', 'info');
+                return;
+            }
+
+            const status = {
+                initialized: secureSunuidInstance.isInitialized,
+                secure: secureSunuidInstance.config.secureInit,
+                token: secureSunuidInstance.config.token ? '***' + secureSunuidInstance.config.token.slice(-8) : null,
+                websocket: secureSunuidInstance.getWebSocketStatus(),
+                partnerName: secureSunuidInstance.config.partnerName,
+                type: secureSunuidInstance.config.type
+            };
+
+            showStatus('📊 Statut: ' + JSON.stringify(status, null, 2), 'info');
+        }
+
+        // Afficher les logs
+        function showLogs() {
+            if (!secureSunuidInstance) {
+                showStatus('⚠️ SDK non initialisé', 'info');
+                return;
+            }
+
+            const logs = secureSunuidInstance.getSecurityLogs();
+            const logContent = document.getElementById('log-content');
+            const logsDiv = document.getElementById('logs');
+
+            if (logs.length === 0) {
+                logContent.innerHTML = '<p>Aucun log disponible</p>';
+            } else {
+                logContent.innerHTML = logs.map(log => `
+                    <div class="log-entry ${log.event.includes('ERROR') ? 'error' : log.event.includes('SUCCESS') ? 'success' : ''}">
+                        <strong>${log.timestamp}</strong> - ${log.event}<br>
+                        <small>${JSON.stringify(log.data)}</small>
+                    </div>
+                `).join('');
+            }
+
+            logsDiv.style.display = 'block';
+        }
+
+        // Fonctions utilitaires
+        function showStatus(message, type) {
+            const statusDiv = document.getElementById('status');
+            statusDiv.textContent = message;
+            statusDiv.className = `status ${type}`;
+            statusDiv.style.display = 'block';
+        }
+
+        function updateQRContainer(state, message) {
+            const container = document.getElementById('qr-container');
+            container.className = `qr-container ${state}`;
+            
+            if (state === 'loading') {
+                container.innerHTML = `
+                    <div>
+                        <div style="width: 50px; height: 50px; border: 4px solid #f3f3f3; border-top: 4px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px auto;"></div>
+                        <p>${message}</p>
+                    </div>
+                    <style>
+                        @keyframes spin {
+                            0% { transform: rotate(0deg); }
+                            100% { transform: rotate(360deg); }
+                        }
+                    </style>
+                `;
+            } else if (state === 'error') {
+                container.innerHTML = `<p style="color: #dc3545;">${message}</p>`;
+            } else if (state === 'success') {
+                container.innerHTML = `<p style="color: #28a745;">${message}</p>`;
+            }
+        }
+
+        // Initialisation automatique au chargement (optionnel)
+        // window.addEventListener('load', () => {
+        //     console.log('🚀 Page chargée, prêt pour l\'intégration sécurisée');
+        // });
+    </script>
+</body>
+</html>
+