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

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

Перевод: Максим Кузьмин (Cubewriter) Контакты:</br>* Skype: cubewriter</br>* E-mail: cubewriter@gmail.com</br>* Максим Кузьмин на freelance.ru
Проверка/Оформление/Редактирование: Мякишев Е.А.


Pixel Art Mini Meow Animated.gif Черновик


Веб-сервер на базе 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.

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

Схема

Pixel Art Mini Meow Animated.gif На данной схеме используется плата 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 }

См.также

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