# 🔐 Configuration SSL 100% Locale - PTT Live ## ProblĂšme RĂ©solu ❌ **Avant** : Certificats self-signed bloquĂ©s par navigateurs ✅ **AprĂšs** : Certificats locaux **automatiquement approuvĂ©s** --- ## Solution : mkcert **mkcert** gĂ©nĂšre des certificats SSL locaux **de confiance** : - ✅ ApprouvĂ©s automatiquement par Chrome/Safari/Edge/Firefox - ✅ ApprouvĂ©s par le systĂšme (macOS/Linux) - ✅ Pas besoin de clics "Accepter le risque" - ✅ 100% local, pas de cloud, pas de domaine --- ## 🚀 Installation Automatique (RecommandĂ©e) ### Un seul script fait tout ```bash # Depuis la racine du projet ./setup-certificates.sh ``` Ce script : 1. ✅ Installe `mkcert` (si pas dĂ©jĂ  installĂ©) 2. ✅ Installe la CA locale (Certificate Authority) 3. ✅ GĂ©nĂšre certificats pour localhost + IP rĂ©seau 4. ✅ Configure automatiquement serveur et client 5. ✅ CrĂ©e les `.env` avec chemins certificats **Temps : ~2 minutes** --- ## 📋 Ce qui est Créé ### Structure ``` PTT Live/ ├── certs/ # Nouveau dossier │ ├── localhost.pem # Certificat public │ └── localhost-key.pem # ClĂ© privĂ©e │ ├── server/.env # Mis Ă  jour automatiquement │ ├── SSL_CERT=/path/to/localhost.pem │ └── SSL_KEY=/path/to/localhost-key.pem │ └── client/ ├── .env # Créé automatiquement └── vite.config.js # Mis Ă  jour avec HTTPS ``` ### Certificats GĂ©nĂ©rĂ©s Pour - `localhost` - `127.0.0.1` - Votre **IP rĂ©seau** (ex: `192.168.1.10`) - `*.local` (wildcard) - `$(hostname).local` --- ## 🌐 URLs d'AccĂšs AprĂšs installation, accĂšs HTTPS sans warnings : ``` Serveur : https://192.168.1.10:3000 Client : https://192.168.1.10:5173 QR Code : gĂ©nĂ©rĂ© automatiquement au dĂ©marrage ``` --- ## đŸ“± Smartphones (iOS/Android) ### PremiĂšre Connexion 1. **Scanner le QR Code** affichĂ© au dĂ©marrage du serveur 2. Le navigateur ouvre l'URL HTTPS 3. **Accepter le certificat** (une seule fois par appareil) - iOS : Cliquer "Continuer" → "Visiter ce site web" - Android : Cliquer "AvancĂ©" → "Continuer vers le site" 4. La PWA se charge normalement 5. **Installer sur l'Ă©cran d'accueil** (recommandĂ©) ### Pourquoi Accepter Manuellement sur Mobile ? La CA locale est installĂ©e sur l'**ordinateur serveur**, pas sur le smartphone. **Options** : **A) Accepter Ă  chaque appareil** (simple, rapide) - Une seule fois par smartphone - 2 clics **B) Installer la CA sur les mobiles** (optionnel, avancĂ©) - iOS : RĂ©glages → GĂ©nĂ©ral → VPN & Gestion → Profils - Android : ParamĂštres → SĂ©curitĂ© → Certificats 💡 **Recommandation** : Option A (accepter manuellement), plus simple. --- ## đŸ› ïž Fonctionnement Technique ### 1. mkcert ```bash # Installer CA locale (une fois par machine) mkcert -install # GĂ©nĂ©rer certificats mkcert localhost 192.168.1.10 *.local # → CrĂ©e localhost.pem + localhost-key.pem ``` ### 2. Serveur Express (HTTPS) ```javascript // server/index.js const https = require('https'); const fs = require('fs'); const httpsOptions = { key: fs.readFileSync(process.env.SSL_KEY), cert: fs.readFileSync(process.env.SSL_CERT) }; https.createServer(httpsOptions, app).listen(3000); ``` ### 3. Vite Dev Server (HTTPS) ```javascript // client/vite.config.js export default defineConfig({ server: { https: { key: fs.readFileSync('../certs/localhost-key.pem'), cert: fs.readFileSync('../certs/localhost.pem') } } }); ``` --- ## 🔧 Installation Manuelle (Si Script Échoue) ### macOS ```bash # 1. Installer mkcert brew install mkcert brew install nss # Pour Firefox # 2. Installer CA locale mkcert -install # 3. CrĂ©er dossier certificats mkdir certs cd certs # 4. GĂ©nĂ©rer certificats (remplacer IP) mkcert localhost 127.0.0.1 192.168.1.10 *.local # 5. Renommer mv localhost+*.pem localhost.pem mv localhost+*-key.pem localhost-key.pem # 6. Configurer .env (voir ci-dessous) ``` ### Linux ```bash # 1. Installer dĂ©pendances sudo apt-get install libnss3-tools # Debian/Ubuntu # OU sudo yum install nss-tools # RedHat/CentOS # 2. TĂ©lĂ©charger mkcert curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64" chmod +x mkcert-v*-linux-amd64 sudo mv mkcert-v*-linux-amd64 /usr/local/bin/mkcert # 3-6. MĂȘmes Ă©tapes que macOS ``` ### Configuration Manuelle .env **server/.env** : ```bash USE_LOCAL_LIVEKIT=true LIVEKIT_API_KEY=devkey LIVEKIT_API_SECRET=secret LIVEKIT_URL=AUTO PORT=3000 ENABLE_HTTPS=true # Chemins ABSOLUS SSL_CERT=/Users/vous/PTT Live/certs/localhost.pem SSL_KEY=/Users/vous/PTT Live/certs/localhost-key.pem NETWORK_IP=192.168.1.10 # Votre IP ``` **client/.env** : ```bash VITE_SERVER_URL=https://192.168.1.10:3000 ``` --- ## ✅ VĂ©rification ### 1. Certificats Créés ? ```bash ls -lh certs/ # Doit afficher : # localhost.pem # localhost-key.pem ``` ### 2. CA InstallĂ©e ? ```bash mkcert -CAROOT # Affiche le chemin de la CA (ex: /Users/vous/Library/Application Support/mkcert) ``` ### 3. Serveur HTTPS Fonctionne ? ```bash # DĂ©marrer ./start.sh --dev # VĂ©rifier curl -k https://localhost:3000/health # Doit retourner JSON sans erreur ``` ### 4. Client HTTPS Fonctionne ? Ouvrir dans navigateur : ``` https://localhost:5173 ``` ✅ **Pas de warning SSL** = succĂšs ! --- ## 🐛 DĂ©pannage ### Erreur "Certificats SSL introuvables" **SymptĂŽme** : Le serveur refuse de dĂ©marrer **Solution** : ```bash # 1. VĂ©rifier que les certificats existent ls certs/ # 2. Relancer le script ./setup-certificates.sh # 3. VĂ©rifier .env cat server/.env | grep SSL_ ``` ### Warning SSL sur Smartphone **SymptĂŽme** : "Votre connexion n'est pas privĂ©e" **Solution** : Normal ! Cliquer "AvancĂ©" → "Continuer" - Une seule fois par appareil - La CA locale n'est pas sur le mobile ### Firefox : Certificat Non ApprouvĂ© **SymptĂŽme** : Firefox affiche warning (Chrome OK) **Solution** : ```bash # Installer NSS tools brew install nss # macOS sudo apt install libnss3-tools # Linux # RĂ©installer CA mkcert -install ``` ### Certificat ExpirĂ© **SymptĂŽme** : AprĂšs plusieurs mois **Solution** : ```bash # RĂ©gĂ©nĂ©rer certificats cd certs rm *.pem mkcert localhost $(ipconfig getifaddr en0) *.local # RedĂ©marrer serveur ``` --- ## 🔄 Renouvellement Les certificats mkcert sont valides **10 ans** (pas besoin de renouveler). Pour regĂ©nĂ©rer (changement d'IP, etc.) : ```bash ./setup-certificates.sh # Écrase les anciens certificats ``` --- ## 🌍 Production (DĂ©ploiement RĂ©el) ### Option 1 : mkcert (RĂ©seau Local PrivĂ©) ✅ **Si PTT Live reste sur rĂ©seau local privĂ©** (WiFi Ă©vĂ©nement) - Garder mkcert - Les clients acceptent le certificat une fois - Pas besoin de domaine/DNS ### Option 2 : Let's Encrypt (Internet Public) ⚠ **Si PTT Live doit ĂȘtre accessible depuis Internet** - NĂ©cessite un domaine (ex: `ptt.votredomaine.com`) - Utiliser Caddy ou Certbot (Let's Encrypt) - Pas recommandĂ© pour intercom Ă©vĂ©nementiel **Recommandation** : Rester sur **Option 1** (mkcert + rĂ©seau local) --- ## 📚 Ressources - **mkcert** : https://github.com/FiloSottile/mkcert - **Vite HTTPS** : https://vitejs.dev/config/server-options.html#server-https - **Node.js HTTPS** : https://nodejs.org/api/https.html --- ## ✅ RĂ©capitulatif | Avant | AprĂšs | |-------|-------| | ❌ Certificats self-signed bloquĂ©s | ✅ Certificats approuvĂ©s automatiquement | | ❌ Warnings "Non sĂ©curisĂ©" | ✅ Cadenas vert 🔒 | | ❌ WebRTC refuse HTTPS invalide | ✅ WebRTC fonctionne | | ❌ Configuration manuelle complexe | ✅ Script automatique 2 min | | ❌ DĂ©pendance cloud/domaine | ✅ 100% local | --- **Solution : `./setup-certificates.sh` → 2 minutes → HTTPS fonctionnel** 🎉 ProblĂšme rĂ©solu dĂ©finitivement !