Cat hungry.png
Здравствуйте! Собираем деньги на перевод материалов по электронике(https://www.allaboutcircuits.com/education/). Реквизиты указаны здесь.

ESP32:Примеры/Веб-сервер на базе ESP32: защита паролем

Материал из Онлайн справочника
Перейти к: навигация, поиск

Перевод: Максим Кузьмин (Cubewriter)
Перевел 2749 статей для сайта.

Контакты:

Проверка/Оформление/Редактирование: Мякишев Е.А.


Ambox content.png Черновик


Веб-сервер на базе ESP32: защита паролем

Некоторым проектам, где ESP32 используется в качестве веб-сервера, может требоваться защита паролем. После внедрения в код данного функционала, кто попытается получить доступ к вашему веб-серверу, нужно будет ввести правильные имя пользователя и пароль.

Код защищает веб-сервер с помощью имени пользователя и пароля. По умолчанию именем пользователя является «user», а паролем – «pass», но их очень легко поменять (см. ниже).

Код функции защиты

Ниже – несколько новых строчек, добавляющих в код функцию защиты с помощью имени пользователя и пароля:

  1. // проверяем правильность заголовка;
  2. // dXNlcjpwYXNz = 'user:pass' в кодировке base64;
  3. // ищем строчку с корректными учетными данными,
  4. // а затем загружаем веб-страницу:
  5. if(header.indexOf("dXNlcjpwYXNz") >= 0) {
  6.  // здесь код для веб-страницы сервера:
  7. }

В результате, если ввести корректные учетные данные, веб-сервер загрузит свою страницу. Но если ввести неправильные учетные данные, он напишет в браузере сообщение «Authentication failed» («Ошибка аутентификации»).

  1.             // неправильное имя пользователя или пароль,
  2.             // поэтому отклоняем HTTP-запрос...
  3.             else {            
  4.               client.println("HTTP/1.1 401 Unauthorized");
  5.               client.println("WWW-Authenticate: Basic realm=\"Secure\"");
  6.               client.println("Content-Type: text/html");
  7.               client.println();
  8.               client.println("<html>Authentication failed</html>");
  9.                                //  "Ошибка аутентификации"

Кодирование имени пользователя и пароля

Если вы загрузите этот скетч в его текущем состоянии на ESP32, именем пользователя будет «user», а паролем – «pass». Но вы наверняка захотите их поменять.

Зайдите на этот сайт: https://www.base64encode.org. В самом верхнем поле впишите следующее:

ваше_имя_пользователя:ваш_пароль

Опять же, в нашем случае, имя пользователя – это «user», а пароль – «pass»:

user:pass

Примечание: Не забудьте поместить двоеточие (:) между именем пользователя и паролем.

Затем нажмите на зеленую кнопку «Encode» под этим полем, чтобы получить строку в кодировке base64. В моем случае это «dXNlcjpwYXNz». Скопируйте ее и вставьте в эту строчку скетча:

if(header.indexOf("dXNlcjpwYXNz") >= 0) {

Добавив строку в кодировке base64, SSID и пароль, загрузите скетч на ESP32.

Тестирование веб-сервера

Теперь, когда вы попытаетесь получить доступ к IP-адресу ESP32, вас попросят ввести имя пользователя и пароль. Введите их и нажмите на «Log in»:

Esp32 simple secure web server 1.PNG

Если учетные данные верны, ESP32 загрузит веб-страницу:

Esp32 simple secure web server 2.PNG

Если учетные данные неверны, вы увидите сообщение об ошибке:

Esp32 simple secure web server 3.PNG

Итак, в этом примере мы научились защищать паролем веб-сервер на базе ESP32. Такую защиту можно добавить к любому веб-серверу на базе ESP32.

Необходимое оборудование

Схема

Ambox content.png На данной схеме используется плата ESP32S-HiLetgo, если вы используете другую, сверьтесь с вашей распиновкой.


Esp32 web server 2 leds exmp 1.PNG.png

Код

  1. /*********
  2.   Руи Сантос
  3.   Более подробно о проекте читайте на http://randomnerdtutorials.com  
  4. *********/
  5.  
  6. // подключаем библиотеку для WiFi-связи:
  7. #include <WiFi.h>
  8.  
  9. // здесь пишем учетные данные своей сети:
  10. const char* ssid     = "REPLACE_WITH_YOUR_SSID";
  11. const char* password = "REPLACE_WITH_YOUR_PASSWORD";
  12.  
  13. // задаем номер порта для веб-сервера («80»):
  14. WiFiServer server(80);
  15.  
  16. // переменная для хранения HTTP-запроса:
  17. String header;
  18.  
  19. // вспомогательные переменные
  20. // для хранения текущего состояния выходных контактов:
  21. String output26State = "off";
  22. String output27State = "off";
  23.  
  24. // задаем номера для выходных GPIO-контактов:
  25. const int output26 = 26;
  26. const int output27 = 27;
  27.  
  28. void setup() {
  29.   Serial.begin(115200);
  30.   // делаем эти GPIO-контакты выходными:
  31.   pinMode(output26, OUTPUT);
  32.   pinMode(output27, OUTPUT);
  33.   // присваиваем им значение «LOW»:
  34.   digitalWrite(output26, LOW);
  35.   digitalWrite(output27, LOW);
  36.  
  37.   // подключаемся к WiFi-сети при помощи заданных выше SSID и пароля:
  38.   Serial.print("Connecting to ");
  39.            //  "Подключаемся к "
  40.   Serial.println(ssid);
  41.   WiFi.begin(ssid, password);
  42.   while (WiFi.status() != WL_CONNECTED) {
  43.     delay(500);
  44.     Serial.print(".");
  45.   }
  46.   // печатаем в мониторе порта локальный IP-адрес
  47.   // и запускаем веб-сервер:
  48.   Serial.println("");
  49.   Serial.println("WiFi connected.");  //  "WiFi подключен."
  50.   Serial.println("IP address: ");  //  "IP-адрес: "
  51.   Serial.println(WiFi.localIP());
  52.   server.begin();
  53. }
  54.  
  55. void loop(){
  56.   // начинаем прослушивать входящих клиентов:
  57.   WiFiClient client = server.available();
  58.  
  59.   if (client) {                     // если подключился новый клиент,    
  60.     Serial.println("New Client.");  // печатаем сообщение
  61.                                     // «Новый клиент.»
  62.                                     // в мониторе порта;
  63.     String currentLine = "";        // создаем строку для хранения
  64.                                     // входящих данных от клиента;
  65.     while (client.connected()) {    // цикл while() будет работать
  66.                                     // все то время, пока клиент
  67.                                     // будет подключен к серверу;
  68.       if (client.available()) {     // если у клиента есть данные,
  69.                                     // которые можно прочесть,
  70.         char c = client.read();     // считываем байт, а затем                
  71.         Serial.write(c);            // печатаем его в мониторе порта
  72.         header += c;
  73.         if (c == '\n') {            // если этим байтом является
  74.                                     // символ новой строки
  75.  
  76.           // если мы получим два символа новой строки подряд
  77.           // то это значит, что текущая строчка пуста;
  78.           // это конец HTTP-запроса клиента,
  79.           // а значит – пора отправлять ответ:
  80.           if (currentLine.length() == 0) {
  81.             // проверяем правильность заголовка;
  82.             // dXNlcjpwYXNz = 'user:pass' в кодировке base64;
  83.             // ищем строчку с корректными учетными данными,
  84.             // а затем загружаем веб-страницу:
  85.             if(header.indexOf("dXNlcjpwYXNz") >= 0) {
  86.               // HTTP-заголовки всегда начинаются
  87.               // с кода ответа (например, «HTTP/1.1 200 OK»)
  88.               // и информации о типе контента
  89.               // (чтобы клиент понимал, что получает);
  90.               // в конце пишем пустую строчку:
  91.               client.println("HTTP/1.1 200 OK");
  92.               client.println("Content-type:text/html");
  93.               client.println("Connection: close");
  94.                          //  "Соединение: отключено"
  95.               client.println();
  96.              
  97.               // с помощью этого кода
  98.               // включаем и выключаем GPIO-контакты:
  99.               if (header.indexOf("GET /26/on") >= 0) {
  100.                 Serial.println("GPIO 26 on");  //  "GPIO26 включен"
  101.                 output26State = "on";
  102.                 digitalWrite(output26, HIGH);
  103.               } else if (header.indexOf("GET /26/off") >= 0) {
  104.                 Serial.println("GPIO 26 off");  //  "GPIO26 выключен"
  105.                 output26State = "off";
  106.                 digitalWrite(output26, LOW);
  107.               } else if (header.indexOf("GET /27/on") >= 0) {
  108.                 Serial.println("GPIO 27 on");  //  "GPIO27 включен"
  109.                 output27State = "on";
  110.                 digitalWrite(output27, HIGH);
  111.               } else if (header.indexOf("GET /27/off") >= 0) {
  112.                 Serial.println("GPIO 27 off");  //  "GPIO27 выключен"
  113.                 output27State = "off";
  114.                 digitalWrite(output27, LOW);
  115.               }
  116.              
  117.               // показываем веб-страницу с помощью этого HTML-кода:
  118.               client.println("<!DOCTYPE html><html>");
  119.               client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
  120.               client.println("<link rel=\"icon\" href=\"data:,\">");
  121.               // с помощью CSS задаем стиль кнопок «ON» и «OFF»;
  122.               // если есть желание, можно поэкспериментировать
  123.               // с фоновым цветом и атрибутами размера шрифта:
  124.               client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
  125.               client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
  126.               client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
  127.               client.println(".button2 {background-color: #555555;}</style></head>");
  128.              
  129.               // заголовок веб-страницы:
  130.               client.println("<body><h1>ESP32 Web Server</h1>");
  131.              
  132.               // рисуем кнопку для контакта GPIO26
  133.               // и показываем его текущее состояние (ON/OFF):
  134.               client.println("<p>GPIO 26 - State " + output26State + "</p>");
  135.               // если на контакте «output26State» значение «off»,
  136.               // показываем кнопку «ON»:
  137.               if (output26State=="off") {
  138.                 client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
  139.               } else {
  140.                 client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
  141.               }
  142.                  
  143.               // рисуем кнопку для контакта GPIO27
  144.               // и показываем его текущее состояние (ON/OFF):
  145.               client.println("<p>GPIO 27 - State " + output27State + "</p>");
  146.               // если на контакте «output27State» значение «off»,
  147.               // показываем кнопку «ON»:
  148.               if (output27State=="off") {
  149.                 client.println("<p><a href=\"/27/on\"><button class=\"button\">ON</button></a></p>");
  150.               } else {
  151.                 client.println("<p><a href=\"/27/off\"><button class=\"button button2\">OFF</button></a></p>");
  152.               }
  153.               client.println("</body></html>");
  154.              
  155.               // конец HTTP-ответа задается
  156.               // с помощью дополнительной пустой строки:
  157.               client.println();
  158.               // выходим из цикла while():
  159.               break;
  160.             }
  161.             // неправильное имя пользователя или пароль,
  162.             // поэтому отклоняем HTTP-запрос...
  163.             else {            
  164.               client.println("HTTP/1.1 401 Unauthorized");
  165.               client.println("WWW-Authenticate: Basic realm=\"Secure\"");
  166.               client.println("Content-Type: text/html");
  167.               client.println();
  168.               client.println("<html>Authentication failed</html>");
  169.                                //  "Ошибка аутентификации"
  170.             }  
  171.           } else { // если получили символ новой строки,
  172.                    // очищаем переменную «currentLine»
  173.             currentLine = "";
  174.           }
  175.         } else if (c != '\r') {  // если получили любые данные,
  176.                                  // кроме символа возврата каретки,
  177.           currentLine += c;      // добавляем эти данные
  178.                                  // в конец строки «currentLine»
  179.         }
  180.       }
  181.     }
  182.     // очищаем переменную «header»:
  183.     header = "";
  184.     // отключаем соединение:
  185.     client.stop();
  186.     Serial.println("Client disconnected.");
  187.                //  "Соединение отключено."
  188.     Serial.println("");
  189.   }
  190. }

См.также

Внешние ссылки