npm - sunuid-sdk - Versions diffs - 1.0.51 → 1.0.53 - Mend

sunuid-sdk 1.0.51 → 1.0.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/README.md +429 -193
package/dist/sunuid-sdk.esm.js +5 -5
package/dist/sunuid-sdk.esm.js.map +1 -1
package/dist/sunuid-sdk.js +5 -5
package/dist/sunuid-sdk.js.map +1 -1
package/dist/sunuid-sdk.min.js +1 -1
package/dist/sunuid-sdk.min.js.map +1 -1
package/docs/INTEGRATION_GUIDE.md +334 -0
package/docs/SECURITY_GUIDE.md +369 -0
package/examples/.htaccess.example +190 -0
package/examples/README.md +192 -0
package/examples/auto-code.js +234 -0
package/examples/auto-integration.html +337 -0
package/examples/callback-example.html +232 -0
package/examples/config-example.js +41 -0
package/examples/demo.html +323 -0
package/examples/env.example +83 -0
package/examples/minimal-code.js +147 -0
package/examples/minimal-integration.html +157 -0
package/examples/no-loop-example.html +250 -0
package/examples/partner-name-config.js +123 -0
package/examples/production-config.js +60 -0
package/examples/secure-init.php +154 -0
package/examples/secure-integration-example.js +186 -0
package/examples/secure-integration.html +410 -0
package/examples/simple-kyc.html +95 -0
package/examples/simple-login.html +96 -0
package/examples/test-partner-name.html +251 -0
package/examples/test-production.html +200 -0
package/examples/universal-kyc.html +199 -0
package/examples/universal-login.html +148 -0
package/package.json +24 -10

package/examples/auto-integration.html ADDED Viewed

@@ -0,0 +1,337 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Intégration Auto SunuID SDK</title>
+    <!-- Socket.IO (requis) -->
+    <script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
+    <!-- SunuID SDK -->
+    <script src="https://unpkg.com/sunuid-sdk@1.0.34/dist/sunuid-sdk.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 600px;
+            margin: 50px auto;
+            padding: 20px;
+            text-align: center;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: white;
+        }
+        .container {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        }
+        .qr-container {
+            margin: 30px 0;
+            padding: 20px;
+            border: 2px dashed rgba(255, 255, 255, 0.3);
+            border-radius: 15px;
+            min-height: 300px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(255, 255, 255, 0.05);
+        }
+        .qr-container img {
+            max-width: 250px;
+            border: 3px solid rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+        }
+        .status {
+            margin: 20px 0;
+            padding: 15px;
+            border-radius: 10px;
+            font-weight: bold;
+            font-size: 16px;
+        }
+        .status.loading {
+            background: rgba(255, 193, 7, 0.2);
+            color: #ffc107;
+            border: 1px solid rgba(255, 193, 7, 0.3);
+        }
+        .status.success {
+            background: rgba(40, 167, 69, 0.2);
+            color: #28a745;
+            border: 1px solid rgba(40, 167, 69, 0.3);
+        }
+        .status.error {
+            background: rgba(220, 53, 69, 0.2);
+            color: #dc3545;
+            border: 1px solid rgba(220, 53, 69, 0.3);
+        }
+        .loading-spinner {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: #fff;
+            animation: spin 1s ease-in-out infinite;
+            margin-right: 10px;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .info {
+            margin-top: 20px;
+            font-size: 14px;
+            opacity: 0.8;
+        }
+        .retry-btn {
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            padding: 10px 20px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 14px;
+            margin-top: 15px;
+            transition: all 0.3s ease;
+        }
+        .retry-btn:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🔐 Authentification SunuID</h1>
+        <p>Initialisation et génération automatique du QR code</p>
+        <div id="status" class="status loading">
+            <span class="loading-spinner"></span>
+            Initialisation automatique en cours...
+        </div>
+        <div id="qr-container" class="qr-container">
+            <p>Chargement...</p>
+        </div>
+        <div class="info">
+            <p>📱 Scannez le QR code avec l'application SunuID</p>
+            <p>🔄 Le QR code se génère automatiquement</p>
+        </div>
+    </div>
+    <script>
+        // Configuration automatique
+        const config = {
+            clientId: '1754166754_221A57B46843D755',
+            secretId: '56d40fe70507228b27f2640ae65894177c2fedbf246e2b30978fde1fc43953c5',
+            type: 2, // 2 = Authentification
+            autoRefresh: false, // Désactivé pour éviter les appels répétitifs
+            // Désactiver l'initialisation automatique dans le constructeur
+            autoInit: false,
+            // Callbacks automatiques
+            onSuccess: (data) => {
+                console.log('🎉 Authentification réussie:', data);
+                updateStatus('✅ Authentification réussie !', 'success');
+            },
+            onError: (error) => {
+                console.error('💥 Erreur:', error);
+                updateStatus(`❌ Erreur: ${error.message}`, 'error');
+                showRetryButton();
+            },
+            onStatusUpdate: (status) => {
+                console.log('📊 Statut mis à jour:', status);
+            }
+        };
+        let sunuid = null;
+        function updateStatus(message, type = 'loading') {
+            const statusDiv = document.getElementById('status');
+            if (!statusDiv) {
+                console.warn('⚠️ Élément status non trouvé, création d\'un élément temporaire');
+                const tempStatus = document.createElement('div');
+                tempStatus.id = 'status';
+                tempStatus.className = `status ${type}`;
+                document.body.appendChild(tempStatus);
+                return;
+            }
+            const spinner = type === 'loading' ? '<span class="loading-spinner"></span>' : '';
+            statusDiv.innerHTML = spinner + message;
+            statusDiv.className = `status ${type}`;
+        }
+        function showRetryButton() {
+            const container = document.querySelector('.container');
+            if (!container) {
+                console.warn('⚠️ Container non trouvé, ajout du bouton au body');
+                const retryBtn = document.createElement('button');
+                retryBtn.className = 'retry-btn';
+                retryBtn.textContent = '🔄 Réessayer';
+                retryBtn.onclick = initAutoSunuID;
+                document.body.appendChild(retryBtn);
+                return;
+            }
+            // Vérifier si le bouton existe déjà
+            const existingBtn = container.querySelector('.retry-btn');
+            if (existingBtn) {
+                return; // Le bouton existe déjà
+            }
+            const retryBtn = document.createElement('button');
+            retryBtn.className = 'retry-btn';
+            retryBtn.textContent = '🔄 Réessayer';
+            retryBtn.onclick = initAutoSunuID;
+            container.appendChild(retryBtn);
+        }
+        async function initAutoSunuID() {
+            try {
+                // Vérifier que les éléments nécessaires sont présents
+                const qrContainer = document.getElementById('qr-container');
+                if (!qrContainer) {
+                    console.error('❌ Élément qr-container non trouvé');
+                    throw new Error('Conteneur QR non trouvé dans le DOM');
+                }
+                updateStatus('🔄 Initialisation du SDK...', 'loading');
+                // Vérifier que SunuID est disponible
+                if (typeof SunuID === 'undefined') {
+                    throw new Error('SDK SunuID non chargé. Vérifiez que les scripts sont inclus.');
+                }
+                // Créer l'instance SDK
+                sunuid = new SunuID(config);
+                // Initialiser automatiquement
+                await sunuid.init();
+                // Attendre que le WebSocket soit connecté
+                updateStatus('🔄 Connexion WebSocket...', 'loading');
+                // Attendre jusqu'à 10 secondes que le socket soit connecté
+                let attempts = 0;
+                const maxAttempts = 20; // 20 tentatives * 500ms = 10 secondes
+                while (attempts < maxAttempts) {
+                    if (sunuid.socket && sunuid.socket.connected && sunuid.socket.id) {
+                        console.log('✅ WebSocket connecté avec ID:', sunuid.socket.id);
+                        break;
+                    }
+                    await new Promise(resolve => setTimeout(resolve, 500));
+                    attempts++;
+                    console.log(`🔄 Tentative ${attempts}/${maxAttempts} - Attente WebSocket...`);
+                }
+                if (!sunuid.socket || !sunuid.socket.connected || !sunuid.socket.id) {
+                    throw new Error('WebSocket non connecté après 10 secondes');
+                }
+                updateStatus('🔄 Génération du QR code...', 'loading');
+                // Générer le QR code automatiquement
+                const result = await sunuid.generateQR('qr-container');
+                updateStatus('✅ QR code généré avec succès !', 'success');
+                console.log('✅ QR Code généré automatiquement:', result);
+                // Écouter les événements WebSocket
+                if (sunuid.socket) {
+                    sunuid.socket.on('qr_scanned', (data) => {
+                        console.log('📱 QR code scanné:', data);
+                        updateStatus('📱 QR code scanné - Authentification en cours...', 'loading');
+                    });
+                    sunuid.socket.on('auth_success', (data) => {
+                        console.log('🎉 Authentification réussie:', data);
+                        updateStatus('🎉 Authentification réussie !', 'success');
+                    });
+                    sunuid.socket.on('auth_error', (data) => {
+                        console.error('❌ Erreur d\'authentification:', data);
+                        updateStatus('❌ Erreur d\'authentification', 'error');
+                    });
+                }
+            } catch (error) {
+                console.error('❌ Erreur lors de l\'initialisation automatique:', error);
+                updateStatus(`❌ Erreur: ${error.message}`, 'error');
+                showRetryButton();
+            }
+        }
+        // Initialisation automatique au chargement de la page
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('🚀 Démarrage de l\'initialisation automatique...');
+            // Vérifier que tous les éléments nécessaires sont présents
+            const requiredElements = ['status', 'qr-container'];
+            const missingElements = requiredElements.filter(id => !document.getElementById(id));
+            if (missingElements.length > 0) {
+                console.error('❌ Éléments manquants:', missingElements);
+                console.log('🔧 Création des éléments manquants...');
+                // Créer les éléments manquants
+                missingElements.forEach(id => {
+                    const element = document.createElement('div');
+                    element.id = id;
+                    if (id === 'status') {
+                        element.className = 'status loading';
+                        element.innerHTML = '<span class="loading-spinner"></span>Initialisation...';
+                    } else if (id === 'qr-container') {
+                        element.className = 'qr-container';
+                        element.innerHTML = '<p>Chargement...</p>';
+                    }
+                    document.body.appendChild(element);
+                });
+            }
+            // Attendre un peu que tout soit chargé
+            setTimeout(() => {
+                initAutoSunuID();
+            }, 500);
+        });
+        // Gestion des erreurs globales
+        window.addEventListener('error', function(event) {
+            console.error('❌ Erreur globale:', event.error);
+            try {
+                updateStatus('❌ Erreur inattendue', 'error');
+            } catch (updateError) {
+                console.error('❌ Impossible de mettre à jour le statut:', updateError);
+            }
+        });
+        // Gestion des promesses rejetées
+        window.addEventListener('unhandledrejection', function(event) {
+            console.error('❌ Promesse rejetée:', event.reason);
+            try {
+                updateStatus('❌ Erreur de promesse', 'error');
+            } catch (updateError) {
+                console.error('❌ Impossible de mettre à jour le statut:', updateError);
+            }
+        });
+    </script>
+</body>
+</html>

package/examples/callback-example.html ADDED Viewed

@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SunuID Callback Example</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        .status {
+            padding: 15px;
+            border-radius: 5px;
+            margin: 10px 0;
+        }
+        .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
+        .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
+        .info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
+        .qr-container {
+            text-align: center;
+            margin: 20px 0;
+            padding: 20px;
+            border: 2px dashed #ccc;
+            border-radius: 10px;
+        }
+        .callback-data {
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 5px;
+            font-family: monospace;
+            white-space: pre-wrap;
+            margin: 10px 0;
+        }
+        button {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        button:hover { background: #0056b3; }
+        .hidden { display: none; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🔐 SunuID Callback Example</h1>
+        <div id="status" class="status info">
+            Initialisation en cours...
+        </div>
+        <div id="qr-section" class="hidden">
+            <h2>📱 Scannez le QR Code</h2>
+            <div id="qr-area" class="qr-container">
+                <!-- Le QR code sera affiché ici -->
+            </div>
+        </div>
+        <div id="callback-section" class="hidden">
+            <h2>✅ Authentification Réussie</h2>
+            <div id="callback-data" class="callback-data">
+                <!-- Les données du callback seront affichées ici -->
+            </div>
+            <button onclick="window.location.href='/dashboard'">Aller au Dashboard</button>
+        </div>
+        <div id="error-section" class="hidden">
+            <h2>❌ Erreur d'Authentification</h2>
+            <div id="error-data" class="callback-data">
+                <!-- Les erreurs seront affichées ici -->
+            </div>
+            <button onclick="location.reload()">Réessayer</button>
+        </div>
+    </div>
+    <!-- Socket.IO -->
+    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+    <!-- SunuID SDK -->
+    <script src="../../dist/sunuid-sdk.min.js"></script>
+    <script>
+        // Configuration du SDK avec gestion des callbacks
+        const config = {
+            apiUrl: 'https://api.sunuid.fayma.sn',
+            clientId: '1754166754_221A57B46843D755',
+            secretId: '56d40fe70507228b27f2640ae65894177c2fedbf246e2b30978fde1fc43953c5',
+            type: 2, // AUTH
+            theme: 'light',
+            language: 'fr',
+            // Configuration des callbacks
+            redirectAfterSuccess: '/dashboard?user={user_id}&session={session_id}',
+            verifySignature: false, // Désactivé pour l'exemple
+            tokenMaxAge: 300, // 5 minutes
+            // Callbacks d'authentification
+            onAuthenticationSuccess: function(userData, callbackData) {
+                console.log('🎉 Authentification réussie:', userData);
+                showSuccess(userData, callbackData);
+            },
+            onAuthenticationError: function(error, callbackData) {
+                console.error('❌ Erreur d\'authentification:', error);
+                showError(error, callbackData);
+            },
+            // Callbacks WebSocket
+            onStatusUpdate: function(status) {
+                updateStatus('Statut: ' + status, 'info');
+            },
+            onSuccess: function(data) {
+                updateStatus('Succès: ' + JSON.stringify(data), 'success');
+            },
+            onError: function(error) {
+                updateStatus('Erreur: ' + error.message, 'error');
+            }
+        };
+        // Initialiser le SDK
+        let sunuid;
+        async function initSDK() {
+            try {
+                sunuid = new SunuID(config);
+                await sunuid.init();
+                // Vérifier si on est sur une page de callback
+                if (window.location.search.includes('token=')) {
+                    updateStatus('Callback détecté, traitement en cours...', 'info');
+                    return; // Le callback sera traité automatiquement
+                }
+                // Sinon, afficher le QR code
+                showQRCode();
+            } catch (error) {
+                updateStatus('Erreur d\'initialisation: ' + error.message, 'error');
+            }
+        }
+        function showQRCode() {
+            document.getElementById('qr-section').classList.remove('hidden');
+            updateStatus('QR Code généré, scannez-le avec l\'app SunuID', 'info');
+            // Générer le QR code
+            sunuid.generateQR('qr-area').then(result => {
+                console.log('QR Code généré:', result);
+            }).catch(error => {
+                updateStatus('Erreur génération QR: ' + error.message, 'error');
+            });
+        }
+        function showSuccess(userData, callbackData) {
+            document.getElementById('qr-section').classList.add('hidden');
+            document.getElementById('callback-section').classList.remove('hidden');
+            const dataDisplay = `
+🔐 Authentification Réussie
+👤 Utilisateur: ${userData.user_id}
+🆔 Session: ${userData.session_id}
+🏢 Partenaire: ${userData.partner_id}
+📋 Type: ${getTypeName(userData.type)}
+⏰ Créé: ${new Date(userData.iat * 1000).toLocaleString()}
+⏰ Expire: ${new Date(userData.exp * 1000).toLocaleString()}
+📋 Données Callback:
+${JSON.stringify(callbackData, null, 2)}
+            `;
+            document.getElementById('callback-data').textContent = dataDisplay;
+            updateStatus('✅ Authentification réussie !', 'success');
+        }
+        function showError(error, callbackData) {
+            document.getElementById('qr-section').classList.add('hidden');
+            document.getElementById('error-section').classList.remove('hidden');
+            const errorDisplay = `
+❌ Erreur d'Authentification
+🚨 Erreur: ${error.message}
+📋 Type: ${error.name}
+⏰ Timestamp: ${new Date().toLocaleString()}
+📋 Données Callback:
+${JSON.stringify(callbackData, null, 2)}
+            `;
+            document.getElementById('error-data').textContent = errorDisplay;
+            updateStatus('❌ Erreur d\'authentification', 'error');
+        }
+        function updateStatus(message, type) {
+            const statusEl = document.getElementById('status');
+            statusEl.textContent = message;
+            statusEl.className = `status ${type}`;
+        }
+        function getTypeName(type) {
+            const types = {
+                1: 'KYC',
+                2: 'AUTH',
+                3: 'SIGNATURE'
+            };
+            return types[type] || 'INCONNU';
+        }
+        // Initialiser au chargement de la page
+        document.addEventListener('DOMContentLoaded', initSDK);
+        // Exposer globalement pour debug
+        window.sunuid = sunuid;
+    </script>
+</body>
+</html>

package/examples/config-example.js ADDED Viewed

@@ -0,0 +1,41 @@
+// 🌍 Configuration SunuID - Exemple Ultra-Simple
+// Copiez ce fichier et remplacez les valeurs par les vôtres !
+const sunuidConfig = {
+    // 🔑 Vos credentials (obtenez-les sur https://sunuid.sn/register)
+    client_id: 'VOTRE_CLIENT_ID',      // ← Remplacez par votre CLIENT_ID
+    secret_id: 'VOTRE_SECRET_ID',      // ← Remplacez par votre SECRET_ID
+    // 🎯 Type de service
+    type: 2,                           // ← 1=KYC, 2=AUTH, 3=Signature
+    // 🏢 Nom de votre entreprise
+    partner_name: 'Votre Entreprise',  // ← Remplacez par votre nom
+    // 🔧 Options avancées (optionnel)
+    options: {
+        // URL de redirection après connexion
+        redirect_url: 'https://votre-site.com/dashboard',
+        // Pour KYC uniquement
+        kyc_type: 'full',              // 'basic' ou 'full'
+        required_fields: ['identity', 'address', 'phone'],
+        // Personnalisation
+        qr_size: 300,                  // Taille du QR code
+        logo_url: 'https://votre-site.com/logo.png', // Votre logo
+        theme: 'default'               // 'default', 'dark', 'custom'
+    }
+};
+// 📝 Comment utiliser :
+// 1. Remplacez les valeurs ci-dessus
+// 2. Sauvegardez en config.js
+// 3. Incluez dans votre HTML :
+//    <script src="config.js"></script>
+//    <script>
+//        const sunuid = new SunuID(sunuidConfig);
+//        sunuid.init();
+//    </script>
+// 🎉 C'est tout ! Votre configuration est prête !