Arduino Mật khẩu máy chủ web

Trong bài hướng dẫn này, chúng ta sẽ học cách tạo một máy chủ web Arduino an toàn, yêu cầu người dùng đăng nhập bằng tên người dùng và mật khẩu. Trước khi truy cập bất kỳ trang web nào được lưu trữ trên Arduino, người dùng sẽ được yêu cầu nhập tên người dùng và mật khẩu của họ.

tên người dùng và mật khẩu cho máy chủ web Arduino

Phần cứng cần chuẩn bị

1	×	Arduino UNO R4 WiFi
1	×	Alternatively, DIYables STEM V4 IoT
1	×	(Tùy chọn) DIYables STEM V4 IoT
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 Block Shield for Arduino UNO R4
1	×	(Khuyến nghị) Breadboard Shield for Arduino UNO R4
1	×	(Khuyến nghị) Enclosure for Arduino UNO R4
1	×	(Khuyến nghị) Power Splitter for Arduino UNO R4
1	×	(Khuyến nghị) Prototyping Base Plate & Breadboard Kit for Arduino UNO

Or you can buy the following kits:

1	×	DIYables STEM V4 IoT Starter Kit (Arduino included)
1	×	DIYables Sensor Kit (30 sensors/displays)
1	×	DIYables Sensor Kit (18 sensors/displays)

Về Arduino và Máy chủ Web

Nếu bạn chưa quen với Arduino 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ể học về chúng thông qua các bài hướng dẫn sau đây.

Mã Arduino - Máy chủ web Tên đăng nhập/Mật khẩu

/* * Mã Arduino này được phát triển bởi newbiely.vn * Mã Arduino 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/arduino/arduino-web-server-password */ #include <UnoR4WiFi_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 = "arduino"; // Create web server instance UnoR4WiFi_WebServer server; // HTML page content const char* LOGIN_SUCCESS_PAGE = R"( <!DOCTYPE HTML> <html> <head><title>Arduino Web Server</title></head> <body> <h1>Login Successful!</h1> <p>You are now logged in.</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, "Arduino"); 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(); }

Hướng dẫn từng bước

Nếu đây là lần đầu tiên bạn sử dụng Arduino Uno R4, hãy xem Cách bắt đầu với Arduino UNO R4.
Kết nối bo mạch Arduino với máy tính của bạn bằng cáp micro USB.
Mở Arduino IDE trên máy tính của bạn.
Chọn bo mạch Arduino đúng và cổng COM.
Mở Library Manager bằng cách nhấp vào biểu tượng Library Manager ở phía bên trái của Arduino IDE.
Tìm kiếm Web Server for Arduino Uno R4 WiFi và tìm thư viện Web Server do DIYables tạo ra.
Nhấp vào nút Install để thêm thư viện Web Server.

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 Tải lên trên Arduino IDE để tải mã lên Arduino.
Mở Serial Monitor.
Xem kết quả trên Serial Monitor.

COM6

Send

Attempting to connect to SSID: YOUR_WIFI_SSID Connected! IP Address: 192.168.0.254 SSID: YOUR_WIFI_SSID IP Address: 192.168.0.254 Signal strength (RSSI): -43 dBm Basic Authentication enabled Realm: Arduino IP Address: 192.168.0.254 Server ready with authentication enabled Username: admin Password: arduino

Autoscroll Show timestamp

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
Gõ địa chỉ IP đó vào thanh địa chỉ của trình duyệt trên điện thoại thông minh hoặc PC của bạn.
Lưu ý rằng 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ười dùng và mật khẩu.

Nhập tên đăng nhập và mật khẩu có trong mã Arduino, trong trường hợp này: admin là tên đăng nhập, arduino 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 trang web Arduino sẽ được hiển thị:

※ Lưu ý:

Bạn có thể điều chỉnh tên đăng nhập và mật khẩu cho trang web của bạn trực tiếp trong mã bằng cách thay đổi các giá trị được gán cho hai biến: www_username và www_password.
Bạn có sự linh hoạt để tùy chỉnh mã này bằng cách thêm HTML, CSS và JavaScript của riêng bạn để thiết kế trang web theo sở thích của bạn.
Lưu ý rằng bên trong chính mã, không có bất kỳ mã HTML nào dành cho biểu mẫu đăng nhập nơi người dùng nhập tên đăng nhập và mật khẩu. Đừng ngạc nhiên về điều này! 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

Phần này cung cấp thông tin 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 có HTML cho biểu mẫu đăng nhập: