ESP32 Web Server Bảo Mật Bằng Mật Khẩu
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo web server trên ESP32 được bảo vệ bằng tên người dùng và mật khẩu để đăng nhập. Trước khi truy cập trang web trên ESP32, người dùng sẽ được yêu cầu nhập tên người dùng/mật khẩu.
Phần Cứng Cần Thiết
| 1 | × | mô-đun phát triển ESP-WROOM-32 | ||
| 1 | × | Alternatively, ESP32 Uno-form board | ||
| 1 | × | Alternatively, ESP32 S3 Uno-form board | ||
| 1 | × | Cáp USB Type-C | ||
| 1 | × | (Khuyến nghị) Screw Terminal Expansion Board for ESP32 | ||
| 1 | × | (Khuyến nghị) Breakout Expansion Board for ESP32 | ||
| 1 | × | (Khuyến nghị) Power Splitter for ESP32 |
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | ||
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | ||
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Về ESP32 và Web Server
Nếu bạn chưa quen thuộc với ESP32 và Web Server (bao gồm sơ đồ chân, cách hoạt động và lập trình), bạn có thể tìm hiểu qua các hướng dẫn sau:
Code ESP32 - Web Server Với Tên Người Dùng/Mật Khẩu
/*
* Mã ESP32 này được phát triển bởi newbiely.vn
* Mã ESP32 này được cung cấp để sử dụng công khai, không có ràng buộc.
* Để xem hướng dẫn chi tiết và sơ đồ kết nối, vui lòng truy cập:
* https://newbiely.vn/tutorials/esp32/esp32-web-server-password
*/
#include <DIYables_ESP32_WebServer.h>
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Authentication credentials
const char* www_username = "admin";
const char* www_password = "esp32";
// Create web server instance
DIYables_ESP32_WebServer server;
// Main page handler
void handleRoot(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, "<html><body><h1>Login Successful!</h1><p>You are now logged in.</p></body></html>");
}
void setup() {
Serial.begin(9600);
delay(1000);
// Configure the main route
server.addRoute("/", handleRoot);
// Start server with WiFi connection (handles connection automatically)
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Enable basic authentication
server.enableAuthentication(www_username, www_password, "Esp32");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
Serial.println("Server ready with authentication enabled");
Serial.print("Username: ");
Serial.println(www_username);
Serial.print("Password: ");
Serial.println(www_password);
}
void loop() {
// Handle all client requests (including authentication)
server.handleClient();
}
Các Bước Nhanh
- Nếu đây là lần đầu tiên bạn sử dụng ESP32, hãy xem ESP32 - Cài Đặt Phần Mềm.
- Kết nối bo mạch ESP32 với PC của bạn qua cáp micro USB
- Mở Arduino IDE trên PC của bạn.
- Chọn đúng bo mạch ESP32 (ví dụ: ESP32 Dev Module) và cổng COM.
- Mở Library Manager bằng cách nhấp vào biểu tượng Library Manager trên thanh điều hướng bên trái của Arduino IDE.
- Tìm kiếm "DIYables ESP32 WebServer", sau đó tìm thư viện Web Server được tạo bởi DIYables.
- Nhấp nút Install để cài đặt thư viện Web Server.
- Sao chép code trên và mở bằng Arduino IDE
- Thay đổi thông tin wifi (SSID và mật khẩu) trong code thành thông tin của bạn
- Nhấp nút Upload trên Arduino IDE để tải code lên ESP32
- Mở Serial Monitor
- Kiểm tra kết quả trên Serial Monitor.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Bạn sẽ thấy một địa chỉ IP trên Serial Monitor, ví dụ: 192.168.0.3
- Nhập địa chỉ IP vào thanh địa chỉ của trình duyệt web trên smartphone hoặc PC của bạn.
- Lưu ý rằng bạn cần thay đổi 192.168.0.3 thành địa chỉ IP mà bạn nhận được trên Serial Monitor.
- Bạn sẽ thấy một trang yêu cầu bạn nhập tên người dùng/mật khẩu.
- Nhập tên người dùng/mật khẩu có trong code ESP32, trong trường hợp này: admin là tên người dùng, esp32 là mật khẩu
- Nếu bạn nhập tên người dùng/mật khẩu chính xác, nội dung web của ESP32 sẽ được hiển thị:
※ Lưu ý:
- Bạn có thể thay đổi tên người dùng/mật khẩu web trong code bằng cách thay đổi giá trị của hai biến: www_username và www_password
- Bạn có thể chỉnh sửa code này để thêm code HTML/CSS/JavaScript cho trang web của mình
- Trong code, không có code HTML cho form đăng nhập (tên người dùng/mật khẩu). Đừng ngạc nhiên! Form đăng nhập được tạo bởi trình duyệt web.
Kiến Thức Nâng Cao
Phần này trình bày kiến thức nâng cao về cách hệ thống tên người dùng/mật khẩu hoạt động mà không cần HTML cho form đăng nhập.
- Ban đầu, khi bạn nhập địa chỉ IP của ESP32 vào trình duyệt web, trình duyệt gửi một yêu cầu HTTP đến ESP32 mà không có thông tin đăng nhập tên người dùng/mật khẩu.
- Khi nhận được yêu cầu này, code ESP32 kiểm tra xem tên người dùng/mật khẩu có được bao gồm hay không. Nếu không có, ESP32 không phản hồi yêu cầu nội dung trang. Thay vào đó, nó phản hồi với một thông điệp HTTP chứa các header hướng dẫn trình duyệt nhắc người dùng nhập tên người dùng/mật khẩu. Đáng chú ý là phản hồi này không chứa code HTML cho form đăng nhập.
- Khi nhận được phản hồi này, trình duyệt web phân tích các header HTTP, nhận ra yêu cầu tên người dùng/mật khẩu của ESP32. Sau đó, trình duyệt tự động tạo một form đăng nhập cho phép người dùng nhập thông tin đăng nhập của họ.
- Người dùng sau đó nhập tên người dùng/mật khẩu của họ vào form.
- Trình duyệt web bao gồm tên người dùng/mật khẩu đã nhập trong một yêu cầu HTTP và gửi nó đến ESP32.
- ESP32 xác minh tên người dùng/mật khẩu được bao gồm trong yêu cầu HTTP. Nếu chính xác, nó trả về nội dung trang được yêu cầu. Nếu không chính xác, nó lặp lại quy trình, nhắc người dùng nhập lại thông tin đăng nhập chính xác.
- Một khi người dùng nhập đúng tên người dùng/mật khẩu lần đầu tiên, các yêu cầu tiếp theo không cần nhập lại tên người dùng/mật khẩu. Điều này là do trình duyệt web tự động lưu thông tin đăng nhập, bao gồm chúng trong các yêu cầu tiếp theo.