Arduino Nano ESP32 - Webserver-Passwort
In diesem Leitfaden lernen wir, wie man einen Arduino Nano ESP32-Webserver mit Benutzername- und Passwortschutz für die Anmeldung erstellt. Bevor auf irgendeine Webseite des ESP32 zugegriffen wird, werden die Benutzer aufgefordert, ihren Benutzernamen und ihr Passwort einzugeben.
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 Arduino Nano ESP32 und Webserver
Wenn Sie mit dem Arduino Nano ESP32 und dem Webserver nicht vertraut sind (einschließlich Pinbelegung, Funktionsweise und Programmierung), können Sie sich über die folgenden Tutorials informieren:
Arduino Nano ESP32 Code - Webserver Benutzername/Passwort
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-web-server-password
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
// Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
const char* www_username = "admin";
const char* www_password = "esp32";
void handleRoot(AsyncWebServerRequest* request) {
if (!request->authenticate(www_username, www_password)) {
return request->requestAuthentication();
}
// send your web content here. The below is simplest form.
request->send(200, "text/html", "<html><body><h1>Login Successful!</h1><p>You are now logged in.</p></body></html>");
}
void handleNotFound(AsyncWebServerRequest* request) {
request->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 ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
}
Schnelle Schritte
- Falls dies das erste Mal ist, dass Sie ESP32 verwenden, sehen Sie sich wie man die Umgebung für Arduino Nano ESP32 in der Arduino IDE einrichtet an.
- Verbinden Sie das Arduino Nano ESP32-Board mit Ihrem PC über ein Micro-USB-Kabel.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das Arduino Nano ESP32-Board 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 “ESPAsyncWebServer”, und finden Sie dann den ESPAsyncWebServer, der von lacamera erstellt wurde.
- Klicken Sie auf die Schaltfläche Install, um die ESPAsyncWebServer-Bibliothek zu installieren.
- Sie werden aufgefordert, die Abhängigkeit zu installieren. Klicken Sie auf die Schaltfläche Alle installieren.
- Kopieren Sie den obigen Code und öffnen Sie ihn mit der Arduino IDE
- Ändern Sie die WLAN-Informationen (SSID und Passwort) im Code auf Ihre eigenen
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um den Code auf den ESP32 hochzuladen
- Öffnen Sie den Seriellen Monitor
- Überprüfen Sie das Ergebnis im Seriellen Monitor.
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 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 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, Benutzername und Passwort einzugeben.
- Geben Sie den Benutzernamen und das Passwort ein, die im Arduino Nano 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 Arduino Nano ESP32 angezeigt:
※ Notiz:
- Sie können den Web-Benutzername und das Passwort direkt im Code anpassen, indem Sie die Werte der beiden Variablen ändern: www_username und www_password.
- Sie haben die Möglichkeit, diesen Code anzupassen, indem Sie Ihren eigenen HTML-, CSS- und JavaScript-Code für Ihre Webseite einbinden.
- Es ist zu beachten, dass im Code selbst kein HTML-Code für das Login-Formular (Benutzername/Passwort) enthalten ist. Seien Sie nicht überrascht! Stattdessen wird das Login-Formular dynamisch vom Webbrowser erzeugt.
Fortgeschrittene Kenntnisse
Dieser Abschnitt bietet vertiefte Einblicke darin, wie das Benutzername/Passwort-System ohne HTML für das Login-Formular funktioniert:
- Zunächst, wenn Sie die IP-Adresse des Arduino Nano ESP32 in einen Webbrowser eingeben, sendet der Browser eine HTTP-Anfrage an den Arduino Nano ESP32 ohne Benutzernamen- oder Passwort-Zugangsdaten.
- Nach dem Empfang dieser Anfrage prüft der Code des Arduino Nano ESP32, ob Benutzernamen- und Passwortangaben übermittelt wurden. Falls nicht, antwortet der Arduino Nano ESP32 nicht mit dem Inhalt der angeforderten Seite. Stattdessen sendet er eine HTTP-Nachricht mit Headern, die dem Browser Anweisungen geben, den Benutzer zur Eingabe seines Benutzernamens/Passworts aufzufordern. Wichtig ist, dass diese Antwort keinen HTML-Code für das Login-Formular enthält.
- Nach Erhalt dieser Antwort interpretiert der Webbrowser die HTTP-Header und versteht die Aufforderung des ESP32 nach Benutzername/Passwort. Folglich 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 Arduino Nano 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 der Benutzer wird erneut aufgefordert, die korrekten Anmeldeinformationen einzugeben.
- Wenn der Benutzer beim ersten Mal die richtigen Benutzernamen und das Passwort eingibt, müssen zukünftige Anfragen diese Anmeldeinformationen nicht erneut eingegeben werden. Das liegt daran, dass der Webbrowser die Anmeldeinformationen automatisch speichert und sie in nachfolgenden Anfragen mitsendet.