ESP32 - Webserver Wachtwoord
In deze tutorial ontdekken we hoe u een ESP32 webserver maakt die beschermd wordt met een gebruikersnaam en wachtwoord voor het inloggen. Voordat u toegang krijgt tot de webpagina op de ESP32, wordt de gebruiker gevraagd zijn gebruikersnaam/wachtwoord in te voeren.
Hardware Vereist
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Over ESP32 en Webserver
Als u nog niet bekend bent met de ESP32 en webserver (inclusief pinout, hoe het werkt en programmeren), kunt u hierover leren via de volgende tutorials:
ESP32 Code - Webserver Gebruikersnaam/Wachtwoord
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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();
}
Snelle Stappen
- Als u voor het eerst een ESP32 gebruikt, bekijk dan hoe de omgeving in te stellen voor ESP32 op Arduino IDE.
- Verbind de ESP32 board met uw pc via een micro USB-kabel
- Open Arduino IDE op uw pc.
- Selecteer het juiste ESP32 board (bijv. ESP32 Dev Module) en de juiste COM-poort.
- Open de Library Manager door te klikken op het Library Manager icoon in de linker navigatiebalk van Arduino IDE.
- Zoek naar “DIYables ESP32 WebServer” en vind de Web Server bibliotheek die door DIYables is gemaakt.
- Klik op de Installeren knop om de Web Server bibliotheek te installeren.
- Kopieer de bovenstaande code en open deze met Arduino IDE
- Pas de wifi-informatie (SSID en wachtwoord) in de code aan naar uw eigen gegevens
- Klik op de Upload knop in Arduino IDE om de code naar de ESP32 te uploaden
- Open de Seriële Monitor
- Bekijk het resultaat in de Seriële Monitor.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- U ziet een IP-adres in de Seriële Monitor, bijvoorbeeld: 192.168.0.3
- Typ dit IP-adres in de adresbalk van een webbrowser op uw smartphone of pc.
- Let op: u moet 192.168.0.3 vervangen door het IP-adres dat u in de Seriële Monitor heeft gekregen.
- U ziet een pagina waarop u wordt gevraagd uw gebruikersnaam en wachtwoord in te voeren.
- Vul de gebruikersnaam/wachtwoord in die in de ESP32 code staan, in dit voorbeeld: admin als gebruikersnaam en esp32 als wachtwoord
- Als u gebruikersnaam/wachtwoord correct invoert, verschijnt de webinhoud van de ESP32:
※ Notiz:
- U kunt de gebruikersnaam en het wachtwoord aanpassen door de waarden van de twee variabelen www_username en www_password in de code te wijzigen
- U kunt deze code aanpassen om de HTML/CSS/JavaScript code van uw eigen webpagina toe te voegen
- In de code ontbreekt HTML-code voor het inlogformulier (gebruikersnaam/wachtwoord). Niet schrikken! Het inlogformulier wordt door de webbrowser zelf gegenereerd.
Geavanceerde Kennis
Deze sectie legt uit hoe het gebruikersnaam/wachtwoord-systeem werkt zonder HTML voor het inlogformulier.
- Wanneer u het IP-adres van de ESP32 in een webbrowser invoert, verstuurt de browser een HTTP-verzoek naar de ESP32 zonder gebruikersnaam/wachtwoord gegevens.
- Bij ontvangst van dit verzoek controleert de ESP32-code of er een gebruikersnaam/wachtwoord is meegezonden. Is dat niet het geval, dan reageert de ESP32 niet met de pagina-inhoud, maar met een HTTP-bericht dat headers bevat die de browser instrueren de gebruiker om zijn gebruikersnaam/wachtwoord te vragen. Deze respons bevat dus geen HTML voor het inlogformulier.
- De webbrowser leest de HTTP-headers en herkent dat de ESP32 om een gebruikersnaam/wachtwoord vraagt. Daardoor genereert de browser dynamisch een inlogformulier waarmee de gebruiker zijn inloggegevens kan invoeren.
- De gebruiker voert zijn gebruikersnaam/wachtwoord in het formulier in.
- De webbrowser stuurt de ingevulde gebruikersnaam/wachtwoord mee in een HTTP-verzoek naar de ESP32.
- De ESP32 controleert de ontvangen gebruikersnaam/wachtwoord. Is deze correct, dan stuurt hij de gevraagde inhoud van de pagina terug. Is deze onjuist, dan vraagt hij opnieuw om de juiste gegevens in te voeren.
- Als de gebruiker eenmaal het correcte gebruikersnaam/wachtwoord heeft ingevoerd, hoeft hij die niet steeds opnieuw in te voeren. Dit komt doordat de webbrowser de inloggegevens onthoudt en automatisch meestuurt bij volgende verzoeken.