SENSORS/ACTUATORS

INTERNET OF THING (IoT)

ESP32 - Ethernet

ESP32 - GPIO Interrupt

ESP32 Web Server với Xác Thực Cơ Bản

ESP32 - Web Server với Xác Thực Cơ Bản

Ví dụ này minh họa cách tạo một web server bảo mật với HTTP Basic Authentication trên ESP32 sử dụng thư viện DIYables_ESP32_WebServer.

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	×	USB Cable Type-A to Type-C (for USB-A PC)
1	×	USB Cable Type-C to Type-C (for USB-C PC)
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)

Tính Năng Được Trình Diễn

✅ HTTP Basic Authentication
✅ Bảo vệ tên đăng nhập và mật khẩu
✅ Hộp thoại đăng nhập tích hợp trong trình duyệt
✅ Kiểm soát truy cập bảo mật
✅ Thiết lập xác thực đơn giản
✅ Tương thích ngược (xác thực tùy chọn)

Sơ Đồ Mạch

Không cần kết nối thêm - ví dụ này chỉ sử dụng LED tích hợp và chức năng WiFi của ESP32.

Ví Dụ Code

/* * ESP32 - Simple Web Server with Basic Authentication * * This example demonstrates basic authentication using the DIYables_ESP32_WebServer library. * Adapted from the simple WiFi authentication example structure. * * Hardware: ESP32 * Library: DIYables_ESP32_WebServer (with Basic Authentication support) */ #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; // HTML page content const char* LOGIN_SUCCESS_PAGE = R"( <!DOCTYPE HTML> <html> <head><title>ESP32 Web Server</title></head> <body> <h1>Login Successful!</h1> <p>You are now logged in.</p> <p>Server running with DIYables_ESP32_WebServer library</p> </body> </html> )"; // Main page handler void handleRoot(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { server.sendResponse(client, LOGIN_SUCCESS_PAGE); } void setup() { Serial.begin(9600); delay(1000); String fv = WiFi.firmwareVersion(); if (fv < WIFI_FIRMWARE_LATEST_VERSION) Serial.println("Please upgrade the firmware"); Serial.print("Attempting to connect to SSID: "); Serial.println(WIFI_SSID); // 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ách Hoạt Động

1. Thiết Lập Xác Thực

Ví dụ này kích hoạt HTTP Basic Authentication với:

server.enableAuthentication(www_username, www_password, "ESP32");

2. Bảo Vệ Tự Động

Một khi xác thực được kích hoạt, tất cả các route đều được bảo vệ tự động. Người dùng phải cung cấp thông tin đăng nhập hợp lệ để truy cập bất kỳ trang nào.

3. Tích Hợp Trình Duyệt

Khi người dùng truy cập web server:

Trình duyệt hiển thị hộp thoại đăng nhập
Người dùng nhập tên đăng nhập và mật khẩu
Thành công: Trang tải bình thường
Thất bại: Trang 401 Unauthorized được hiển thị

4. Lưu Trữ Thông Tin Đăng Nhập

Trình duyệt lưu cache thông tin đăng nhập cho phiên làm việc, vì vậy người dùng không cần đăng nhập lại nhiều lần.

Cân Nhắc Về Bảo Mật

✅ Phù Hợp Cho:

Mạng gia đình và môi trường đáng tin cậy
Thiết bị IoT nội bộ
Phát triển và tạo nguyên mẫu
Dự án giáo dục

⚠️ Hạn Chế:

Thông tin đăng nhập được mã hóa Base64, không được mã hóa
Không hỗ trợ HTTPS (hạn chế của nền tảng ESP32)
Chỉ một cặp tên đăng nhập/mật khẩu duy nhất
Không phù hợp cho việc sử dụng sản xuất trên mạng công cộng

🔒 Thực Hành Tốt Nhất:

Thay đổi thông tin đăng nhập mặc định ngay lập tức
Chỉ sử dụng trên mạng đáng tin cậy
Cân nhắc bảo mật mạng bổ sung (VPN, firewall)
Đối với ứng dụng bảo mật cao, thêm các lớp xác thực bổ sung

Kiểm Tra Xác Thực

Upload code lên ESP32 của bạn
Mở Serial Monitor để xem địa chỉ IP
Truy cập địa chỉ IP trong trình duyệt web
Hộp thoại đăng nhập xuất hiện - nhập thông tin đăng nhập:

- Tên đăng nhập: admin

- Mật khẩu: esp32

Trang thành công tải sau khi xác thực

Tùy Chọn Tùy Chỉnh

Thay Đổi Thông Tin Đăng Nhập

const char* www_username = "myuser"; const char* www_password = "mysecretpass";

Realm Tùy Chỉnh

server.enableAuthentication(www_username, www_password, "My Custom Device");

Vô Hiệu Hóa Xác Thực

server.disableAuthentication(); // Make all routes public

Kiểm Tra Trạng Thái Xác Thực

if (server.isAuthenticationEnabled()) { Serial.println("Authentication active"); }

Tương Thích Ngược

Xác thực được vô hiệu hóa theo mặc định, do đó code hiện có tiếp tục hoạt động mà không cần thay đổi. Chỉ kích hoạt xác thực khi cần thiết:

// Cách này hoạt động giống như trước (không có xác thực) DIYables_ESP32_WebServer server; server.addRoute("/", handleRoot); server.begin("WiFi", "Password"); // Thêm dòng này để kích hoạt xác thực server.enableAuthentication("admin", "password123");

Khắc Phục Sự Cố

Trình Duyệt Liên Tục Yêu Cầu Thông Tin Đăng Nhập

Kiểm tra lỗi chính tả trong tên đăng nhập/mật khẩu
Xóa cache/cookies của trình duyệt
Xác minh thông tin đăng nhập khớp chính xác

Không Thể Truy Cập Bất Kỳ Trang Nào

Xác thực bảo vệ TẤT CẢ các route khi được kích hoạt
Sử dụng server.disableAuthentication() để kiểm tra
Kiểm tra đầu ra Serial cho các thông báo xác thực

Xác Thực Không Hoạt Động

Đảm bảo enableAuthentication() được gọi sau server.begin()
Xác minh thông tin đăng nhập trong giới hạn độ dài (tối đa 31 ký tự)
Kiểm tra các ký tự đặc biệt trong mật khẩu