ESP32 Webserver met Authenticatie Voorbeeld
ESP32 - Webserver met Basic Authentication
Dit voorbeeld laat zien hoe u een beveiligde webserver maakt met HTTP Basic Authentication op ESP32 met behulp van de DIYables_ESP32_WebServer bibliotheek.
Benodigde hardware
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.
Gedemonstreerde functies
- ✅ HTTP Basic Authentication
- ✅ Bescherming met gebruikersnaam en wachtwoord
- ✅ Loginvensters die door de browser worden weergegeven
- ✅ Veilige toegang tot de server
- ✅ Eenvoudige authenticatieconfiguratie
- ✅ Achterwaartse compatibiliteit (authenticatie optioneel)
Schema
Er is geen extra bedrading nodig - dit voorbeeld gebruikt alleen de ingebouwde LED en WiFi-functionaliteit van de ESP32.
Codevoorbeeld
/*
* ESP32 - Eenvoudige webserver met Basic Authentication
*
* Dit voorbeeld toont basisauthenticatie met de DIYables_ESP32_WebServer bibliotheek.
* Aangepast vanuit de eenvoudige WiFi-authenticatie voorbeeldstructuur.
*
* Hardware: ESP32
* Bibliotheek: DIYables_ESP32_WebServer (met ondersteuning voor Basic Authentication)
*/
#include <DIYables_ESP32_WebServer.h>
// WiFi-inloggegevens
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Authenticatiegegevens
const char* www_username = "admin";
const char* www_password = "esp32";
// Maak webserver instantie aan
DIYables_ESP32_WebServer server;
// HTML-pagina inhoud
const char* LOGIN_SUCCESS_PAGE = R"(
<!DOCTYPE HTML>
<html>
<head><title>ESP32 Webserver</title></head>
<body>
<h1>Login geslaagd!</h1>
<p>U bent nu ingelogd.</p>
<p>Server draait met DIYables_ESP32_WebServer bibliotheek</p>
</body>
</html>
)";
// Hoofdpagina 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("Upgrade alstublieft de firmware");
Serial.print("Proberen verbinding te maken met SSID: ");
Serial.println(WIFI_SSID);
// Configureer de hoofdpagina route
server.addRoute("/", handleRoot);
// Start server met WiFi-verbinding (regelt verbinding automatisch)
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Schakel basic authentication in
server.enableAuthentication(www_username, www_password, "ESP32");
Serial.print("IP-adres: ");
Serial.println(WiFi.localIP());
Serial.println("Server klaar met authenticatie ingeschakeld");
Serial.print("Gebruikersnaam: ");
Serial.println(www_username);
Serial.print("Wachtwoord: ");
Serial.println(www_password);
}
void loop() {
// Verwerk alle clientverzoeken (inclusief authenticatie)
server.handleClient();
}
Hoe het werkt
1. Authenticatieconfiguratie
Het voorbeeld zet HTTP Basic Authentication aan met:
server.enableAuthentication(www_username, www_password, "ESP32");
2. Automatische bescherming
Zodra authenticatie is ingeschakeld, zijn alle routes automatisch beveiligd. Gebruikers moeten geldige inloggegevens invullen om een pagina te kunnen bezoeken.
3. Browserintegratie
Wanneer gebruikers de webserver bezoeken:
- De browser toont een inlogvenster
- Gebruiker voert gebruikersnaam en wachtwoord in
- Bij succes: pagina wordt normaal geladen
- Bij mislukking: 401 Unauthorized pagina wordt getoond
4. Opslag van inloggegevens
Browsers bewaren de inloggegevens voor de sessie, zodat gebruikers niet steeds opnieuw hoeven in te loggen.
Beveiligingsoverwegingen
✅ Geschikt voor:
- Thuisnetwerken en vertrouwde omgevingen
- Interne IoT-apparaten
- Ontwikkeling en prototyping
- Educatieve projecten
⚠️ Beperkingen:
- Inloggegevens worden Base64-gecodeerd verzonden, niet versleuteld
- Geen HTTPS-ondersteuning (beperking ESP32 platform)
- Enkelvoudige gebruikersnaam/wachtwoord combinatie
- Niet geschikt voor productie op openbare netwerken
🔒 Beste praktijken:
- Wijzig standaard wachtwoorden direct na installatie
- Gebruik alleen in vertrouwde netwerken
- Overweeg extra netwerkbeveiliging (VPN, firewall)
- Voor hoge beveiliging extra authenticatielaag toevoegen
Authenticatie testen
- Upload de code naar uw ESP32
- Open de Serial Monitor om het IP-adres te zien
- Bezoek het IP-adres in uw webbrowser
- Loginvenster verschijnt - voer inloggegevens in:
- Gebruikersnaam: admin
- Wachtwoord: esp32
- Succespagina verschijnt na correcte authenticatie
Aanpassingsopties
Wijzig inloggegevens
const char* www_username = "myuser";
const char* www_password = "mysecretpass";
Aangepast realm (weergave naam in loginvenster)
server.enableAuthentication(www_username, www_password, "My Custom Device");
Authenticatie uitschakelen
server.disableAuthentication(); // Maak alle routes openbaar
Controleer authenticatiestatus
if (server.isAuthenticationEnabled()) {
Serial.println("Authenticatie actief");
}
Achterwaartse compatibiliteit
Authenticatie is standaard uitgeschakeld, waardoor bestaande code blijft werken zonder aanpassingen. Schakel authenticatie alleen in indien gewenst:
// Werkt precies zoals voorheen (zonder authenticatie)
DIYables_ESP32_WebServer server;
server.addRoute("/", handleRoot);
server.begin("WiFi", "Password");
// Voeg deze regel toe om authenticatie aan te zetten
server.enableAuthentication("admin", "password123");
Probleemoplossing
Browser vraagt steeds om inloggegevens
- Controleer gebruikersnaam/wachtwoord op tikfouten
- Wis browsercache en cookies
- Verifieer of inloggegevens exact overeenkomen
Geen toegang tot pagina’s
- Authenticatie beveiligt ALLE routes wanneer ingeschakeld
- Gebruik server.disableAuthentication() om te testen
- Controleer de Serial Monitor op authenticatiemeldingen
Authenticatie werkt niet
- Zorg dat enableAuthentication() ná server.begin() wordt aangeroepen
- Controleer of gebruikersnaam en wachtwoord niet langer zijn dan 31 tekens
- Let op speciale tekens in wachtwoorden
Gerelateerde voorbeelden
- Webserver voorbeeld - Eenvoudige meerpagina webserver
- Webserver met query strings - Dynamische inhoud met parameters
- Webserver met WebSocket - Real-time communicatie
Referenties
- Authenticatie documentatie - Complete authenticatie handleiding
- DIYables_ESP32_WebServer bibliotheek referentie - Volledige API documentatie