Portail captif ESP32 pour configurer les paramètres IP statiques et DHCP : 8 étapes

2025 Auteur: John Day | [email protected]. Dernière modifié: 2025-01-13 06:57

ESP 32 est un appareil avec WiFi et BLE intégrés. C'est en quelque sorte une aubaine pour les projets IoT. Donnez simplement votre SSID, mot de passe et configurations IP et intégrez les choses dans le cloud. Mais, la gestion des paramètres IP et des informations d'identification de l'utilisateur peut être un casse-tête pour l'utilisateur.

Que faire si l'utilisateur souhaite modifier les informations d'identification WiFi ?

Que faire si l'utilisateur souhaite changer les paramètres DHCP/IP statique ?

Flasher l'ESP32 à chaque fois n'est pas fiable et même pas la solution à ces problèmes. Ici, dans ce instructable, nous allons démontrer.

• Comment créer un portail captif.
• Hébergement d'un formulaire Web à partir de l'ESP32.
• Lecture et écriture à partir de SPIFFS ESP32.
• Création d'un Soft Access Point et connexion à une station

Étape 1: Spécification matérielle et logicielle

Spécification matérielle

• ESP32 Wi-Fi/BLE
• Capteur de température et d'humidité sans fil

Spécification du logiciel

IDE Arduino

Étape 2: Création d'un portail captif

Un portail captif est une page Web qui s'affiche pour les utilisateurs nouvellement connectés avant qu'ils ne bénéficient d'un accès plus large aux ressources du réseau. Ici, nous servons trois pages Web pour choisir entre les paramètres DHCP et IP statique. nous pouvons définir l'adresse IP à ESP de deux manières.

• Adresse IP DHCP - c'est un moyen d'attribuer dynamiquement l'adresse IP à l'appareil. L'adresse IP par défaut de l'ESP est 192.168.4.1
• Adresse IP statique - attribution d'une adresse IP permanente à notre périphérique réseau. pour fournir l'adresse IP statique à l'appareil, nous devons définir l'adresse IP, l'adresse de la passerelle et le masque de sous-réseau.

Dans la première page Web, l'utilisateur dispose de boutons radio pour choisir entre les paramètres DHCP et IP statique. Dans la page Web suivante, nous devons fournir les informations relatives à l'IP pour continuer.

Code HTML

Le code HTML des pages Web se trouve dans ce référentiel Github.

Vous pouvez utiliser n'importe quel IDE ou éditeur de texte comme Sublime ou notepad++ pour créer des pages Web HTML.

• Créez d'abord une page Web HTML contenant deux boutons radio pour choisir entre DHCP et Static IP Settings.
• Créez maintenant le bouton pour soumettre votre réponse
• Donnez un nom aux boutons radio. La classe du serveur Web ESP prendra ces noms comme arguments et obtiendra la réponse des boutons radio en utilisant ces arguments
• Insérez maintenant un bouton ' SOUMETTRE ' pour envoyer la réponse à l'appareil.
• Dans les autres pages Web, nous avons des zones de texte. Donnez la valeur du nom et le type d'entrée à la zone de texte et ajoutez un bouton d'envoi pour « ENVOYER » soumettre la réponse.
• Créez un bouton 'RESET' pour réinitialiser le contenu du champ de texte.

//Réglage DHCP du bouton radio

Paramètre IP statique

//Saisir les zones de texte

//Bouton de soumission

input[type="submit"]{ background-color: #3498DB; /* Vert */ bordure: aucune; Couleur blanche; remplissage: 15px 48px; text-align: centre; texte-décoration: aucun; affichage: bloc en ligne; taille de la police: 16px; }

//Bouton de réinitialisation

input[type="submit"]{ background-color: #3498DB; /* Vert */ bordure: aucune; Couleur blanche; remplissage: 15px 48px; text-align: centre; texte-décoration: aucun; affichage: bloc en ligne; taille de la police: 16px; }

Étape 3: obtenir la réponse Web des pages Web vers ESP32

Servir des pages Web à partir de l'appareil ESP 32 est très amusant. Il peut s'agir de n'importe quoi, de l'affichage des données de température sur la page Web, de la conversion des voyants de la page Web personnalisée ou du stockage des informations d'identification WiFi de l'utilisateur via une page Web. À cette fin, ESP 32 utilise WebServer Class pour serveur des pages Web.

• Tout d'abord, créez une instance de la classe WebServer sur le port 80 (port
• Configurez maintenant l'appareil ESP en tant que softAP. Donnez le SSID et le mot de passe et attribuez une adresse IP statique à l'appareil.
• Démarrez le serveur.

//************ SSID et Pass pour AP**************/

const char *ssidAP = "donner le SSID"; const char *passAP = "clé d'accès";

//************Configuration IP statique******************/IPAddress ap_local_IP (192, 168, 1, 77); IPAddress ap_gateway (192, 168, 1, 254); IPAddress ap_subnet (255, 255, 255, 0);

//**********Configuration SoftAP**************/

WiFi.mode(WIFI_AP);

Serial.println(WiFi.softAP(ssidAP, passAP) ? "soft-AP setup": "Impossible de se connecter");

retard (100); Serial.println(WiFi.softAPConfig(ap_local_IP, ap_gateway, ap_subnet)? "Configuration Soft AP": "Error in Configuration"); Serial.println(WiFi.softAPIP());

//commencer le serveur

serveur.begin();

• Créez et diffusez l'URL à l'aide de différents rappels.
• et gérer le client de manière asynchrone à l'aide de handleClient.

server.on("/", handleRoot);

server.on("/dhcp", handleDHCP); server.on("/static", handleStatic); // gère les réponses server.handleClient();

• Pour accéder aux pages Web. Connectez-vous au point d'accès que vous venez de créer, répertorié dans vos réseaux WiFi. Maintenant, allez dans le navigateur, entrez l'adresse IP que vous avez configurée à la dernière étape et accédez à la page Web.
• La classe du serveur Web prend le nom donné aux entrées('text', 'button', 'radiobutton'etc.) comme arguments. Il enregistre les réponses de ces entrées en tant qu'arguments et nous pouvons obtenir les valeurs ou les vérifier à l'aide des méthodes args, arg, hasArg.

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(); } else if(server.arg("ipv4")!= ""){ dhcpSetManual(); }else{ dhcpSetDefault(); }

Étape 4: Configuration IP statique

Jusqu'à présent, nous avons compris comment se connecter à AP et comment obtenir les valeurs des champs de saisie de la page Web

Dans cette étape, nous allons configurer l'IP statique

• Sélectionnez le paramètre IP statique et cliquez sur le bouton Soumettre. Vous serez redirigé vers la page suivante.
• Dans la page suivante, entrez l'adresse IP statique, l'adresse de la passerelle et le masque de sous-réseau. Cette page sera servie à "/static" qui est gérée par la méthode de rappel statique.
• Obtenez la valeur des champs de texte à l'aide de la méthode server.arg().

Chaîne ipv4static = String(server.arg("ipv4static"));

Passerelle de chaîne = String(server.arg("passerelle")); String subnet = String(server.arg("subnet"));

• Maintenant, ces valeurs sont sérialisées dans un format JSON.
• Ensuite, nous écrirons le JSON dans SPIFFS.

root["statickey"]="staticSet";

root["staticIP"] = ipv4static;

root["passerelle"] = passerelle;

root["sous-réseau"] = sous-réseau;

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

if(root.printTo(fileToWrite)){

Serial.println("--Fichier écrit"); }

• Cette configuration est enregistrée dans SPIFFS. Plus tard, ces valeurs sont lues à partir de SPIFFS.
• Les valeurs IP statiques sont ensuite analysées à partir de JSON.

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

while(fichier.disponible()){

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

if(debugLogData.length()>5){

JsonObject& readRoot =jsonBuffer.parseObject(debugLogData);

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

String ipStaticValue= readRoot["staticIP"];

String gatewayValue = readRoot["passerelle"];

String subnetValue = readRoot["subnet"];

Étape 5: Paramètres DHCP

Dans cette étape, nous allons configurer les paramètres DHCP

Sélectionnez les paramètres DHCP dans la page d'index et cliquez sur "Envoyer"

• Vous serez redirigé vers la page suivante. Dans la page suivante, entrez l'adresse IP ou sélectionnez choisir par défaut et cliquez sur le bouton « Envoyer » pour soumettre la réponse. Cette page sera servie à "/dhcp" qui est gérée par la méthode de rappel handleDHCP. Obtenez la valeur des champs de texte à l'aide de la méthode server.arg(). Lorsque vous cliquez dessus, choisissez la case à cocher par défaut. l'IP 192.168.4.1 sera donnée à l'appareil.
• Maintenant, ces valeurs sont sérialisées dans un format JSON.
• Ensuite, nous écrirons le JSON dans SPIFFS.

JsonObject& root =jsonBuffer.createObject();

root["dhcpManual"]="dhcpManual";

racine["dhcpIP"] = "192.168.4.1";

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

if(root.printTo(fileToWrite)){

Serial.println("--Fichier écrit"); }

• Cette configuration est enregistrée dans SPIFFS. Plus tard, ces valeurs sont lues à partir de SPIFFS.
• Les valeurs IP DHCP sont ensuite analysées à partir de JSON.

Fichier 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")){

Chaîne ipdhcpValue= readRoot["dhcpIP"];

Serial.println(ipdhcpValue);

dhcpAPConfig();}

Étape 6: Enregistrement des informations d'identification WiFi

Pour l'instant, nous avons sélectionné la configuration IP. Nous devons maintenant enregistrer les informations d'identification wifi de l'utilisateur. Pour résoudre cette situation. Nous avons suivi cette procédure.

• Nous avons donc maintenant la configuration de notre appareil AP en configuration DHCP ou IP statique que nous avons sélectionnée à partir du portail captif mentionné dans les dernières étapes.
• Disons que nous avons sélectionné la configuration IP statique.
• Nous allons configurer un softAP sur cette IP.
• Après avoir lu les valeurs de SPIFFS et analysé ces valeurs de JSON. Nous allons configurer le softAP à cette IP.
• Convertissez la chaîne IP en octets.

octet 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];

Adresse IP ap_local(ip0, ip1, ip2, ip3);

//******************Parse les octets de la chaîne******************//

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

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

octets = strtoul(str, NULL, base);

str = strchr(str, sep);

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

Pause;

}

str++;

}}

Nous allons maintenant configurer le softAP sur cette IP

Serial.println(WiFi.softAPConfig(ap_localWeb_IP, ap_gate, ap_net) ? "Configuration softAP": "non connecté"); Serial.println(WiFi.softAPIP());

• Démarrez maintenant le serveur Web et servez une page Web à cette adresse IP. Pour saisir les identifiants WiFi de l'utilisateur.
• La page Web se compose de deux champs de texte pour saisir le SSID et le mot de passe.
• handleStaticForm est une méthode de rappel qui sert la page Web.
• server.handleClient() prend en charge la demande et les réponses vers et depuis la page Web.

serveur.begin();

server.on("/", handleStaticForm);

server.onNotFound(handleNotFound);

STimer = millis();

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

server.handleClient(); }

Le formulaire HTML est enregistré dans SPIFFS. nous vérifions les arguments appropriés en utilisant server.arg(). pour obtenir la valeur du SSID et du mot de passe

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

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

fichier.close();

Étape 7: Lire et écrire à partir de SPIFFS

SPIFFS

Serial Peripheral Interface Flash File System, ou SPIFFS en abrégé. C'est un système de fichiers léger pour les microcontrôleurs avec une puce flash SPI. La puce flash intégrée de l'ESP32 a beaucoup d'espace pour vos pages Web. Nous avons également stocké notre page Web dans Flash System. Il y a quelques étapes que nous devons suivre pour télécharger des données vers des spiffs

Téléchargez l'outil de téléchargement de données ESP 32 SPIFFS:

• Dans votre répertoire de carnet de croquis Arduino, créez un répertoire d'outils s'il n'existe pas encore
• Décompressez l'outil dans le répertoire tools (le chemin ressemblera à /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Redémarrer l'IDE Arduino
• Ouvrez un croquis (ou créez-en un nouveau et enregistrez-le)
• Accédez au répertoire d'esquisse (choisissez Esquisse> Afficher le dossier d'esquisse)
• Créez un répertoire nommé data et tous les fichiers que vous voulez dans le système de fichiers. Nous avons téléchargé notre page HTML avec le nom webform.html
• Assurez-vous d'avoir sélectionné une carte, un port et un moniteur série fermé
• Sélectionnez Outils > ESP8266 Téléchargement de données d'esquisse. Cela devrait commencer à télécharger les fichiers dans le système de fichiers flash ESP8266. Une fois terminé, la barre d'état IDE affichera le message SPIFFS Image Uploaded.

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

void handleStatic(){

Fichier fichier = SPIFFS.open("/page_static.html", "r"); server.streamFile(fichier, "text/html"); fichier.close();}

Écrire sur SPIFFS

Ici, nous écrivons le paramètre enregistré dans le SPIFFS afin que les utilisateurs n'aient pas à suivre ces étapes chaque fois que l'appareil se réinitialise.

• Convertir les arguments reçus de la page Web en objets JSON
• Écrivez ce JSON dans le fichier.txt enregistré dans SPIFFS.

Chaîne ipv4static = String(server.arg("ipv4static"));

Passerelle de chaîne = String(server.arg("passerelle")); String subnet = String(server.arg("subnet")); root["statickey"]="staticSet"; root["staticIP"] = ipv4static; root["passerelle"] = passerelle; root["sous-réseau"] = sous-réseau; Chaîne JSONStatic; caractère JSON[120]; root.printTo(Série); root.prettyPrintTo(JSONStatic); JSONStatic.toCharArray(JSON, sizeof(JSONStatic)+2); Fichier fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE); if(!fileToWrite){ Serial.println("Erreur d'ouverture de SPIFFS"); } if(fileToWrite.print(JSON)){ Serial.println("--File Written"); }else{ Serial.println("--Error Writing File"); } fileToWrite.close();

Étape 8: Code général

Le code Over pour HTML et ESP32 se trouve dans ce référentiel Github