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

8.3 KiB

Raw Permalink 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
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
Entrez le SSID et le mot de passe de votre réseau
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).

📱 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",
    "password": "mot_de_passe_wifi",
    "ap_password": "webapp123"
  },
  "system": {
    "hostname": "ESP32-Webapp",
    "session_timeout": 60
  },
  "params": {
    "app_name": "ESP32 Webapp"
  }
}

🛠️ 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
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

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)

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!

8.3 KiB Raw Permalink Blame History Unescape Escape