ESP32 Captive Portal zum Konfigurieren von statischen und DHCP-IP-Einstellungen - Gunook

2025 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2025-01-13 06:56

ESP 32 ist ein Gerät mit integriertem WLAN und BLE. Es ist eine Art Segen für die IoT-Projekte. Geben Sie einfach Ihre SSID, Ihr Passwort und Ihre IP-Konfigurationen ein und integrieren Sie die Dinge in die Cloud. Die Verwaltung der IP-Einstellungen und Benutzeranmeldeinformationen kann dem Benutzer jedoch Kopfschmerzen bereiten.

Was ist, wenn der Benutzer die WLAN-Anmeldeinformationen ändern möchte?

Was ist, wenn der Benutzer die DHCP/Statische IP-Einstellungen ändern möchte?

Das Flashen des ESP32 jedes Mal ist nicht zuverlässig und nicht einmal die Lösung für diese Probleme. Hier in diesem instructable werden wir demonstrieren.

• So erstellen Sie ein Captive-Portal.
• Hosten eines Webformulars vom ESP32.
• Lesen und Schreiben von SPIFFS ESP32.
• Erstellen eines Soft Access Points und Verbinden mit einer Station

Schritt 1: Hardware- und Softwarespezifikation

Hardware-Spezifikation

• ESP32 WLAN/BLE
• Kabelloser Temperatur- und Feuchtigkeitssensor

Softwarespezifikation

Arduino-IDE

Schritt 2: Erstellen eines Captive Portals

Ein Captive-Portal ist eine Webseite, die neu verbundenen Benutzern angezeigt wird, bevor ihnen ein breiterer Zugriff auf Netzwerkressourcen gewährt wird. Hier stellen wir drei Webseiten bereit, um zwischen DHCP- und statischen IP-Einstellungen auszuwählen. Wir können die IP-Adresse für ESP auf zwei Arten definieren.

• DHCP-IP-Adresse - Dies ist eine Möglichkeit, dem Gerät die IP-Adresse dynamisch zuzuweisen. Die Standard-IP-Adresse des ESP lautet 192.168.4.1
• Statische IP-Adresse - Zuweisen einer permanenten IP-Adresse zu unserem Netzwerkgerät. Um dem Gerät die statische IP bereitzustellen, müssen wir die IP-Adresse, die Gateway-Adresse und die Subnetzmaske definieren.

Auf der ersten Webseite stehen dem Benutzer die Optionsfelder zur Auswahl zwischen DHCP- und statischen IP-Einstellungen zur Verfügung. Auf der nächsten Webseite müssen wir die IP-bezogenen Informationen bereitstellen, um fortzufahren.

HTML Quelltext

Den HTML-Code für Webseiten finden Sie in diesem Github-Repository.

Sie können jede IDE oder jeden Texteditor wie Sublime oder Notepad++ verwenden, um HTML-Webseiten zu erstellen.

• Erstellen Sie zunächst eine HTML-Webseite mit zwei Optionsfeldern, um zwischen DHCP- und statischen IP-Einstellungen zu wählen.
• Erstellen Sie nun die Schaltfläche zum Senden Ihrer Antwort
• Geben Sie den Optionsfeldern einen Namen. Die ESP-Webserverklasse nimmt diese Namen als Argumente und erhält die Antwort der Optionsfelder mit diesen Argumenten
• Fügen Sie nun einen ' SUBMIT '-Button ein, um die Antwort an das Gerät zu senden.
• Auf den anderen Webseiten haben wir Textfelder. Geben Sie den Namenswert und den Eingabetyp in das Textfeld ein und fügen Sie eine Senden-Schaltfläche hinzu, um die Antwort ' SUBMIT ' zu senden.
• Erstellen Sie eine Schaltfläche 'RESET', um den Inhalt des Textfelds zurückzusetzen.

// Optionsfeld DHCP-Einstellung

Statische IP-Einstellung

//Textfelder eingeben

//Senden-Schaltfläche

input[type="submit"]{ Hintergrundfarbe: #3498DB; /* Grün */ Rahmen: keine; Farbe weiß; Füllung: 15 Pixel 48 Pixel; Textausrichtung: Mitte; Textdekoration: keine; Anzeige: Inline-Block; Schriftgröße: 16px; }

//Reset-Knopf

input[type="submit"]{ Hintergrundfarbe: #3498DB; /* Grün */ Rahmen: keine; Farbe weiß; Füllung: 15 Pixel 48 Pixel; Textausrichtung: Mitte; Textdekoration: keine; Anzeige: Inline-Block; Schriftgröße: 16px; }

Schritt 3: Abrufen der Webantwort von Webseiten an ESP32

Das Bereitstellen von Webseiten von einem ESP 32-Gerät macht großen Spaß. Es kann alles sein, von der Anzeige der Temperaturdaten auf der Webseite, dem Umschalten der LEDs von der benutzerdefinierten Webseite oder dem Speichern der Benutzer-WLAN-Anmeldeinformationen über eine Webseite. Zu diesem Zweck verwendet ESP 32 die WebServer-Klasse zum Servern von Webseiten.

• Erstellen Sie zunächst eine Instanz der WebServer-Klasse an Port 80 (HTTP-Port).
• Richten Sie nun das ESP-Gerät als softAP ein. Geben Sie die SSID und den Hauptschlüssel an und weisen Sie dem Gerät eine statische IP zu.
• Starten Sie den Server.

//************SSID und Pass für AP***************/

const char *ssidAP = "SSID angeben"; const char *passAP = "Schlüssel übergeben";

//************Statische IP-Konfiguration****************/IPAddress ap_local_IP(192, 168, 1, 77); IP-Adresse ap_gateway(192, 168, 1, 254); IPAdresse ap_subnet(255, 255, 255, 0);

//************SoftAP-Konfiguration****************/

WiFi.mode(WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP) ? "soft-AP setup": "Verbindung fehlgeschlagen");

Verzögerung (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Konfigurieren von Soft-AP": "Fehler in der Konfiguration"); Serial.println (WiFi.softAPIP());

//Server starten

server.begin();

• Erstellen und stellen Sie die URL mithilfe verschiedener Rückrufe bereit.
• und behandeln den Client asynchron mit handleClient.

server.on("/", handleRoot);

server.on("/dhcp", handleDHCP); server.on("/static", handleStatic); // die Antworten verarbeiten server.handleClient();

• Um auf die Webseiten zuzugreifen. Verbinden Sie sich mit dem soeben erstellten AP, der in Ihren WLAN-Netzwerken aufgeführt ist. Gehen Sie nun zum Browser, geben Sie die von Ihnen im letzten Schritt konfigurierte IP ein und rufen Sie die Webseite auf.
• Die Webserverklasse nimmt als Argumente den Namen von input('text', 'button', 'radiobutton'etc.) an. Es speichert die Antworten dieser Eingaben als Argumente und wir können die Werte abrufen oder sie mit den Methoden args, arg, hasArg überprüfen.

if(server.args()>0){ for(int i=0; i<=server.args();i++){

Serial.println (String (server.argName (i)) + '\t' + String (server.arg(i)));

}

if(server.hasArg("ipv4static") && server.hasArg("gateway") && server.hasArg("subnet")){ staticSet(); }sonst if(server.arg("ipv4")!= ""){ dhcpSetManual(); }sonst{ dhcpSetDefault(); }

Schritt 4: Statische IP-Konfiguration

Bisher haben wir verstanden, wie man sich mit AP verbindet und wie man die Werte aus den Eingabefeldern der Webseite erhält

In diesem Schritt konfigurieren wir die statische IP

• Wählen Sie die statische IP-Einstellung und klicken Sie auf die Schaltfläche Senden. Sie werden auf die nächste Seite weitergeleitet.
• Geben Sie auf der nächsten Seite die statische IP-Adresse, Gateway-Adresse und Subnetzmaske ein. Diese Seite wird unter "/static" bedient, was von der statischen Callback-Methode handle behandelt wird.
• Rufen Sie den Wert von Textfeldern mit der Methode server.arg() ab.

String ipv4static = String(server.arg("ipv4static"));

String-Gateway = String(server.arg("Gateway")); String-Subnetz = String(server.arg("Subnetz"));

• Nun werden diese Werte in ein JSON-Format serialisiert.
• Dann schreiben wir den JSON nach SPIFFS.

root["statickey"]="staticSet";

root["staticIP"] = ipv4static;

root["Gateway"] = Gateway;

root["Subnetz"] = Subnetz;

Datei fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE);

if(root.printTo(fileToWrite)){

Serial.println ("--Datei geschrieben"); }

• Diese Konfiguration wird in SPIFFS gespeichert. Später werden diese Werte aus SPIFFS gelesen.
• Die statischen IP-Werte werden dann von JSON geparst.

Dateidatei = SPIFFS.open("/ip_set.txt", "r");

while(datei.verfügbar()){

debugLogData += char(file.read()); }

if(debugLogData.length()>5){

JsonObject& readRoot =jsonBuffer.parseObject(debugLogData);

if(readRoot.containsKey("statickey")){

String ipStaticValue= readRoot["staticIP"];

String gatewayValue = readRoot["gateway"];

String subnetValue = readRoot["subnet"];

Schritt 5: DHCP-Einstellungen

In diesem Schritt konfigurieren wir die DHCP-Einstellungen

Wählen Sie auf der Indexseite die DHCP-Einstellungen aus und klicken Sie auf "Senden"

• Sie werden auf die nächste Seite weitergeleitet. Geben Sie auf der nächsten Seite die IP-Adresse ein oder wählen Sie Standard auswählen und klicken Sie auf die Schaltfläche "Senden", um die Antwort zu senden. Diese Seite wird unter "/dhcp" bedient, was von der handleDHCP-Callback-Methode verarbeitet wird. Rufen Sie den Wert von Textfeldern mit der Methode server.arg() ab. Wenn Sie auf das Kontrollkästchen Standard auswählen klicken. dem Gerät wird die IP 192.168.4.1 zugewiesen.
• Nun werden diese Werte in ein JSON-Format serialisiert.
• Dann schreiben wir den JSON nach SPIFFS.

JsonObject& root =jsonBuffer.createObject();

root["dhcpManual"]="dhcpManual";

root["dhcpIP"] = "192.168.4.1";

Datei fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE);

if(root.printTo(fileToWrite)){

Serial.println ("--Datei geschrieben"); }

• Diese Konfiguration wird in SPIFFS gespeichert. Später werden diese Werte aus SPIFFS gelesen.
• Die DHCP-IP-Werte werden dann von JSON geparst.

Datei file = SPIFFS.open("/ip_set.txt", "r");while(file.available()){ debugLogData += char(file.read()); } if (debugLogData.length ()> 5) { JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

if(readRoot.containsKey("dhcpDefault")){

String ipdhcpValue= readRoot["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig();}

Schritt 6: WLAN-Anmeldeinformationen speichern

Vorerst haben wir die IP-Konfiguration ausgewählt. Jetzt müssen wir die WLAN-Anmeldeinformationen des Benutzers speichern. Um diese Situation zu lösen. Wir haben dieses Verfahren befolgt.

• Jetzt haben wir also unser Geräte-AP-Setup in der DHCP- oder Static-IP-Konfiguration, die wir aus dem in den letzten Schritten erwähnten Captive-Portal ausgewählt hatten.
• Nehmen wir an, wir haben die statische IP-Konfiguration ausgewählt.
• Wir werden einen SoftAP an dieser IP konfigurieren.
• Nachdem Sie die Werte aus SPIFFS gelesen und diese Werte aus JSON geparst haben. Wir werden den softAP an dieser IP konfigurieren.
• Wandeln Sie den IP-String in Bytes um.

Byte-IP[4];

parseBytes(ipv4Arr, '.', ip, 4, 10);

ip0 = (uint8_t)ip[0];

ip1 = (uint8_t)ip[1];

ip2 = (uint8_t)ip[2];

ip3 = (uint8_t)ip[3];

IPAdresse ap_local(ip0, ip1, ip2, ip3);

//**************** Bytes aus String analysieren********************//

void parseBytes(const char* str, char sep, byte* bytes, int maxBytes, int base) {

for (int i = 0; i < maxBytes; i++) {

bytes = strtoul(str, NULL, Basis);

str = strchr(str, sep);

if (str == NULL || *str == '\0') {

brechen;

}

str++;

}}

Jetzt konfigurieren wir den softAP an dieser IP

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net) ? "SoftAP konfigurieren": "nicht verbunden"); Serial.println (WiFi.softAPIP());

• Starten Sie nun den Webserver und stellen Sie eine Webseite unter dieser IP bereit. Um die WLAN-Anmeldeinformationen des Benutzers einzugeben.
• Die Webseite besteht aus zwei Textfeldern zur Eingabe von SSID und Passwort.
• handleStaticForm ist eine Rückrufmethode, die die Webseite bedient.
• server.handleClient() kümmert sich um die Anfragen und Antworten an und von der Webseite.

server.begin();

server.on("/", handleStaticForm);

server.onNotFound(handleNotFound);

STimer = Millis();

while(millis()-STTimer<= SInterval) {

server.handleClient(); }

Das HTML-Formular wird in SPIFFS gespeichert. wir prüfen die passenden Argumente mit server.arg(). um den Wert von SSID und Passwort zu erhalten

Dateidatei = SPIFFS.open("/WiFi.html", "r");

server.streamFile(Datei, "text/html");

Datei.close();

Schritt 7: Lesen und Schreiben von SPIFFS

SPIFFS

Serial Peripheral Interface Flash File System, kurz SPIFFS. Es ist ein leichtes Dateisystem für Mikrocontroller mit einem SPI-Flash-Chip. Der Onboard-Flash-Chip des ESP32 bietet viel Platz für Ihre Webseiten. Wir haben unsere Webseite auch im Flash-System gespeichert. Es gibt ein paar Schritte, die wir ausführen müssen, um Daten auf spiffs hochzuladen

Laden Sie das ESP 32 SPIFFS-Daten-Upload-Tool herunter:

• Erstellen Sie in Ihrem Arduino-Skizzenbuchverzeichnis ein Tools-Verzeichnis, wenn es noch nicht existiert
• Entpacken Sie das Tool in das Tools-Verzeichnis (der Pfad sieht wie folgt aus /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Arduino-IDE neu starten
• Öffnen Sie eine Skizze (oder erstellen Sie eine neue und speichern Sie sie)
• Gehen Sie zum Skizzenverzeichnis (wählen Sie Skizze > Skizzenordner anzeigen)
• Erstellen Sie dort ein Verzeichnis namens data und alle gewünschten Dateien im Dateisystem. Wir haben unsere HTML-Seite mit dem Namen webform.html hochgeladen
• Stellen Sie sicher, dass Sie ein Board, einen Port und einen geschlossenen Serial Monitor ausgewählt haben
• Wählen Sie Werkzeuge > ESP8266-Skizzendaten-Upload. Dies sollte mit dem Hochladen der Dateien in das ESP8266-Flash-Dateisystem beginnen. Wenn Sie fertig sind, zeigt die IDE-Statusleiste die Meldung SPIFFS Image Uploaded an.

void handleDHCP(){ Dateidatei = SPIFFS.open("/page_dhcp.html", "r"); server.streamFile(Datei, "text/html"); file.close();}

void handleStatic(){

Dateidatei = SPIFFS.open("/page_static.html", "r"); server.streamFile(Datei, "text/html"); file.close();}

Schreiben an SPIFFS

Hier schreiben wir die gespeicherten Einstellungen in die SPIFFS, damit Benutzer diese Schritte nicht ausführen müssen, wenn das Gerät zurückgesetzt wird.

• Konvertieren Sie die von der Webseite empfangenen Argumente in JSON-Objekte
• Schreiben Sie diese JSON in die in SPIFFS gespeicherte.txt-Datei.

String ipv4static = String(server.arg("ipv4static"));

String-Gateway = String(server.arg("Gateway")); String-Subnetz = String(server.arg("Subnetz")); root["statickey"]="staticSet"; root["staticIP"] = ipv4static; root["Gateway"] = Gateway; root["Subnetz"] = Subnetz; String JSONStatic; char-JSON[120]; root.printTo(Seriell); root.prettyPrintTo(JSONStatic); JSONStatic.toCharArray(JSON, sizeof(JSONStatic)+2); Datei fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Fehler beim Öffnen von SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("--Datei geschrieben"); } Sonst { Serial.println ("--Fehler beim Schreiben der Datei"); } fileToWrite.close();

Schritt 8: Gesamtcode

Den Over-Code für HTML und ESP32 finden Sie in diesem Github-Repository