ESP8266 - Mot de passe du serveur Web
Ce tutoriel vous explique comment créer un serveur web sécurisé ESP8266 qui demande un nom d'utilisateur et un mot de passe pour y accéder. Avant de pouvoir consulter les pages web stockées sur l'ESP8266, les utilisateurs devront saisir leur nom d'utilisateur et leur mot de passe.
Préparation du matériel
| 1 | × | ESP8266 NodeMCU | |
| 1 | × | Micro USB Cable | |
| 1 | × | (Optional) ESP8266 Screw Terminal Adapter |
Or you can buy the following sensor kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
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.
À propos de ESP8266 et du serveur Web
Si vous n'êtes pas familier avec l'ESP8266 et le serveur Web (y compris le brochage, son fonctionnement et la programmation), vous pouvez en apprendre davantage à travers les tutoriels suivants :
Code ESP8266 - Nom d'utilisateur/mot de passe du serveur Web
/*
* Ce code ESP8266 NodeMCU a été développé par newbiely.fr
* Ce code ESP8266 NodeMCU est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/esp8266/esp8266-web-server-password
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80);
const char* www_username = "admin";
const char* www_password = "esp8266";
void handleRoot() {
if (!server.authenticate(www_username, www_password)) {
return server.requestAuthentication();
}
// send your web content here. The below is simplest form.
server.send(200, "text/html", "<html><body><h1>Login Successful!</h1><p>You are now logged in.</p></body></html>");
}
void handleNotFound() {
server.send(404, "text/plain", "Not found");
}
void setup() {
Serial.begin(9600);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
server.on("/", HTTP_GET, handleRoot);
server.onNotFound(handleNotFound);
server.begin();
// Print the ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
Étapes rapides
Pour commencer avec l'ESP8266 sur Arduino IDE, suivez ces étapes :
- Consultez le tutoriel comment configurer l'environnement pour ESP8266 sur Arduino IDE si c'est votre première utilisation de l'ESP8266.
- Câblez les composants comme indiqué sur le schéma.
- Connectez la carte ESP8266 à votre ordinateur à l'aide d'un câble USB.
- Ouvrez Arduino IDE sur votre ordinateur.
- Choisissez la bonne carte ESP8266, comme (par exemple NodeMCU 1.0 (module ESP-12E)), et son port COM respectif.
- Si c'est la première fois que vous utilisez ESP8266 Uno R4, consultez comment configurer l'environnement pour ESP8266 Uno R4 sur Arduino IDE.
- Connectez la carte ESP8266 à votre PC via un câble micro USB.
- Ouvrez Arduino IDE sur votre PC.
- Sélectionnez la bonne carte ESP8266 et le port COM correspondant.
- Copiez le code ci-dessus et ouvrez-le avec Arduino IDE.
- Modifiez les informations wifi (SSID et mot de passe) dans le code pour les vôtres.
- Cliquez sur le bouton Upload sur Arduino IDE pour charger le code sur l'ESP8266.
- Ouvrez le moniteur série.
- Consultez le résultat sur le moniteur série.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Vous verrez une adresse IP sur le moniteur série, par exemple : 192.168.0.3
- Tapez l'adresse IP dans la barre d'adresse d'un navigateur web sur votre smartphone ou PC.
- Veuillez noter que vous devez changer le 192.168.0.3 pour l'adresse IP que vous avez obtenue sur le moniteur série.
- Vous verrez une page qui vous invite à saisir un nom d'utilisateur/mot de passe.
- Tapez le nom d'utilisateur/mot de passe qui sont dans le code ESP8266, dans ce cas : admin comme nom d'utilisateur, esp8266 comme mot de passe
- Si vous entrez le nom d'utilisateur/mot de passe correctement, le contenu web de l'ESP8266 sera affiché :
※ NOTE THAT:
- Vous pouvez modifier le nom d'utilisateur et le mot de passe pour votre site web directement dans le code en changeant les valeurs attribuées à deux variables : www_username et www_password.
- Vous avez la liberté de personnaliser ce code en intégrant votre propre HTML, CSS et JavaScript pour créer votre page web selon vos préférences.
- Il est important de mentionner qu'il n'y a pas de code HTML spécifique dans le code lui-même pour le formulaire de connexion où les utilisateurs saisissent leur nom d'utilisateur et mot de passe. Cela peut paraître inattendu, mais en réalité, le formulaire de connexion est créé dynamiquement par le navigateur web lorsque cela est nécessaire.
Connaissances avancées
Ce segment offre une explication détaillée du fonctionnement du système de nom d'utilisateur/mot de passe sans HTML pour le formulaire de connexion :
- Lorsque vous saisissez l'adresse IP de l'ESP8266 dans un navigateur web pour la première fois, le navigateur envoie une requête à l'ESP8266 via HTTP, mais sans aucune information de nom d'utilisateur/mot de passe.
- À la réception de cette requête, le code de l'ESP8266 vérifie s'il y a des informations d'identifiant/mot de passe fournies. Si aucune n'est détectée, l'ESP8266 ne répond pas avec le contenu de la page. Au lieu de cela, il renvoie un message HTTP contenant des en-têtes instruisant le navigateur de demander le nom d'utilisateur et le mot de passe de l'utilisateur. Notamment, cette réponse ne comprend pas de code HTML pour le formulaire de connexion.
- Lorsque le navigateur reçoit cette réponse, il interprète les en-têtes HTTP et comprend que l'ESP8266 demande un nom d'utilisateur/mot de passe. En conséquence, le navigateur génère dynamiquement un formulaire de connexion pour que l'utilisateur saisisse ses identifiants.
- L'utilisateur entre alors son nom d'utilisateur/mot de passe dans ce formulaire.
- Le navigateur intègre le nom d'utilisateur/mot de passe saisi dans une requête HTTP et la renvoie à l'ESP8266.
- L'ESP8266 vérifie le nom d'utilisateur/le mot de passe fournis dans la requête HTTP. S'ils sont corrects, il fournit le contenu de la page demandée. S'ils sont incorrects, le processus se répète, invitant l'utilisateur à entrer à nouveau les bons identifiants.
- Une fois que l'utilisateur saisit correctement son nom d'utilisateur/mot de passe pour la première fois, les requêtes ultérieures ne nécessitent pas qu'il réentre les détails. Cela est dû au fait que le navigateur stocke automatiquement les identifiants et les inclut dans les requêtes suivantes.