ESP8266 - Webserver-Passwort
Dieses Tutorial zeigt Ihnen, wie Sie einen sicheren ESP8266-Webserver erstellen, der nach einem Benutzernamen und einem Passwort für den Zugriff fragt. Bevor Benutzer irgendwelche auf dem ESP8266 gespeicherten Webseiten ansehen, müssen sie ihren Benutzernamen und ihr Passwort eingeben.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (30 Sensoren/Displays) | |
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Über ESP8266 und Webserver
Wenn Sie mit dem ESP8266 und dem Webserver nicht vertraut sind (einschließlich Pinbelegung, Funktionsweise und Programmierung), können Sie sich darüber in den folgenden Tutorials informieren:
ESP8266-Code - Webserver Benutzername/Passwort
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/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();
}
Schnelle Schritte
Um mit ESP8266 in der Arduino-IDE zu beginnen, befolgen Sie diese Schritte:
- Schau dir das Tutorial Wie man die Umgebung für ESP8266 in der Arduino IDE einrichtet an, falls du ESP8266 zum ersten Mal verwendest.
- Schließe die Komponenten wie im Diagramm gezeigt an.
- Verbinde das ESP8266-Board mit deinem Computer über ein USB-Kabel.
- Öffne die Arduino IDE an deinem Computer.
- Wähle das richtige ESP8266-Board, z. B. NodeMCU 1.0 (ESP-12E Modul), und den entsprechenden COM-Port.
- Kopiere den obigen Code und öffne ihn in der Arduino IDE.
- Ändere die WLAN-Informationen (SSID und Passwort) im Code auf deine eigenen.
- Klicke in der Arduino IDE auf Upload, um den Code auf den ESP8266 hochzuladen.
- Öffne den Seriellen Monitor.
- Sieh dir das Ergebnis im Seriellen Monitor an.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Sie sehen eine IP-Adresse im seriellen Monitor, zum Beispiel: 192.168.0.3
- Geben Sie die IP-Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Bitte beachten Sie, dass Sie die 192.168.0.3 durch die IP-Adresse ersetzen müssen, die Sie im seriellen Monitor erhalten haben.
- Sie sehen eine Seite, die Sie dazu auffordert, Benutzernamen und Passwort einzugeben.
- Geben Sie den im ESP8266-Code enthaltenen Benutzernamen und das Passwort ein; in diesem Fall: admin als Benutzername, esp8266 als Passwort
- Wenn Sie den Benutzernamen und das Passwort korrekt eingeben, wird der Webinhalt des ESP8266 angezeigt:
※ Notiz:
- Sie können den Benutzernamen und das Passwort Ihrer Website direkt im Code ändern, indem Sie die Werte der beiden Variablen www_username und www_password anpassen.
- Sie haben die Freiheit, diesen Code zu personalisieren, indem Sie eigenes HTML, CSS und JavaScript integrieren, um Ihre Webseite nach Ihren Wünschen zu gestalten.
- Es ist erwähnenswert, dass im Code selbst kein spezifischer HTML-Code für das Login-Formular vorhanden ist, in dem Benutzer ihren Benutzernamen und ihr Passwort eingeben. Das mag unerwartet erscheinen, aber stattdessen wird das Login-Formular dynamisch vom Webbrowser erzeugt, wenn es benötigt wird.
Fortgeschrittenes Wissen
Dieses Segment bietet eine detaillierte Erklärung dazu, wie das Benutzername-Passwort-System funktioniert, ohne HTML für das Anmeldeformular zu verwenden:
- Wenn Sie die IP-Adresse des ESP8266 in einen Webbrowser eingeben, sendet der Browser beim ersten Mal eine HTTP-Anfrage an den ESP8266 – jedoch ohne Benutzernamen und Passwort.
- Beim Empfang dieser Anfrage prüft der ESP8266-Code, ob Benutzernamen und Passwort bereitgestellt wurden. Falls keine Anmeldeinformationen erkannt werden, antwortet der ESP8266 nicht mit dem Seiteninhalt. Stattdessen sendet er eine HTTP-Nachricht zurück, die Header enthält, die den Browser anweisen, die Anmeldeinformationen des Benutzers abzufragen. Bemerkenswert ist, dass diese Antwort keinen HTML-Code für das Login-Formular enthält.
- Empfängt der Browser diese Antwort, interpretiert er die HTTP-Header und versteht, dass der ESP8266 nach einem Benutzernamen und Passwort fragt. Folglich erzeugt der Browser dynamisch ein Anmeldeformular, in das der Benutzer seine Anmeldeinformationen eingeben kann.
- Anschließend gibt der Benutzer seinen Benutzernamen und sein Passwort in dieses Formular ein.
- Der Browser fügt die eingegebenen Anmeldeinformationen in eine HTTP-Anfrage ein und sendet sie an den ESP8266 zurück.
- Der ESP8266 überprüft die in der HTTP-Anfrage enthaltenen Anmeldeinformationen. Sind sie korrekt, liefert er den Inhalt der angeforderten Seite. Sind sie falsch, beginnt der Vorgang von Neuem und fordert den Benutzer erneut zur Eingabe der richtigen Anmeldeinformationen auf.
- Nachdem der Benutzer beim ersten Mal seine Anmeldeinformationen korrekt eingegeben hat, müssen nachfolgende Anfragen diese Informationen nicht erneut erfordern. Der Grund ist, dass der Browser die Anmeldeinformationen automatisch speichert und sie in nachfolgenden Anfragen mitsendet.