Портал авторизации ESP32 для настройки статических IP-адресов и настроек DHCP: 8 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:51

ESP 32 - это устройство со встроенным Wi-Fi и BLE. Это своего рода благо для проектов Интернета вещей. Просто укажите свой SSID, пароль и конфигурации IP и интегрируйте все в облако. Но управление настройками IP и учетными данными пользователя может быть головной болью для пользователя.

Что делать, если пользователь хочет изменить учетные данные WiFi?

Что делать, если пользователь хочет переключить настройки DHCP / статического IP?

Постоянная перепрошивка ESP32 ненадежна и даже не является решением этих проблем. Здесь, в этом руководстве, мы собираемся продемонстрировать.

• Как создать захватывающий портал.
• Размещение веб-формы из ESP32.
• Чтение и запись из SPIFFS ESP32.
• Создание Soft Access Point и подключение к станции

Шаг 1. Спецификация оборудования и программного обеспечения

Спецификация оборудования

• ESP32 WiFi / BLE
• Беспроводной датчик температуры и влажности

Спецификация программного обеспечения

IDE Arduino

Шаг 2: Создание адаптивного портала

Адаптивный портал - это веб-страница, которая отображается для новых подключенных пользователей 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 примет эти имена в качестве аргументов и получит ответ переключателей, используя эти аргументы.
• Теперь вставьте кнопку «ОТПРАВИТЬ», чтобы отправить ответ устройству.
• На других веб-страницах у нас есть текстовые поля. Укажите значение имени и тип ввода в текстовое поле и добавьте кнопку отправки для отправки ответа «ОТПРАВИТЬ».
• Создайте кнопку «СБРОС», чтобы сбросить содержимое текстового поля.

// Настройка DHCP для радиокнопки

Настройка статического IP-адреса

// Ввод текстовых полей

// Кнопка отправки

input [type = "submit"] {background-color: # 3498DB; / * Зеленый * / граница: нет; цвет белый; отступ: 15 пикселей 48 пикселей; выравнивание текста: центр; текстовое оформление: нет; дисплей: встроенный блок; размер шрифта: 16 пикселей; }

//Кнопка сброса

input [type = "submit"] {background-color: # 3498DB; / * Зеленый * / граница: нет; цвет белый; отступ: 15 пикселей 48 пикселей; выравнивание текста: центр; текстовое оформление: нет; дисплей: встроенный блок; размер шрифта: 16 пикселей; }

Шаг 3. Получение веб-ответа с веб-страниц на ESP32

Обслуживание веб-страниц с устройства ESP 32 - большое удовольствие. Это может быть что угодно: от отображения данных о температуре на веб-странице, включения светодиодов на настраиваемой веб-странице или сохранения учетных данных пользователя WiFi через веб-страницу. Для этой цели ESP 32 использует класс WebServer для сервера веб-страниц.

• Сначала создайте экземпляр класса WebServer на порту 80 (порт
• Теперь настройте устройство ESP как softAP. Укажите SSID и ключ доступа, а также назначьте устройству статический IP-адрес.
• Запустите сервер.

// ********* SSID и пропуск для AP ************** /

const char * ssidAP = "дать SSID"; const char * passAP = "ключ доступа";

// ********* Конфигурация статического IP-адреса ************** / IP-адрес ap_local_IP (192, 168, 1, 77); IP-адрес ap_gateway (192, 168, 1, 254); IP-адрес ap_subnet (255, 255, 255, 0);

// ********* Конфигурация SoftAP ************** /

WiFi.mode (WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP)? «Настройка программной точки доступа»: «Не удалось подключиться»);

задержка (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? «Настройка программной точки доступа»: «Ошибка в конфигурации»); Serial.println (WiFi.softAPIP ());

// запускаем сервер

server.begin ();

• Создайте и обслуживайте URL-адрес, используя разные обратные вызовы.
• и обрабатывать клиента асинхронно с помощью handleClient.

server.on ("/", handleRoot);

server.on ("/ dhcp", handleDHCP); server.on ("/ static", handleStatic); // обрабатываем ответы server.handleClient ();

• Для доступа к веб-страницам. Подключитесь к только что созданной точке доступа, указанной в ваших сетях Wi-Fi. Теперь перейдите в браузер, введите IP-адрес, настроенный вами на последнем шаге, и перейдите на веб-страницу.
• Класс веб-сервера принимает в качестве аргументов имя, присвоенное входным параметрам («текст», «кнопка», «радиокнопка» и т. Д.). Он сохраняет ответы этих входов в качестве аргументов, и мы можем получить значения или проверить их с помощью методов 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)));

}

если (server.hasArg ("ipv4static") && server.hasArg ("шлюз") && server.hasArg ("подсеть")) {staticSet (); } иначе, если (server.arg ("ipv4")! = "") {dhcpSetManual (); } еще {dhcpSetDefault (); }

Шаг 4: Конфигурация статического IP-адреса

Пока мы поняли, как подключиться к AP и как получить значения из полей ввода веб-страницы

На этом этапе мы настроим статический IP-адрес.

• Выберите параметр «Статический IP-адрес» и нажмите кнопку «Отправить». Вы будете перенаправлены на следующую страницу.
• На следующей странице введите статический IP-адрес, адрес шлюза и маску подсети, эта страница будет обслуживаться по адресу «/ static», который обрабатывается методом статического обратного вызова handle.
• Получите значение текстовых полей с помощью метода server.arg ().

Строка ipv4static = Строка (server.arg ("ipv4static"));

Строка шлюз = Строка (server.arg («шлюз»)); Строка подсеть = Строка (server.arg («подсеть»));

• Теперь эти значения сериализованы в формат JSON.
• Затем мы запишем JSON в SPIFFS.

корень ["statickey"] = "staticSet";

корень ["staticIP"] = ipv4static;

корень ["шлюз"] = шлюз;

корень ["подсеть"] = подсеть;

Файл fileToWrite = SPIFFS.open ("/ ip_set.txt", FILE_WRITE);

if (root.printTo (fileToWrite)) {

Serial.println ("- Файл записан"); }

• Эта конфигурация сохраняется в SPIFFS. Позже эти значения считываются из SPIFFS.
• Затем статические значения IP анализируются из JSON.

Файл 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 ("statickey")) {

Строка ipStaticValue = readRoot ["staticIP"];

Строка gatewayValue = readRoot ["шлюз"];

Строка subnetValue = readRoot ["подсеть"];

Шаг 5: настройки DHCP

На этом этапе мы настроим параметры DHCP.

Выберите настройки DHCP на странице индекса и нажмите «Отправить»

• Вы будете перенаправлены на следующую страницу. На следующей странице введите IP-адрес или выберите вариант по умолчанию и нажмите кнопку «Отправить», чтобы отправить ответ. Эта страница будет обслуживаться по адресу "/ dhcp", который обрабатывается методом обратного вызова handleDHCP. Получите значение текстовых полей с помощью метода server.arg (). При нажатии установите флажок по умолчанию. IP-адрес 192.168.4.1 будет предоставлен устройству.
• Теперь эти значения сериализованы в формат JSON.
• Затем мы запишем JSON в SPIFFS.

JsonObject & root = 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.
• Затем значения IP DHCP анализируются из JSON.

Файл file = SPIFFS.open ("/ ip_set.txt", "r"); while (file.available ()) {debugLogData + = char (file.read ()); } если (debugLogData.length ()> 5) {JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

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

Строка ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

Шаг 6: Сохранение учетных данных WiFi

На данный момент мы выбрали конфигурацию IP. Теперь нам нужно сохранить учетные данные Wi-Fi пользователя. Чтобы разрешить эту ситуацию. Мы следовали этой процедуре.

• Итак, теперь у нас есть настройка AP для нашего устройства в конфигурации DHCP или статического IP, которую мы выбрали из адаптивного портала, упомянутого в последних шагах.
• Допустим, мы выбрали конфигурацию статического IP.
• Мы настроим softAP на этом IP.
• После чтения значений из SPIFFS и анализа этих значений из JSON. Мы настроим softAP на этом IP.
• Преобразуйте строку 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];

IP-адрес ap_local (ip0, ip1, ip2, ip3);

// *************** Разобрать байты из строки ****************** //

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

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

bytes [я] = strtoul (строка, NULL, база);

стр = стрчр (стр, сеп);

if (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 () заботится о запросах и ответах на веб-страницу и от нее.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = миллис ();

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

server.handleClient (); }

HTML-форма сохраняется в SPIFFS. мы проверяем подходящие аргументы с помощью server.arg (). чтобы получить значение SSID и пароля

Файл file = SPIFFS.open ("/ WiFi.html", "r");

server.streamFile (файл, «текст / HTML»);

file.close ();

Шаг 7: чтение и запись из SPIFFS

СПИФЫ

Флэш-файловая система с последовательным периферийным интерфейсом, сокращенно SPIFFS. Это легкая файловая система для микроконтроллеров с микросхемой флэш-памяти SPI. На встроенном флеш-чипе ESP32 достаточно места для ваших веб-страниц. Мы также сохранили нашу веб-страницу в системе Flash. Чтобы загрузить данные в spiffs, нам нужно выполнить несколько шагов.

Загрузите инструмент загрузки данных ESP 32 SPIFFS:

• В каталоге альбомов Arduino создайте каталог инструментов, если он еще не существует.
• Распакуйте инструмент в каталог инструментов (путь будет выглядеть как /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Перезагрузите Arduino IDE.
• Откройте эскиз (или создайте новый и сохраните его)
• Перейдите в каталог эскиза (выберите «Скетч»> «Показать папку эскиза»).
• Создайте каталог с именем data и любые файлы, которые вы хотите в файловой системе. Мы загрузили нашу HTML-страницу с именем webform.html
• Убедитесь, что вы выбрали плату, порт и закрыли Serial Monitor.
• Выберите Инструменты> ESP8266 Sketch Data Upload. Это должно начать загрузку файлов в файловую систему флэш-памяти ESP8266. Когда это будет сделано, в строке состояния IDE отобразится сообщение SPIFFS Image Uploaded.

void handleDHCP () {Файл файл = SPIFFS.open ("/ page_dhcp.html", "r"); server.streamFile (файл, «текст / HTML»); file.close ();}

void handleStatic () {

Файл file = SPIFFS.open ("/ page_static.html", "r"); server.streamFile (файл, «текст / HTML»); file.close ();}

Запись в SPIFFS

Здесь мы записываем сохраненные настройки в SPIFFS, чтобы пользователям не приходилось выполнять эти шаги при перезапуске устройства.

• Преобразуйте аргументы, полученные с веб-страницы, в объекты JSON
• Запишите этот JSON в файл.txt, сохраненный в SPIFFS.

Строка ipv4static = Строка (server.arg ("ipv4static"));

Строка шлюз = Строка (server.arg («шлюз»)); Строка подсеть = Строка (server.arg («подсеть»)); корень ["statickey"] = "staticSet"; корень ["staticIP"] = ipv4static; корень ["шлюз"] = шлюз; корень ["подсеть"] = подсеть; String JSONStatic; char 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 ("- Файл записан"); } else {Serial.println ("- Ошибка записи файла"); } fileToWrite.close ();

Шаг 8: Общий код

Код Over для HTML и ESP32 можно найти в этом репозитории Github.