ESP32 Captive Portal เพื่อกำหนดการตั้งค่า IP แบบคงที่และ DHCP: 8 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:05

ESP 32 เป็นอุปกรณ์ที่มี WiFi และ BLE ในตัว เป็นประโยชน์สำหรับโครงการ IoT เพียงแค่ให้การกำหนดค่า SSID รหัสผ่านและ IP ของคุณและรวมสิ่งต่าง ๆ เข้ากับคลาวด์ แต่การจัดการการตั้งค่า IP และข้อมูลรับรองผู้ใช้อาจทำให้ผู้ใช้ปวดหัวได้

จะเกิดอะไรขึ้นหากผู้ใช้ต้องการเปลี่ยนข้อมูลรับรอง WiFi

จะเกิดอะไรขึ้นหากผู้ใช้ต้องการเปลี่ยนการตั้งค่า DHCP/Static IP?

การกระพริบ ESP32 ทุกครั้งไม่น่าเชื่อถือและไม่ใช่แม้แต่วิธีแก้ปัญหาเหล่านี้ ที่นี่ในคำแนะนำนี้เราจะสาธิต

• วิธีสร้างพอร์ทัลเชลย
• การโฮสต์เว็บฟอร์มจาก ESP32
• การอ่านและการเขียนจาก SPIFFS ESP32
• การสร้าง Soft Access Point และการเชื่อมต่อกับสถานี

ขั้นตอนที่ 1: ข้อกำหนดฮาร์ดแวร์และซอฟต์แวร์

ข้อกำหนดฮาร์ดแวร์

• ESP32 WiFi/BLE
• เซ็นเซอร์อุณหภูมิและความชื้นแบบไร้สาย

ข้อกำหนดซอฟต์แวร์

Arduino IDE

ขั้นตอนที่ 2: การสร้าง Captive Portal

พอร์ทัลแบบ Captive คือหน้าเว็บที่แสดงต่อผู้ใช้ที่เชื่อมต่อใหม่ t ก่อนที่พวกเขาจะได้รับการเข้าถึงทรัพยากรเครือข่ายที่กว้างขึ้น เราให้บริการหน้าเว็บสามหน้าเพื่อเลือกระหว่างการตั้งค่า DHCP และ IP แบบคงที่ เราสามารถกำหนดที่อยู่ IP ให้กับ ESP ได้สองวิธี

• ที่อยู่ IP DHCP- เป็นวิธีการกำหนดที่อยู่ IP ให้กับอุปกรณ์แบบไดนามิก ที่อยู่ IP เริ่มต้นของ ESP คือ 192.168.4.1
• ที่อยู่ IP แบบคงที่- การกำหนดที่อยู่ IP ถาวรให้กับอุปกรณ์เครือข่ายของเรา เพื่อให้ IP แบบคงที่แก่อุปกรณ์ เราจำเป็นต้องกำหนดที่อยู่ IP ที่อยู่เกตเวย์ และซับเน็ตมาสก์

ในหน้าเว็บแรก ผู้ใช้จะมีปุ่มตัวเลือกให้เลือกระหว่างการตั้งค่า DHCP และ IP แบบคงที่ ในหน้าเว็บถัดไป เราต้องให้ข้อมูลที่เกี่ยวข้องกับ IP เพื่อดำเนินการต่อไป

โค้ด HTML

โค้ด HTML สำหรับหน้าเว็บสามารถพบได้ในที่เก็บ Github นี้

คุณสามารถใช้ IDE หรือโปรแกรมแก้ไขข้อความ เช่น Sublime หรือ notepad++ เพื่อสร้างหน้าเว็บ HTML

• ขั้นแรก สร้างเว็บเพจ HTML ที่มีปุ่มตัวเลือกสองปุ่มเพื่อเลือกระหว่างการตั้งค่า DHCP และ IP แบบคงที่
• ตอนนี้สร้างปุ่มเพื่อส่งคำตอบของคุณ
• ตั้งชื่อปุ่มตัวเลือก คลาสเว็บเซิร์ฟเวอร์ ESP จะใช้ชื่อเหล่านี้เป็นอาร์กิวเมนต์และรับการตอบสนองของปุ่มตัวเลือกโดยใช้อาร์กิวเมนต์เหล่านี้
• ตอนนี้ให้ใส่ปุ่ม ' SUBMIT ' เพื่อส่งการตอบกลับไปยังอุปกรณ์
• ในหน้าเว็บอื่นๆ เรามีกล่องข้อความ ระบุค่าชื่อและประเภทอินพุตให้กับกล่องข้อความและเพิ่มปุ่มส่งไปที่ ' SUBMIT ' ส่งคำตอบ
• สร้างปุ่ม ' RESET ' เพื่อรีเซ็ตเนื้อหาของฟิลด์ข้อความ

// การตั้งค่า DHCP ปุ่มวิทยุ

การตั้งค่า IP แบบคงที่

//ใส่กล่องข้อความ

//ปุ่มส่ง

อินพุต[type="submit"]{ สีพื้นหลัง: #3498DB; /* สีเขียว */ เส้นขอบ: ไม่มี; สี: ขาว; ช่องว่างภายใน:15px 48px; จัดข้อความ: ศูนย์; ตกแต่งข้อความ: ไม่มี; แสดง: บล็อกอินไลน์; ขนาดตัวอักษร: 16px; }

//ปุ่มรีเซ็ต

อินพุต[type="submit"]{ สีพื้นหลัง: #3498DB; /* สีเขียว */ เส้นขอบ: ไม่มี; สี: ขาว; ช่องว่างภายใน:15px 48px; จัดข้อความ: ศูนย์; ตกแต่งข้อความ: ไม่มี; แสดง: บล็อกอินไลน์; ขนาดตัวอักษร: 16px; }

ขั้นตอนที่ 3: รับการตอบสนองทางเว็บจากหน้าเว็บไปยัง ESP32

การแสดงหน้าเว็บจากอุปกรณ์ ESP 32 นั้นสนุกมาก อาจเป็นอะไรก็ได้ตั้งแต่การแสดงข้อมูลอุณหภูมิในหน้าเว็บ การเปลี่ยนไฟ LED จากหน้าเว็บที่กำหนดเอง หรือจัดเก็บข้อมูลรับรอง User WiFi ผ่านหน้าเว็บ เพื่อจุดประสงค์นี้ ESP 32 ใช้ WebServer Class กับหน้าเว็บเซิร์ฟเวอร์

• ขั้นแรก สร้างอินสแตนซ์ของคลาส WebServer ที่พอร์ต 80 (พอร์ต
• ตอนนี้ตั้งค่าอุปกรณ์ ESP เป็น softAP ระบุ SSID และรหัสผ่าน และกำหนด IP แบบคงที่ให้กับอุปกรณ์
• เริ่มต้นเซิร์ฟเวอร์

//**********SSID และ Pass สำหรับ AP ***********/

const char *ssidAP = "ให้ SSID"; const char *passAP = "รหัสผ่าน";

//************ การกำหนดค่า IP แบบคงที่ ***********/IPAddress ap_local_IP(192, 168, 1, 77); IPAddress ap_gateway(192, 168, 1, 254); IPAddress ap_subnet(255, 255, 255, 0);

//**********การกำหนดค่า SoftAP ***********/

WiFi.mode(WIFI_AP);

Serial.println(WiFi.softAP(ssidAP, passAP) ? "การตั้งค่า soft-AP": "ไม่สามารถเชื่อมต่อได้");

ล่าช้า (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "การกำหนดค่า Soft AP": "ข้อผิดพลาดในการกำหนดค่า"); Serial.println(WiFi.softAPIP());

//เริ่มเซิฟเวอร์

เซิร์ฟเวอร์.begin();

• สร้างและให้บริการ URL โดยใช้การเรียกกลับที่แตกต่างกัน
• และจัดการไคลเอ็นต์แบบอะซิงโครนัสโดยใช้ handleClient

server.on("/", handleRoot);

server.on("/dhcp", จัดการ DHCP); server.on("/static", handleStatic); // จัดการกับการตอบสนอง server.handleClient();

• เพื่อเข้าสู่หน้าเว็บ เชื่อมต่อกับ AP ที่คุณเพิ่งสร้างขึ้น ซึ่งอยู่ในเครือข่าย WiFi ของคุณ ไปที่เบราว์เซอร์ ป้อน IP ที่คุณกำหนดค่าในขั้นตอนสุดท้ายและเข้าสู่หน้าเว็บ
• คลาสเว็บเซิร์ฟเวอร์ใช้ชื่อที่กำหนดให้กับอินพุต ('text', 'button', 'radiobutton'etc.) เป็นอาร์กิวเมนต์ มันบันทึกการตอบสนองของอินพุตเหล่านี้เป็นอาร์กิวเมนต์และเราสามารถรับค่าหรือตรวจสอบโดยใช้วิธี args, arg, hasArg

if(server.args()>0){ สำหรับ(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(); } อื่น if(server.arg("ipv4")!= ""){ dhcpSetManual(); }อื่น{ dhcpSetDefault(); }

ขั้นตอนที่ 4: การกำหนดค่า IP แบบคงที่

จนถึงตอนนี้ เราเข้าใจวิธีเชื่อมต่อกับ AP และวิธีรับค่าจากช่องป้อนข้อมูลของหน้าเว็บแล้ว

ในขั้นตอนนี้ เราจะกำหนดค่า Static IP

• เลือกการตั้งค่า IP แบบคงที่และคลิกที่ปุ่มส่ง คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าถัดไป
• ในหน้าถัดไป ให้ป้อนที่อยู่ IP แบบคงที่ ที่อยู่เกตเวย์ และซับเน็ตมาสก์ หน้านี้จะแสดงที่ "/ สแตติก" ซึ่งจัดการโดยวิธีจัดการการโทรกลับแบบคงที่
• รับค่าของฟิลด์ข้อความโดยใช้วิธี server.arg()

สตริง ipv4static = สตริง (server.arg("ipv4static"));

สตริงเกตเวย์ = สตริง (server.arg ("เกตเวย์")); ซับเน็ตสตริง = สตริง (server.arg("ซับเน็ต"));

• ตอนนี้ ค่าเหล่านี้ถูกทำให้เป็นอนุกรมในรูปแบบ JSON
• จากนั้นเราจะเขียน JSON ไปยัง SPIFFS

รูท["statickey"]="staticSet";

รูท["staticIP"] = ipv4static;

รูท["เกตเวย์"] = เกตเวย์;

รูท["subnet"] = ซับเน็ต;

ไฟล์ fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE);

if(root.printTo(fileToWrite))){

Serial.println("--ไฟล์ที่เขียน"); }

• การกำหนดค่านี้ถูกบันทึกใน SPIFFS ภายหลัง ค่าเหล่านี้จะถูกอ่านจาก SPIFFS
• ค่า IP แบบคงที่จะถูกแยกวิเคราะห์จาก JSON

ไฟล์ไฟล์ = SPIFFS.open("/ip_set.txt", "r");

ในขณะที่ (ไฟล์. ใช้ได้ ()) {

debugLogData += ถ่าน (file.read()); }

if(debugLogData.length()>5){

JsonObject& readRoot =jsonBuffer.parseObject(debugLogData);

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

สตริง ipStaticValue= readRoot["staticIP"];

สตริง gatewayValue = readRoot ["เกตเวย์"];

สตริง subnetValue = readRoot["subnet"];

ขั้นตอนที่ 5: การตั้งค่า DHCP

ในขั้นตอนนี้ เราจะกำหนดค่าการตั้งค่า DHCP

เลือกการตั้งค่า DHCP จากหน้าดัชนีและคลิกที่ "ส่ง"

• คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าถัดไป ในหน้าถัดไป ให้ป้อนที่อยู่ IP หรือเลือกเลือกค่าเริ่มต้น แล้วคลิกปุ่ม "ส่ง" เพื่อส่งคำตอบ หน้านี้จะแสดงที่ "/dhcp" ซึ่งจัดการโดยวิธีโทรกลับ handleDHCP รับค่าของฟิลด์ข้อความโดยใช้วิธี server.arg() เมื่อคลิกเลือกช่องทำเครื่องหมายเริ่มต้น 192.168.4.1 IP จะมอบให้กับอุปกรณ์
• ตอนนี้ ค่าเหล่านี้ถูกทำให้เป็นอนุกรมในรูปแบบ JSON
• จากนั้นเราจะเขียน JSON ไปยัง SPIFFS

JsonObject& รูท =jsonBuffer.createObject();

รูท["dhcpManual"]="dhcpManual";

รูท["dhcpIP"] = "192.168.4.1";

ไฟล์ fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE);

if(root.printTo(fileToWrite))){

Serial.println("--ไฟล์ที่เขียน"); }

• การกำหนดค่านี้ถูกบันทึกใน SPIFFS ภายหลัง ค่าเหล่านี้จะถูกอ่านจาก SPIFFS
• ค่า dhcp IP จะถูกแยกวิเคราะห์จาก JSON

ไฟล์ไฟล์ = 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")){

สตริง ipdhcpValue= readRoot["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig();}

ขั้นตอนที่ 6: บันทึกข้อมูลรับรอง WiFi

ตอนนี้เราได้เลือกการกำหนดค่า IP แล้ว ตอนนี้เราต้องบันทึกข้อมูลรับรอง wifi ของผู้ใช้ เพื่อแก้ไขสถานการณ์นี้ เราได้ทำตามขั้นตอนนี้

• ตอนนี้เรามีการตั้งค่า AP ของอุปกรณ์ใน DHCP หรือการกำหนดค่า IP แบบคงที่ ซึ่งเราได้เลือกจากพอร์ทัลแบบ Captive ที่กล่าวถึงในขั้นตอนสุดท้าย
• สมมติว่าเราได้เลือกการกำหนดค่า IP แบบคงที่
• เราจะกำหนดค่า softAP ที่ IP นี้
• หลังจากอ่านค่าจาก SPIFFS และแยกวิเคราะห์ค่าเหล่านี้จาก JSON เราจะกำหนดค่า softAP ที่ IP นี้
• แปลงสตริง 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];

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

//****************** แยกไบต์จากสตริง******************//

ถือเป็นโมฆะ parseBytes (const char* str, char sep, byte* bytes, int maxBytes, int base) {

สำหรับ (int i = 0; i < maxBytes; i++) {

ไบต์ = strtoul(str, NULL, ฐาน);

str = strchr(str, ก.ย.);

ถ้า (str == NULL || *str == '\0') {

หยุดพัก;

}

str++;

}}

ตอนนี้เราจะกำหนดค่า softAP ที่ IP นี้

Serial.println(WiFi.softAPConfig(ap_localWeb_IP, ap_gate, ap_net) ? "การกำหนดค่า softAP": "ไม่ได้เชื่อมต่อ"); Serial.println(WiFi.softAPIP());

• ตอนนี้เริ่มเว็บเซิร์ฟเวอร์และให้บริการเว็บเพจที่ IP นี้ เพื่อป้อนข้อมูลรับรอง WiFi ของผู้ใช้
• หน้าเว็บประกอบด้วยช่องข้อความสองช่องเพื่อป้อน SSID และรหัสผ่าน
• handleStaticForm เป็นวิธีการโทรกลับที่ให้บริการหน้าเว็บ
• server.handleClient() ดูแลคำขอและการตอบกลับไปยังและจากหน้าเว็บ

เซิร์ฟเวอร์.begin();

server.on("/", handleStaticForm);

server.onNotFound(จัดการNotFound);

STimer = มิลลิวินาที ();

ในขณะที่ (มิลลิวินาที () -STimer <= SInterval) {

server.handleClient(); }

แบบฟอร์ม HTML ถูกบันทึกใน SPIFFS เราตรวจสอบอาร์กิวเมนต์ที่เหมาะสมโดยใช้ server.arg() เพื่อรับค่า SSID และรหัสผ่าน

ไฟล์ไฟล์ = SPIFFS.open("/WiFi.html", "r");

server.streamFile(ไฟล์ "ข้อความ/html");

ไฟล์.close();

ขั้นตอนที่ 7: อ่านและเขียนจาก SPIFFS

SPIFFS

Serial Peripheral Interface Flash File System หรือ SPIFFS สำหรับระยะสั้น เป็นระบบไฟล์น้ำหนักเบาสำหรับไมโครคอนโทรลเลอร์ที่มีชิปแฟลช SPI ชิปแฟลชออนบอร์ดของ ESP32 มีพื้นที่มากมายสำหรับหน้าเว็บของคุณ เราได้จัดเก็บหน้าเว็บของเราไว้ในระบบ Flash มีขั้นตอนบางอย่างที่เราต้องปฏิบัติตามเพื่ออัปโหลดข้อมูลไปยัง spiffs

ดาวน์โหลดเครื่องมืออัปโหลดข้อมูล ESP 32 SPIFFS:

• ในไดเร็กทอรี Sketchbook Arduino ของคุณ ให้สร้างไดเร็กทอรี tools หากยังไม่มีอยู่
• แกะเครื่องมือลงในไดเร็กทอรี tools (พาธจะมีลักษณะดังนี้ /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• รีสตาร์ท Arduino IDE
• เปิดสเก็ตช์ (หรือสร้างใหม่แล้วบันทึก)
• ไปที่ไดเร็กทอรีสเก็ตช์ (เลือก Sketch > Show Sketch Folder)
• สร้างไดเร็กทอรีชื่อ data และไฟล์ใดๆ ที่คุณต้องการในระบบไฟล์ที่นั่น เราได้อัปโหลดหน้า HTML ของเราที่มีชื่อ webform.html
• ตรวจสอบให้แน่ใจว่าคุณได้เลือกบอร์ด พอร์ต และปิด Serial Monitor
• เลือกเครื่องมือ > ESP8266 อัปโหลดข้อมูลร่าง สิ่งนี้ควรเริ่มอัปโหลดไฟล์ไปยังระบบไฟล์แฟลช ESP8266 เมื่อเสร็จแล้ว แถบสถานะ IDE จะแสดงข้อความ SPIFFS Image Uploaded

โมฆะ handleDHCP(){ ไฟล์ = SPIFFS.open("/page_dhcp.html", "r"); server.streamFile(ไฟล์ "ข้อความ/html"); ไฟล์.close();}

โมฆะจัดการคงที่ (){

ไฟล์ไฟล์ = SPIFFS.open("/page_static.html", "r"); server.streamFile(ไฟล์ "ข้อความ/html"); ไฟล์.close();}

กำลังเขียนถึง SPIFFS

เรากำลังเขียนการตั้งค่าที่บันทึกไว้ใน SPIFFS เพื่อให้ผู้ใช้ไม่ต้องทำตามขั้นตอนเหล่านี้ทุกครั้งที่อุปกรณ์รีเซ็ต

• แปลงอาร์กิวเมนต์ที่ได้รับจากหน้าเว็บเป็นวัตถุ JSON
• เขียน JSON นี้ไปยังไฟล์.txt ที่บันทึกไว้ใน SPIFFS

สตริง ipv4static = สตริง (server.arg("ipv4static"));

สตริงเกตเวย์ = สตริง (server.arg ("เกตเวย์")); ซับเน็ตสตริง = สตริง (server.arg("ซับเน็ต")); รูท["statickey"]="staticSet"; รูท["staticIP"] = ipv4static; รูท["เกตเวย์"] = เกตเวย์; รูท["ซับเน็ต"] = ซับเน็ต; สตริง JSONStatic; ถ่าน JSON[120]; root.printTo(ซีเรียล); root.prettyPrintTo(JSONStatic); JSONStatic.toCharArray(JSON, sizeof(JSONStatic)+2); ไฟล์ fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE); if(!fileToWrite){ Serial.println("เกิดข้อผิดพลาดในการเปิด SPIFFS"); } if (fileToWrite.print (JSON))) { Serial.println ("-- ไฟล์ที่เขียน"); }อื่น{ Serial.println("--ข้อผิดพลาดในการเขียนไฟล์"); } fileToWrite.close();

ขั้นตอนที่ 8: รหัสโดยรวม

โค้ด Over สำหรับ HTML และ ESP32 สามารถพบได้ใน Github Repository