ESP32 - 웹 서버 비밀번호 | ESP32 - Web Server Password

이 튜토리얼에서는 사용자 이름과 비밀번호로 로그인 보호되는 ESP32 웹 서버를 만드는 방법을 알아보겠습니다. ESP32의 웹 페이지에 접근하기 전에, 사용자는 사용자 이름과 비밀번호를 입력하라는 요청을 받게 됩니다.

ESP32 web server username password

준비물

1×ESP-WROOM-32 Dev Module 쿠팡 | Amazon
1×USB Cable Type-C 쿠팡 | Amazon
1×(Recommended) Screw Terminal Expansion Board for ESP32 쿠팡 | Amazon
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.

ESP32 및 웹 서버에 관하여

ESP32와 웹 서버(핀아웃, 작동 방식 및 프로그래밍 포함)에 익숙하지 않다면 다음 튜토리얼을 통해 배울 수 있습니다:

ESP32 코드 - 웹 서버 사용자 이름/비밀번호

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-web-server-password */ #include <WiFi.h> #include <ESPAsyncWebServer.h> const char* ssid = "YOUR_WIFI_SSID"; // WiFi SSID, change it to your network const char* password = "YOUR_WIFI_PASSWORD"; // WiFi password, change it to your network AsyncWebServer server(80); const char* www_username = "admin"; // web page username const char* www_password = "esp32"; // web page password void handleRoot(AsyncWebServerRequest* request) { if (!request->authenticate(www_username, www_password)) { return request->requestAuthentication(); } // The below is simplest form of web page, you can modify this 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에서 ESP32 환경 설정 방법을 참조하세요.
  • ESP32 보드를 PC에 마이크로 USB 케이블로 연결하세요.
  • PC에서 Arduino IDE를 엽니다.
  • 올바른 ESP32 보드(예: ESP32 Dev Module)와 COM 포트를 선택하세요.
  • Arduino IDE의 왼쪽 내비게이션 바에 있는 Library Manager 아이콘을 클릭하여 라이브러리 관리자를 엽니다.
  • “ESPAsyncWebServer”를 검색한 후, lacamera가 만든 ESPAsyncWebServer를 찾습니다.
  • ESPAsyncWebServer 라이브러리를 설치하려면 Install 버튼을 클릭하세요.
ESP32 ESPAsyncWebServer library

의존성을 설치하라는 요청을 받게 됩니다. Install All 버튼을 클릭하세요.

ESP32 ESPAsyncWebServer dependencies library
  • 위의 코드를 복사해서 아두이노 IDE로 열기
  • 코드 내의 와이파이 정보(SSID와 비밀번호)를 본인 것으로 변경하기
  • 아두이노 IDE에서 Upload 버튼을 클릭하여 ESP32에 코드 업로드
  • 시리얼 모니터 열기
  • 시리얼 모니터에서 결과 확인하기
COM6
Send
Connecting to WiFi... Connected to WiFi ESP32 Web Server's IP address: 192.168.0.3
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • 시리얼 모니터에서 IP 주소를 볼 수 있습니다. 예를 들면, 192.168.0.3 입니다.
  • 스마트폰이나 PC의 웹브라우저 주소창에 IP 주소를 입력하세요.
  • 시리얼 모니터에서 얻은 IP 주소로 192.168.0.3을 변경해야 한다는 점을 유의하세요.
  • 사용자 이름/비밀번호를 입력하라는 페이지가 나타날 것입니다.
ESP32 Web page password

ESP32 코드에 있는 사용자 이름/비밀번호를 입력하세요. 이 경우 사용자 이름은 admin, 비밀번호는 esp32입니다.

사용자 이름/비밀번호를 정확히 입력하면 ESP32의 웹 콘텐츠가 표시됩니다.

ESP32 Web page login

※ NOTE THAT:

  • 코드에서 www_usernamewww_password 두 변수의 값을 변경하여 웹 사용자 이름/비밀번호를 변경할 수 있습니다.
  • 이 코드를 수정하여 웹페이지의 HTML/CSS/JavaScript 코드를 추가할 수 있습니다.
  • 코드에는 로그인 폼(사용자 이름/비밀번호)의 HTML 코드가 없습니다. 놀라지 마세요! 로그인 폼은 웹 브라우저에 의해 생성됩니다.

고급 지식

이 섹션에서는 로그인 폼을 위한 HTML 없이 사용자 이름/비밀번호 시스템이 작동하는 방식에 대한 고급 지식을 소개합니다.

  • 처음에 웹 브라우저에 ESP32의 IP 주소를 입력하면, 브라우저는 사용자 이름/비밀번호 자격증명 없이 ESP32에 HTTP 요청을 보냅니다.
  • 이 요청을 받은 ESP32 코드는 사용자 이름/비밀번호가 포함되어 있는지 아닌지를 확인합니다. 부재할 경우, ESP32는 페이지 내용에 대한 요청에 응답하지 않습니다. 대신, 사용자 이름/비밀번호를 입력하도록 브라우저에 요청하는 헤더가 포함된 HTTP 메시지로 응답합니다. 특히, 이 응답에는 로그인 폼에 대한 HTML 코드가 포함되어 있지 않습니다.
  • 이 응답을 받은 웹 브라우저는 HTTP 헤더를 파싱하여 ESP32의 사용자 이름/비밀번호 요청을 인식합니다. 이후 브라우저는 동적으로 로그인 폼을 생성하여 사용자가 자신의 자격증명을 입력할 수 있게 합니다.
  • 그런 다음 사용자는 폼에 자신의 사용자 이름/비밀번호를 입력합니다.
  • 웹 브라우저는 입력된 사용자 이름/비밀번호를 HTTP 요청에 포함시켜 ESP32로 보냅니다.
  • ESP32는 HTTP 요청에 포함된 사용자 이름/비밀번호를 검증합니다. 정확하면 요청된 페이지의 내용을 반환합니다. 부정확할 경우, 사용자가 다시 올바른 자격증명을 입력하도록 프로세스를 반복합니다.
  • 사용자가 처음으로 올바른 사용자 이름/비밀번호를 입력한 후, 이후의 요청은 사용자 이름/비밀번호를 다시 입력할 필요가 없습니다. 이는 웹 브라우저가 자동으로 자격증명을 저장하여 이후의 요청에 포함하기 때문입니다.

※ OUR MESSAGES

  • Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!