ESP32 - Webserver-Passwort
In diesem Tutorial erfahren wir, wie man einen ESP32-Webserver erstellt, der durch Benutzernamen und Passwort für den Login geschützt ist. Bevor auf die Webseite des ESP32 zugegriffen wird, wird der Benutzer aufgefordert, seinen Benutzernamen und sein Passwort einzugeben.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables ESP32 Starter-Kit (ESP32 enthalten) | |
| 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 ESP32 und Webserver
Wenn Sie mit ESP32 und Webservern nicht vertraut sind (einschließlich Pinbelegung, Funktionsweise und Programmierung), können Sie mehr darüber in den folgenden Tutorials erfahren:
ESP32-Code - Webserver Benutzername/Passwort
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 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/esp32/esp32-web-server-password
*/
#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;
// Main page handler
void handleRoot(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, "<html><body><h1>Login Successful!</h1><p>You are now logged in.</p></body></html>");
}
void setup() {
Serial.begin(9600);
delay(1000);
// 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();
}
Schnelle Schritte
- Wenn dies das erste Mal ist, dass Sie ESP32 verwenden, sehen Sie sich wie man die Umgebung für ESP32 in der Arduino IDE einrichtet.
- Verbinden Sie das ESP32-Board über ein Micro-USB-Kabel mit Ihrem PC.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das richtige ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
- Öffnen Sie den Bibliotheks-Manager, indem Sie auf das Library Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie “DIYables ESP32 WebServer”, dann finden Sie den DIYables ESP32 WebServer, der von DIYables erstellt wurde.
- Klicken Sie auf die Install-Schaltfläche, um die DIYables ESP32 WebServer-Bibliothek zu installieren.
- Kopieren Sie den obigen Code und öffnen Sie ihn in der Arduino-IDE.
- Passen Sie die WLAN-Informationen (SSID und Passwort) im Code an.
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino-IDE, um den Code auf den ESP32 hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Schauen Sie sich das Ergebnis im seriellen Monitor an.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Sie werden eine IP-Adresse im seriellen Monitor sehen, 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 werden eine Seite sehen, die Sie zur Eingabe von Benutzernamen und Passwort auffordert.
- Geben Sie den Benutzernamen und das Passwort ein, die im ESP32-Code enthalten sind; in diesem Fall: admin als Benutzername, esp32 als Passwort
- Wenn Sie den Benutzernamen und das Passwort korrekt eingeben, wird der Webinhalt des ESP32 angezeigt:
※ Notiz:
- Sie können den Web-Benutzernamen und das Web-Passwort im Code ändern, indem Sie die Werte der beiden Variablen www_username und www_password anpassen.
- Sie können diesen Code modifizieren, um den HTML/CSS/JavaScript-Code Ihrer Webseite hinzuzufügen.
- Im Code gibt es keinen HTML-Code für das Login-Formular (Benutzername/Passwort). Seien Sie nicht überrascht! Das Login-Formular wird vom Webbrowser erstellt.
Fortgeschrittenes Wissen
Dieser Abschnitt vermittelt fortgeschrittenes Wissen darüber, wie das Benutzername/Passwort-System funktioniert, ohne HTML für das Anmeldeformular.
- Zu Beginn, wenn Sie die IP-Adresse des ESP32 in einen Webbrowser eingeben, sendet der Browser eine HTTP-Anfrage an den ESP32, ohne Anmeldeinformationen (Benutzername und Passwort).
- Nach Erhalt dieser Anfrage prüft der ESP32-Code, ob Benutzername und Passwort enthalten sind oder nicht. Fehlen sie, antwortet der ESP32 nicht auf die Anforderung des Seiteninhalts. Stattdessen sendet er eine HTTP-Nachricht mit Headern, die den Browser dazu auffordern, den Benutzer zur Eingabe von Benutzername und Passwort aufzufordern. Bemerkenswert ist, dass diese Antwort keinen HTML-Code für das Login-Formular enthält.
- Nach Erhalt dieser Antwort analysiert der Webbrowser die HTTP-Header und erkennt die Aufforderung des ESP32 nach Benutzername und Passwort. Anschließend erzeugt der Browser dynamisch ein Login-Formular, das dem Benutzer die Eingabe seiner Anmeldeinformationen ermöglicht.
- Der Benutzer gibt anschließend seinen Benutzernamen und sein Passwort in das Formular ein.
- Der Webbrowser fügt den eingegebenen Benutzernamen und das Passwort in die HTTP-Anfrage ein und sendet sie an den ESP32.
- Der ESP32 überprüft den in der HTTP-Anfrage enthaltenen Benutzernamen und das Passwort. Sind sie korrekt, liefert er den Inhalt der angeforderten Seite zurück. Sind sie falsch, wiederholt sich der Vorgang und fordert den Benutzer erneut auf, die richtigen Anmeldeinformationen einzugeben.
- Nachdem der Benutzer beim ersten Mal den richtigen Benutzernamen und das richtige Passwort eingegeben hat, müssen bei späteren Anfragen keine Anmeldeinformationen mehr eingegeben werden. Der Webbrowser speichert die Anmeldeinformationen automatisch und übermittelt sie in nachfolgenden Anfragen.