ESP8266 Mật khẩu cho Máy chủ Web
Hướng dẫn này cho bạn biết cách tạo một máy chủ web ESP8266 an toàn yêu cầu người dùng nhập tên đăng nhập và mật khẩu để truy cập. Trước khi xem bất kỳ trang web nào được lưu trên ESP8266, người dùng sẽ cần nhập tên đăng nhập và mật khẩu.
Phần cứng cần chuẩn bị
| 1 | × | ESP8266 NodeMCU ESP-12E | ||
| 1 | × | Recommended: ESP8266 NodeMCU ESP-12E (Uno-form) | ||
| 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 ESP8266 | ||
| 1 | × | (Khuyến nghị) Power Splitter for ESP8266 Type-C |
Or you can buy the following kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | ||
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Về ESP8266 và Máy chủ Web
Nếu bạn chưa quen với ESP8266 và Máy chủ Web (bao gồm sơ đồ chân, cách hoạt động và lập trình), bạn có thể tìm hiểu về chúng thông qua các bài hướng dẫn sau:
Mã ESP8266 - Máy chủ web Tên đăng nhập/Mật khẩu
/*
* Mã ESP8266 NodeMCU này được phát triển bởi newbiely.vn
* Mã ESP8266 NodeMCU 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/esp8266/esp8266-web-server-password
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80);
const char* www_username = "admin";
const char* www_password = "esp8266";
void handleRoot() {
if (!server.authenticate(www_username, www_password)) {
return server.requestAuthentication();
}
// send your web content here. The below is simplest form.
server.send(200, "text/html", "<html><body><h1>Login Successful!</h1><p>You are now logged in.</p></body></html>");
}
void handleNotFound() {
server.send(404, "text/plain", "Not found");
}
void setup() {
Serial.begin(9600);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
server.on("/", HTTP_GET, handleRoot);
server.onNotFound(handleNotFound);
server.begin();
// Print the ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
Hướng dẫn từng bước
Để bắt đầu với ESP8266 trên Arduino IDE, hãy làm theo các bước sau:
- Xem hướng dẫn ESP8266 - Cài đặt phần mềm nếu đây là lần đầu bạn sử dụng ESP8266.
- Kết nối các linh kiện như được hiển thị trong sơ đồ.
- Kết nối bo mạch ESP8266 với máy tính bằng cáp USB.
- Mở Arduino IDE trên máy tính của bạn.
- Chọn bo mạch ESP8266 phù hợp, chẳng hạn như (ví dụ NodeMCU 1.0 (ESP-12E Module)), và cổng COM tương ứng của nó.
- Sao chép mã ở trên và mở bằng Arduino IDE.
- Thay đổi thông tin WiFi (SSID và mật khẩu) trong mã cho phù hợp với mạng của bạn.
- Nhấn nút Upload trên Arduino IDE để tải mã lên ESP8266.
- Mở Serial Monitor.
- Xem kết quả trên Serial Monitor.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 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 điện thoại thông minh hoặc PC của bạn.
- Xin lưu ý bạn cần đổi 192.168.0.3 thành địa chỉ IP 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 nhập và mật khẩu.
- Nhập tên đăng nhập và mật khẩu có trong mã ESP8266; trong trường hợp này: admin là tên đăng nhập, esp8266 là mật khẩu
- Nếu bạn nhập đúng tên đăng nhập và mật khẩu, nội dung web của ESP8266 sẽ được hiển thị:
※ Lưu ý:
- Bạn có thể sửa đổi tên người dùng và mật khẩu cho trang web của bạn trực tiếp trong mã bằng cách thay đổi giá trị được gán cho hai biến: www_username và www_password.
- Bạn có tự do cá nhân hóa mã này bằng cách tích hợp HTML, CSS và JavaScript của riêng bạn để thiết kế trang web theo ý muốn.
- Điều đáng chú ý là trong mã này không có bất kỳ mã HTML cụ thể nào cho biểu mẫu đăng nhập nơi người dùng nhập tên người dùng và mật khẩu. Điều này có thể gây bất ngờ, nhưng thay vào đó, biểu mẫu đăng nhập được trình duyệt web tạo động khi cần thiết.
Kiến thức nâng cao
Đoạn này cung cấp một giải thích chi tiết về cách hệ thống tên đăng nhập và mật khẩu hoạt động mà không dùng HTML cho biểu mẫu đăng nhập:
- Khi bạn nhập địa chỉ IP của ESP8266 vào trình duyệt lần đầu tiên, trình duyệt sẽ gửi một yêu cầu đến ESP8266 qua HTTP, nhưng không kèm thông tin tên người dùng và mật khẩu.
- Nhận được yêu cầu này, mã của ESP8266 sẽ kiểm tra xem có bất kỳ thông tin đăng nhập tên người dùng và mật khẩu nào được cung cấp hay không. Nếu không có, ESP8266 sẽ không trả lời bằng nội dung của trang. Thay vào đó, nó gửi lại một thông điệp HTTP chứa các header chỉ dẫn trình duyệt yêu cầu tên người dùng và mật khẩu của người dùng. Đáng chú ý, phản hồi này không chứa mã HTML cho biểu mẫu đăng nhập.
- Khi trình duyệt nhận được phản hồi này, nó diễn giải các header HTTP và hiểu rằng ESP8266 đang yêu cầu tên người dùng và mật khẩu. Do đó, trình duyệt sẽ tự động tạo một biểu mẫu đăng nhập để người dùng nhập thông tin của họ.
- Người dùng sau đó nhập tên người dùng và mật khẩu vào biểu mẫu này.
- Trình duyệt sẽ đưa tên người dùng và mật khẩu đã nhập vào một yêu cầu HTTP và chuyển tiếp nó trở lại ESP8266.
- ESP8266 xác minh tên người dùng và mật khẩu được cung cấp trong yêu cầu HTTP. Nếu đúng, nó cung cấp nội dung của trang được yêu cầu. Nếu sai, quá trình lặp lại, yêu cầu người dùng nhập đúng thông tin xác thực một lần nữa.
- Khi người dùng nhập đúng tên người dùng và mật khẩu lần đầu tiên, các yêu cầu sau sẽ không yêu cầu họ nhập lại. Điều này bởi vì trình duyệt tự động lưu thông tin xác thực và bao gồm chúng trong các yêu cầu tiếp theo.