CAPTEURS/ACTIONNEURS

INTERNET OF THING (IoT)

ESP32 - Ethernet.

ESP32 - Interruption GPIO.

Exemple de serveur Web ESP32 avec authentification

ESP32 - Serveur Web avec authentification de base

Cet exemple montre comment créer un serveur Web sécurisé avec l'authentification HTTP Basic sur l'ESP32 en utilisant la bibliothèque DIYables_ESP32_WebServer.

Matériel requis

1	×	Module de développement ESP32 ESP-WROOM-32
1	×	Câble USB Type-A vers Type-C (pour PC USB-A)
1	×	Câble USB Type-C vers Type-C (pour PC USB-C)
1	×	Recommandé: Carte d'extension à bornier à vis pour ESP32
1	×	Recommandé: Breakout Expansion Board for ESP32
1	×	Recommandé: Répartiteur d'alimentation pour ESP32

Ou vous pouvez acheter les kits suivants:

1	×	Kit de Démarrage DIYables ESP32 (ESP32 inclus)
1	×	Kit de Capteurs DIYables (30 capteurs/écrans)
1	×	Kit de Capteurs DIYables (18 capteurs/écrans)

Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.

Fonctionnalités démontrées

✅ authentification HTTP basique
✅ protection par nom d'utilisateur et mot de passe
✅ boîtes de dialogue de connexion natives du navigateur
✅ contrôle d'accès sécurisé
✅ configuration d'authentification simple
✅ compatibilité rétroactive (authentification facultative)

Schéma du circuit

Aucun câblage supplémentaire n'est nécessaire — cet exemple n'utilise que la LED intégrée et les fonctionnalités WiFi de l'ESP32.

Exemple de code

/* * ESP32 - Simple Web Server with Basic Authentication * * This example demonstrates basic authentication using the DIYables_ESP32_WebServer library. * Adapted from the simple WiFi authentication example structure. * * Hardware: ESP32 * Library: DIYables_ESP32_WebServer (with Basic Authentication support) */ #include <DIYables_ESP32_WebServer.h> // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Authentication credentials const char* www_username = "admin"; const char* www_password = "esp32"; // Create web server instance DIYables_ESP32_WebServer server; // HTML page content const char* LOGIN_SUCCESS_PAGE = R"( <!DOCTYPE HTML> <html> <head><title>ESP32 Web Server</title></head> <body> <h1>Login Successful!</h1> <p>You are now logged in.</p> <p>Server running with DIYables_ESP32_WebServer library</p> </body> </html> )"; // Main page handler void handleRoot(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { server.sendResponse(client, LOGIN_SUCCESS_PAGE); } void setup() { Serial.begin(9600); delay(1000); String fv = WiFi.firmwareVersion(); if (fv < WIFI_FIRMWARE_LATEST_VERSION) Serial.println("Please upgrade the firmware"); Serial.print("Attempting to connect to SSID: "); Serial.println(WIFI_SSID); // Configure the main route server.addRoute("/", handleRoot); // Start server with WiFi connection (handles connection automatically) server.begin(WIFI_SSID, WIFI_PASSWORD); // Enable basic authentication server.enableAuthentication(www_username, www_password, "ESP32"); Serial.print("IP Address: "); Serial.println(WiFi.localIP()); Serial.println("Server ready with authentication enabled"); Serial.print("Username: "); Serial.println(www_username); Serial.print("Password: "); Serial.println(www_password); } void loop() { // Handle all client requests (including authentication) server.handleClient(); }

Comment cela fonctionne

1. Mise en place de l'authentification

L'exemple active l'authentification HTTP Basic avec :

It seems the content to translate is missing after the code block. Please provide the English text inside the code block (between the triple backticks) so I can translate it to French.

server.enableAuthentication(www_username, www_password, "ESP32");

Please provide the English text to translate. The code block appears empty.

2. Protection automatique

Une fois l'authentification activée, toutes les routes sont automatiquement protégées. Les utilisateurs doivent fournir des identifiants valides pour accéder à n'importe quelle page.

3. Intégration du navigateur

Lorsque les utilisateurs visitent le serveur web :

Le navigateur affiche une boîte de dialogue de connexion
L'utilisateur saisit le nom d'utilisateur et le mot de passe
En cas de succès : la page se charge normalement
En cas d'échec : une page 401 non autorisée est affichée

4. Stockage des identifiants

Les navigateurs mettent en cache les identifiants de session, ce qui évite que les utilisateurs aient à se reconnecter à plusieurs reprises.

Considérations de sécurité

✅ Convient pour:

Réseaux domestiques et environnements de confiance
Dispositifs IoT internes
Développement et prototypage
Projets éducatifs

⚠️ Limites :

Les identifiants sont encodés en Base64 et ne sont pas chiffrés
Pas de support HTTPS (limitation de la plateforme ESP32)
Une seule paire nom d'utilisateur/mot de passe
Non adapté à une utilisation en production sur des réseaux publics

🔒 Bonnes pratiques:

Changez immédiatement les identifiants par défaut
Utilisez uniquement des réseaux de confiance
Envisagez des mesures de sécurité réseau supplémentaires (VPN, pare-feu)
Pour les applications à haute sécurité, ajoutez des couches d’authentification supplémentaires

Test de l'authentification

Téléversez le code sur votre ESP32
Ouvrez le moniteur série pour voir l'adresse IP
Accédez à l'adresse IP dans votre navigateur web
La boîte de dialogue de connexion apparaît - saisissez les identifiants:

Nom d'utilisateur: admin
Mot de passe : esp32

La page de succès se charge après l'authentification*

Options de personnalisation

Modifier les informations d'identification

Please provide the English text inside the code block for translation to French.

const char* www_username = "myuser";

const char* www_mot_de_passe = "monmotdepassesecret";

There is no content inside the code block. Please paste the English text you want translated between the triple backticks.

Domaine personnalisé

There is no content to translate. Please provide the English text you would like translated into French.

server.enableAuthentication(www_username, www_password, "Mon appareil personnalisé");

Please provide the English text to translate inside the code block.

Désactiver l’authentification

Aucun contenu à traduire.

server.disableAuthentication(); // Rendre toutes les routes publiques

Please provide the English text you’d like translated.

Vérifier l'état d'authentification

Please provide the English content you want translated into French.

si (server.isAuthenticationEnabled()) {

Serial.println("Authentification active");

}

Please provide the English text you want translated into French.

Rétrocompatibilité

L'authentification est désactivée par défaut, de sorte que le code existant continue de fonctionner sans modification. Activez l'authentification uniquement lorsque cela est nécessaire :

Please provide the English text to translate.

// Cela fonctionne exactement comme avant (pas d'authentification)

DIYables_ESP32_WebServer serveur;

serveur.ajouterRoute("/", gererRacine);

server.begin("WiFi", "Mot de passe");

// Ajoutez cette ligne pour activer l'authentification

serveur.activerAuthentification("admin", "password123");

Please provide the English text to translate.

Dépannage

Le navigateur continue à demander des informations d'identification

Vérifier les fautes de frappe du nom d'utilisateur et du mot de passe
Vider le cache du navigateur et les cookies
Vérifier que les identifiants correspondent exactement

Impossible d'accéder à aucune page

L'authentification protège toutes les routes lorsqu'elle est activée
Utilisez server.disableAuthentication() pour tester
Vérifiez la sortie série pour les messages d'authentification

L'authentification ne fonctionne pas

Assurez-vous que enableAuthentication() est appelée après server.begin()
Vérifiez que les identifiants respectent les limites de longueur (31 caractères maximum)
Vérifiez la présence de caractères spéciaux dans les mots de passe

Exemples liés

Web Server Example - Basic multi-page web server
Web Server with Query Strings - Dynamic content with parameters
Web Server with WebSocket - Real-time communication

Références

Authentication Documentation - Complete authentication reference
DIYables_ESP32_WebServer Library Reference - Full API documentation

Tutoriels connexes

※ NOS MESSAGES

N'hésitez pas à partager le lien de ce tutoriel. Cependant, veuillez ne pas utiliser notre contenu sur d'autres sites web. Nous avons investi beaucoup d'efforts et de temps pour créer ce contenu, veuillez respecter notre travail !