SENSOREN/AKTOREN

INTERNET DER DINGE (IoT)

ESP32 - Ethernet

ESP32 - GPIO-Unterbrechung

ESP32-Webserver mit Authentifizierung – Beispiel

ESP32 - Webserver mit Basis-Authentifizierung

Dieses Beispiel demonstriert, wie man einen sicheren Webserver mit HTTP-Basic-Authentifizierung auf dem ESP32 mithilfe der DIYables_ESP32_WebServer-Bibliothek erstellt.

Benötigte Hardware

1	×	ESP32 ESP-WROOM-32 Entwicklungsmodul
1	×	USB-Kabel Typ-A zu Typ-C (für USB-A PC)
1	×	USB-Kabel Typ-C zu Typ-C (für USB-C PC)
1	×	(Empfohlen) Schraubklemmen-Erweiterungsboard für ESP32
1	×	(Empfohlen) Breakout Expansion Board for ESP32
1	×	(Empfohlen) Stromverteiler für ESP32

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.

Gezeigte Funktionen

✅ HTTP-Basis-Authentifizierung
✅ Benutzername und Passwortschutz
✅ Browser-native Anmelde-Dialoge
✅ sichere Zugriffskontrolle
✅ einfache Authentifizierungseinrichtung
✅ Rückwärtskompatibilität (Authentifizierung optional)

Schaltplan

Für dieses Beispiel sind keine zusätzlichen Verdrahtungen erforderlich – es verwendet nur die integrierte LED- und WLAN-Funktionalität des ESP32.

Codebeispiel

/* * 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(); }

Wie es funktioniert

1. Authentifizierung einrichten

Das Beispiel aktiviert die HTTP-Basic-Authentifizierung mit:

Bitte geben Sie den zu übersetzenden englischen Text ein.

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

There is no content inside the code block to translate. Please provide the English text to translate inside the code block.

2. Automatischer Schutz

Sobald die Authentifizierung aktiviert ist, sind alle Routen automatisch geschützt. Benutzer müssen gültige Anmeldeinformationen angeben, um auf jede Seite zugreifen zu können.

3. Browser-Integration

Wenn Benutzer den Webserver besuchen:

Der Browser zeigt einen Login-Dialog an
Der Benutzer gibt Benutzernamen und Passwort ein
Im Erfolgsfall: Die Seite lädt normal
Im Fehlerfall wird eine Seite mit dem Status 401 angezeigt

4. Speicherung von Anmeldeinformationen

Der Browser speichert Anmeldeinformationen für die Sitzung, sodass Benutzer sich nicht erneut anmelden müssen.

Sicherheitsüberlegungen

✅ Geeignet für:

Heimnetzwerke und vertrauenswürdige Umgebungen
Interne IoT-Geräte
Entwicklung und Prototyping
Bildungsprojekte

⚠️ Einschränkungen:

Zugangsdaten sind Base64-kodiert, nicht verschlüsselt
Keine HTTPS-Unterstützung (ESP32-Plattformbeschränkung)
Nur eine Benutzername/Passwort-Kombination
Nicht geeignet für den Produktionseinsatz über öffentliche Netzwerke

🔒 Beste Praktiken:

Ändern Sie sofort Ihre Standard-Anmeldeinformationen
Nur in vertrauenswürdigen Netzwerken verwenden
Zusätzliche Netzwerksicherheit in Betracht ziehen (VPN, Firewall)
Für sicherheitskritische Anwendungen zusätzliche Authentifizierungsebenen hinzufügen

Die Authentifizierung testen

Lade den Code auf deinen ESP32 hoch
Öffne den Serial Monitor, um die IP-Adresse zu sehen
Öffne die IP-Adresse in deinem Webbrowser
Der Login-Dialog erscheint – gib Anmeldeinformationen ein:

Benutzername: admin
Passwort: esp32

Bestätigungsseite lädt nach der Authentifizierung

Anpassungsoptionen

Zugangsdaten ändern

Bitte geben Sie den englischen Text zum Übersetzen ein.

const char* www_username = "myuser";

const char* www_passwort = "mysecretpass";

There is no English content provided to translate. Please paste the text you want translated.

Benutzerdefinierter Bereich

Es wurde kein Text zum Übersetzen bereitgestellt. Bitte fügen Sie den zu übersetzenden Text im Codeblock ein.

server.enableAuthentication(www_username, www_password, "Mein benutzerdefiniertes Gerät");

Bitte fügen Sie den zu übersetzenden Text ein.

Authentifizierung deaktivieren

Please provide the English content to translate (inside the code block).

server.disableAuthentication(); // Alle Routen öffentlich machen

Bitte geben Sie den englischen Text ein, der übersetzt werden soll.

Status der Authentifizierung prüfen

Please provide the English text to translate.

if (server.isAuthenticationEnabled()) {

Serial.println("Authentifizierung aktiv");

}

Bitte den zu übersetzenden englischen Text einfügen.

Rückwärtskompatibilität

Die Authentifizierung ist standardmäßig deaktiviert, sodass der vorhandene Code weiterhin ohne Änderungen funktioniert. Aktivieren Sie die Authentifizierung nur bei Bedarf:

Bitte den englischen Text zum Übersetzen bereitstellen.

// Das funktioniert genau wie zuvor (keine Authentifizierung)

DIYables_ESP32_WebServer server;

server.addRoute("/", handleRoot);

server.begin("WLAN", "Passwort");

// Fügen Sie diese Zeile hinzu, um die Authentifizierung zu aktivieren

server.authentifizierungAktivieren("admin", "password123");

Bitte den zu übersetzenden Text einfügen.

Fehlerbehebung

Browser fragt weiterhin nach Anmeldeinformationen

Benutzername/Passwort auf Tippfehler überprüfen
Browser-Cache und Cookies löschen
Anmeldedaten exakt abgleichen

Kein Zugriff auf Seiten möglich

Die Authentifizierung schützt ALLE Routen, wenn sie aktiviert ist
Verwenden Sie server.disableAuthentication() zum Testen
Überprüfen Sie die Serielle Ausgabe auf Authentifizierungsnachrichten

Authentifizierung funktioniert nicht

Stellen Sie sicher, dass enableAuthentication() nach server.begin() aufgerufen wird.
Stellen Sie sicher, dass die Anmeldeinformationen innerhalb der Längenlimits liegen (max. 31 Zeichen).
Prüfen Sie, ob Passwörter Sonderzeichen enthalten.

Referenzen

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