아두이노 나노 ESP32 - 웹 서버 비밀번호 | Arduino Nano ESP32 - Web Server Password
이 가이드에서는 로그인을 위한 사용자 이름과 비밀번호 보호 기능이 있는 Arduino Nano ESP32 웹 서버를 만드는 방법을 배워보겠습니다. ESP32에서 어떤 웹 페이지에도 접근하기 전에 사용자들은 자신의 사용자 이름과 비밀번호를 입력하라는 요청을 받게 될 것입니다.
준비물
| 1 | × | Arduino Nano ESP32 | Amazon | |
| 1 | × | USB Cable Type-C | 쿠팡 | Amazon | |
| 1 | × | (Recommended) Screw Terminal Expansion Board for Arduino Nano | 쿠팡 | Amazon |
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.
아두이노 나노 ESP32 및 웹 서버에 관하여
아두이노 나노 ESP32와 웹 서버(핀 아웃, 작동 방식 및 프로그래밍 포함)에 익숙하지 않다면 다음 튜토리얼을 통해 배울 수 있습니다:
아두이노 나노 ESP32 코드 - 웹 서버 사용자명/비밀번호
/*
* 이 Arduino Nano ESP32 코드는 newbiely.kr 에서 개발되었습니다
* 이 Arduino Nano ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server-password
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
// Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
const char* www_username = "admin";
const char* www_password = "esp32";
void handleRoot(AsyncWebServerRequest* request) {
if (!request->authenticate(www_username, www_password)) {
return request->requestAuthentication();
}
// send your web content here. The below is simplest form.
request->send(200, "text/html", "<html><body><h1>Login Successful!</h1><p>You are now logged in.</p></body></html>");
}
void handleNotFound(AsyncWebServerRequest* request) {
request->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 ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
}
사용 방법
- ESP32를 처음 사용하는 경우, Arduino IDE에서 Arduino Nano ESP32 환경 설정 방법을 참조하십시오.
- Arduino Nano ESP32 보드를 마이크로 USB 케이블을 통해 PC에 연결하십시오.
- PC에서 Arduino IDE를 엽니다.
- 올바른 Arduino Nano ESP32 보드(예: Arduino Nano ESP32 개발 모듈)와 COM 포트를 선택하십시오.
- Arduino IDE의 왼쪽 탐색 바에 있는 Library Manager 아이콘을 클릭하여 라이브러리 관리자를 엽니다.
- “ESPAsyncWebServer”를 검색한 다음, lacamera가 만든 ESPAsyncWebServer를 찾으십시오.
- ESPAsyncWebServer 라이브러리를 설치하려면 Install 버튼을 클릭하십시오.
의존성을 설치하라는 요청을 받게 됩니다. Install All 버튼을 클릭하세요.
- 위의 코드를 복사하고 Arduino IDE로 열기
- 코드 내의 와이파이 정보(SSID와 비밀번호)를 여러분의 정보로 변경하기
- Arduino IDE에서 Upload 버튼을 클릭하여 코드를 ESP32에 업로드하기
- 시리얼 모니터 열기
- 시리얼 모니터에서 결과 확인하기
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- 시리얼 모니터에서 IP 주소를 볼 수 있습니다. 예를 들어: 192.168.0.3
- 스마트폰이나 PC의 웹 브라우저 주소 창에 IP 주소를 입력하세요.
- 시리얼 모니터에서 얻은 IP 주소로 192.168.0.3을 변경해야 한다는 점을 유의하세요.
- 사용자 이름/비밀번호를 입력하라는 페이지가 나타납니다.
- Arduino Nano ESP32 코드에 있는 사용자 이름/비밀번호를 입력하세요. 이 경우에는 사용자 이름으로 admin, 비밀번호로 esp32를 사용합니다.
- 사용자 이름/비밀번호를 정확히 입력하면 Arduino Nano ESP32의 웹 콘텐츠가 표시됩니다.
※ NOTE THAT:
- 웹 사용자 이름과 비밀번호는 코드 내에서 www_username 및 www_password 두 변수에 할당된 값을 변경함으로써 직접 조정할 수 있습니다.
- 본인의 HTML, CSS, 그리고 JavaScript 코드를 추가해서 이 코드를 사용자화할 수 있는 옵션이 있습니다.
- 로그인 폼(사용자 이름/비밀번호)에 대한 HTML 코드가 코드 자체 내에 없다는 것을 주목하세요. 놀라지 마세요! 대신, 로그인 폼은 웹 브라우저에 의해 동적으로 생성됩니다.
고급 지식
이 섹션에서는 로그인 폼에 HTML 없이 사용자 이름/비밀번호 시스템이 어떻게 작동하는지에 대한 심화된 통찰을 제공합니다:
- 처음에 웹 브라우저에 아두이노 나노 ESP32의 IP 주소를 입력하면 브라우저는 사용자 이름/비밀번호 자격 증명 없이 아두이노 나노 ESP32에 HTTP 요청을 보냅니다.
- 이 요청을 받은 아두이노 나노 ESP32 코드는 사용자 이름/비밀번호 자격 증명이 제공되었는지 확인합니다. 제공되지 않은 경우, 아두이노 나노 ESP32는 요청된 페이지의 내용으로 응답하지 않습니다. 대신, 브라우저가 사용자에게 사용자 이름/비밀번호를 입력하라는 메시지를 표시하도록 지시하는 헤더가 포함된 HTTP 메시지로 응답합니다. 중요한 것은 이 응답에 로그인 폼을 위한 HTML 코드가 포함되어 있지 않다는 것입니다.
- 이 응답을 받은 웹 브라우저는 HTTP 헤더를 해석하여 ESP32가 사용자 이름/비밀번호를 요구한다는 것을 이해합니다. 그 결과, 브라우저는 동적으로 로그인 폼을 생성하여 사용자가 자격 증명을 입력할 수 있도록 합니다.
- 그런 다음 사용자는 양식에 사용자 이름/비밀번호를 입력합니다.
- 웹 브라우저는 입력된 사용자 이름/비밀번호를 HTTP 요청에 포함하여 ESP32로 보냅니다.
- 아두이노 나노 ESP32는 HTTP 요청에 포함된 사용자 이름/비밀번호를 검증합니다. 맞는 경우 요청된 페이지의 내용을 반환합니다. 잘못된 경우, 사용자가 올바른 자격 증명을 다시 입력하도록 요청 과정을 반복합니다.
- 사용자가 처음으로 올바른 사용자 이름/비밀번호를 입력하면 이후 요청에는 다시 자격 증명을 입력할 필요가 없습니다. 이는 웹 브라우저가 자동으로 자격 증명을 저장하여 다음 요청에 포함하기 때문입니다.