Squelette d'application web pour ESP32 avec implémentations de fonctions basiques telles que : -Authentification -Responsive design -Mise à jour OTA -Paramétrage

11 KiB

Raw Blame History Unescape Escape

ESP32 Webapp

Squelette d'application web pour ESP32 avec interface de gestion via dashboard web responsive.

🔔 Fonctionnalités

Dashboard web responsive - Interface utilisateur moderne et adaptative
Authentification sécurisée - Système de login avec sessions et hash SHA-256
Configuration WiFi - Mode Station et Point d'Accès automatique
Reconnexion WiFi automatique - Détection de perte de connexion et reconnexion toutes les 30 secondes (WPA2-PSK et WPA2-PEAP)
WPA2-Enterprise PEAP - Connexion PEAP (sans certificat) avec utilisateur/mot de passe (MSCHAPv2)
API REST - Endpoints pour configuration, statistiques et changement de mot de passe
Gestion des mots de passe - Changement sécurisé avec validation de l'ancien mot de passe
Mise à jour OTA - Mise à jour du firmware et système de fichiers via web avec modales de confirmation
Compression gzip - Optimisation automatique des assets (~70% de réduction)
Système de fichiers LittleFS - Stockage de configuration et fichiers web

📋 Prérequis

ESP32
PlatformIO
Câble USB pour le téléversement initial

🚀 Installation

1. Compiler le projet

platformio run --environment esp32

2. Téléverser le firmware

platformio run --environment esp32 --target upload

3. Téléverser le système de fichiers (data/)

platformio run --environment esp32 --target uploadfs

4. Moniteur série (optionnel)

platformio device monitor --environment esp32

🔐 Connexion initiale

Première connexion

Au premier démarrage, l'ESP32 crée un point d'accès WiFi :
- SSID : ESP32-Webapp
- Mot de passe : webapp123
Connectez-vous au point d'accès depuis votre appareil
Ouvrez un navigateur web et accédez à : http://192.168.4.1
Identifiants par défaut :
- Utilisateur : admin
- Mot de passe : admin

⚠️ Important : Changez le mot de passe par défaut après la première connexion!

⚙️ Configuration WiFi

Configurer la connexion WiFi Station

Accédez à la page Paramètres
Section Configuration WiFi
Choisissez le type de sécurité :

WPA2-PSK (classique) : SSID + mot de passe WiFi
WPA2-Enterprise PEAP : SSID + utilisateur + mot de passe (sans certificat)

Cliquez sur Enregistrer WiFi
L'ESP32 redémarre et se connecte à votre réseau

Changer le mot de passe

Accédez à la page Paramètres
Section Changer le mot de passe
Entrez votre mot de passe actuel
Entrez le nouveau mot de passe et confirmez
Cliquez sur Changer le mot de passe
Vous serez automatiquement redirigé vers la connexion

Mode Point d'Accès

Si la connexion WiFi échoue ou n'est pas configurée, l'ESP32 démarre automatiquement en mode Point d'Accès (AP).

Reconnexion automatique

Lorsque la connexion WiFi STA est perdue, l'ESP32 tente automatiquement de se reconnecter toutes les 30 secondes :

WPA2-PSK : WiFi.setAutoReconnect(true) gère la reconnexion en premier lieu ; la vérification périodique sert de fallback
WPA2-PEAP : les credentials entreprise (esp_wifi_sta_wpa2_ent_*) sont réappliqués manuellement à chaque tentative
En cas de succès, l'AP de secours (<hostname>-setup) est restauré automatiquement

📱 Interface Web

Pages disponibles

Tableau de bord (/index.html) - Statistiques et contrôles
Paramètres (/settings.html) - Configuration WiFi, système, mot de passe
Mise à jour (/update.html) - Mise à jour OTA du firmware
Connexion (/login.html) - Page d'authentification

Endpoints API

Configuration

GET /api/config - Récupérer la configuration
POST /api/config - Enregistrer la configuration

Authentification

POST /login - Se connecter (username + password)
GET /logout - Se déconnecter (redirection 302 vers /)

Gestion des mots de passe

POST /api/password - Changer le mot de passe (validation de l'ancien mot de passe requise)

Statistiques

GET /api/stats - Récupérer les statistiques système (uptime, heap, WiFi, IP)

Mise à jour

POST /api/update - Mise à jour OTA (firmware ou filesystem)

🔧 Structure du projet

esp32Webapp/
├── src/
│   ├── main.cpp           # Point d'entrée
│   ├── auth.h/cpp         # Gestion authentification
│   ├── server.h/cpp       # Serveur web et API
│   └── utils.h/cpp        # Fonctions utilitaires
├── data/
│   ├── config.json        # Configuration par défaut
│   ├── index.html         # Dashboard
│   ├── login.html         # Page de connexion
│   ├── settings.html      # Page paramètres
│   ├── update.html        # Page mise à jour OTA
│   ├── js/
│   │   ├── api.js         # Client API
│   │   ├── app.js         # Logique UI
│   │   └── crypto-js.min.js # Hachage SHA-256 côté client
│   └── css/
│       └── styles.css     # Styles CSS
├── platformio.ini         # Configuration PlatformIO
├── platformio_extra.py    # Script d'optimisation (compression gzip)
├── compress_assets.py     # Compression assets CSS/JS/HTML
└── README.md              # Cette documentation

🔄 Mise à jour OTA

Via l'interface web

Compilez votre nouveau firmware : platformio run --environment esp32
Accédez à la page Mise à jour
Sélectionnez le fichier .bin dans .pio/build/esp32/firmware.bin
Confirmez via le modal de confirmation
Attendez la fin du téléversement et le redémarrage automatique

Mise à jour du syst\u00e8me de fichiers

Compilez l'image filesystem : platformio run --environment esp32 --target buildfs
Accédez à la page Mise à jour
Sélectionnez le fichier .bin de filesystem
Confirmez via le modal (⚠️ toutes les données seront effacées)
Le système redémarrera automatiquement

Compression automatique des assets

Tous les assets CSS, JS et HTML sont compressés automatiquement en gzip avant la construction du filesystem :

Script : compress_assets.py compresse les fichiers
Hook : platformio_extra.py l'exécute automatiquement avant buildfs
Avantage : ~70% de réduction de taille des fichiers statiques

📊 Configuration (config.json)

{
  "auth": {
    "username": "admin",
    "password_hash": "hash_sha256_du_mot_de_passe"
  },
  "wifi": {
    "ssid": "Nom_du_réseau",
    "security": "wpa2",
    "password": "mot_de_passe_wifi",
    "eap_username": "utilisateur_peap",
    "eap_password": "mot_de_passe_peap",
    "ap_password": "webapp123"
  },
  "system": {
    "hostname": "ESP32-Webapp",
    "session_timeout": 60
  },
  "params": {
    "app_name": "ESP32 Webapp"
  }
}

Exemple sécurisé prêt à copier (WPA2-Enterprise PEAP)

{
  "auth": {
    "username": "admin",
    "password_hash": "hash_sha256_du_mot_de_passe"
  },
  "wifi": {
    "ssid": "Mon-SSID-Entreprise",
    "security": "wpa2_peap",
    "password": "",
    "eap_username": "prenom.nom",
    "eap_password": "",
    "ap_password": "webapp123"
  },
  "system": {
    "hostname": "ESP32-Webapp",
    "session_timeout": 60
  },
  "params": {
    "app_name": "ESP32 Webapp"
  }
}

Notes:

Aucun certificat n'est requis pour ce mode PEAP.
Le mode PEAP est configuré en auto avec authentification interne MSCHAPv2.
Remplacez eap_username par votre identifiant entreprise.
Laissez eap_password vide dans le fichier, puis saisissez-le uniquement dans l'interface web.

Procédure recommandée (sans secret en clair dans les fichiers):

Téléversez cette configuration avec eap_password vide.
Ouvrez la page Paramètres de l'ESP32.
Sélectionnez WPA2-Enterprise PEAP, saisissez l'utilisateur et le mot de passe PEAP.
Enregistrez : l'ESP32 redémarre et se connecte.

🛠️ Dépendances

ESPAsyncWebServer - Serveur web asynchrone
AsyncTCP - TCP asynchrone pour ESP32
ArduinoJson - Gestion JSON
LittleFS - Système de fichiers
mbedtls - Cryptographie (SHA-256)
Python 3 - Pour scripts d'optimisation (compression gzip)
CryptoJS - Hachage SHA-256 côté client (inclus dans les assets statiques)

🐛 Dépannage

L'ESP32 ne se connecte pas au WiFi

Vérifiez le SSID et le mot de passe dans la configuration
En mode WPA2-PEAP, vérifiez l'utilisateur/mot de passe PEAP
Assurez-vous que le réseau WiFi est en 2.4 GHz (l'ESP32 ne supporte pas le 5 GHz)
L'ESP32 passera automatiquement en mode AP si la connexion échoue
En cas de perte de connexion après démarrage, l'ESP32 retente automatiquement toutes les 30 secondes (visible dans les logs série : WiFi déconnecté, tentative de reconnexion...)

Impossible de se connecter à l'interface web

Vérifiez que vous êtes connecté au même réseau que l'ESP32
En mode AP, l'adresse est toujours 192.168.4.1
En mode Station, trouvez l'IP dans les logs du moniteur série
Désactivez le cache du navigateur (Ctrl+F5)
En réseau entreprise (PEAP), un filtrage « client isolation » peut bloquer ping/HTTP entre clients WiFi
Utilisez l'AP de secours ESP32-Webapp-setup (ou <hostname>-setup) avec l'IP 192.168.4.1

Diagnostic rapide réseau (2 minutes)

Ouvrez le moniteur série et vérifiez Serveur web démarré sur le port 80
Depuis votre PC, testez l'endpoint de santé:

en STA: curl -v http://<ip_sta>/api/health
en AP de secours: curl -v http://192.168.4.1/api/health

Vérifiez les logs série:

si vous voyez HTTP GET /api/health depuis ..., le trafic arrive bien
si rien n'apparaît, le réseau filtre la communication vers l'ESP32

Erreur lors de la mise à jour OTA

Vérifiez que le fichier .bin est correct
Assurez-vous d'avoir une connexion stable
Ne débranchez jamais l'ESP32 pendant la mise à jour
Après une mise à jour réussie, vous serez automatiquement redirigé vers la page de connexion

Message de succès mais page reste en erreur

C'est normal ! La connexion se ferme intentionnellement après la mise à jour (l'ESP redémarre). Vous serez redirigé automatiquement vers la connexion après 3 secondes.

📝 Logs

Les logs sont disponibles via le moniteur série :

platformio device monitor --environment esp32 --baud 115200

🔒 Sécurité

Les mots de passe sont hashés en SHA-256 (CryptoJS côté client, mbedtls côté serveur)
Changement de mot de passe sécurisé avec validation de l'ancien mot de passe
Les sessions ont un timeout configurable (60 minutes par défaut)
Les cookies de session sont HttpOnly
Authentification requise pour tous les endpoints API
Compression gzip des assets pour réduire la surface d'attaque
Configuration sécurisée : les vrais mots de passe ne sont jamais exposés sur le frontend (masqués en "***")
Redirection automatique vers login après déconnexion ou mise à jour OTA
Pas de dépendance externe obligatoire (crypto-js inclus dans les assets statiques)

📄 Licence

Ce projet est sous licence libre.

👨‍💻 Auteur

Développé pour ESP32

Note : Cette application est un template de base. Adaptez-la selon vos besoins spécifiques!

11 KiB Raw Blame History Unescape Escape