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

이 튜토리얼은 사용자가 액세스하려면 사용자 이름과 비밀번호를 요청하는 안전한 ESP8266 웹 서버를 만드는 방법에 대해 안내합니다. ESP8266에 저장된 웹 페이지를 볼 수 있기 전에 사용자는 사용자 이름과 비밀번호를 입력해야 합니다.

ESP8266 NodeMCU web server username password

준비물

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

ESP8266 및 웹 서버에 대하여

당신이 ESP8266과 웹 서버(핀 배치, 작동 방법 및 프로그래밍 포함)에 익숙하지 않다면, 다음 튜토리얼을 통해 이들에 대해 배울 수 있습니다:

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

/* * 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp8266/esp8266-web-server-password */ #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> const char* ssid = "YOUR_WIFI_SSID"; // 변경하세요 const char* password = "YOUR_WIFI_PASSWORD"; // 변경하세요 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); // Wi-Fi에 연결 WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("WiFi에 연결 중..."); } Serial.println("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(); }

사용 방법

Arduino IDE에서 ESP8266을 시작하려면 다음 단계를 따르세요:

  • ESP8266을 처음 사용하는 경우, Arduino IDE에서 ESP8266 환경 설정 방법 튜토리얼을 확인하세요.
  • 다이어그램에 표시된 대로 컴포넌트를 연결하세요.
  • USB 케이블을 사용하여 컴퓨터에 ESP8266 보드를 연결하세요.
  • 컴퓨터에서 Arduino IDE를 엽니다.
  • 올바른 ESP8266 보드(예: NodeMCU 1.0 (ESP-12E Module))와 해당 COM 포트를 선택하세요.
  • ESP8266 Uno R4를 처음 사용하는 경우, Arduino IDE에서 ESP8266 Uno R4 환경 설정 방법을 확인해 보세요.
  • 마이크로 USB 케이블을 사용하여 PC에 ESP8266 보드를 연결하세요.
  • PC에서 Arduino IDE를 엽니다.
  • 올바른 ESP8266 보드와 COM 포트를 선택하세요.
  • 위의 코드를 복사하고 Arduino IDE로 엽니다.
  • 코드에서 wifi 정보(SSID와 비밀번호)를 귀하의 것으로 변경하세요.
  • Arduino IDE에서 Upload 버튼을 클릭하여 ESP8266에 코드를 업로드하세요.
  • 시리얼 모니터를 엽니다.
  • 시리얼 모니터에서 결과를 확인하세요.
COM6
Send
Connecting to WiFi... Connected to WiFi ESP8266 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를 변경해야 한다는 점을 유의하세요.
  • 사용자 이름 및 비밀번호 입력을 요청하는 페이지가 표시됩니다.
ESP8266 NodeMCU Web page password

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

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

ESP8266 NodeMCU Web page login

※ NOTE THAT:

  • 웹사이트의 사용자 이름과 비밀번호는 두 변수 www_usernamewww_password에 할당된 값을 변경하여 코드 내에서 직접 수정할 수 있습니다.
  • 자신만의 HTML, CSS, 그리고 JavaScript를 통합하여 웹페이지를 원하는 대로 꾸밀 수 있는 자유가 있습니다.
  • 사용자가 사용자 이름과 비밀번호를 입력하는 로그인 폼에 대한 구체적인 HTML 코드가 코드 자체 내에 없다는 점을 언급할 가치가 있습니다. 이것은 예상치 못한 것처럼 보일 수 있지만, 대신, 로그인 폼은 필요할 때 웹 브라우저에 의해 동적으로 생성됩니다.

고급 지식

이 부분에서는 로그인 폼에 HTML을 사용하지 않고 사용자 이름/비밀번호 시스템이 어떻게 작동하는지 상세한 설명을 제공합니다:

  • ESP8266의 IP 주소를 웹 브라우저에 처음 입력할 때, 브라우저는 사용자 이름/비밀번호 정보 없이 HTTP를 통해 ESP8266에 요청을 보냅니다.
  • 이 요청을 받은 ESP8266의 코드는 사용자 이름/비밀번호 자격 증명이 제공되었는지 확인합니다. 감지되지 않으면, ESP8266은 페이지의 내용으로 응답하지 않습니다. 대신, 브라우저가 사용자의 사용자 이름/비밀번호를 요청하도록 지시하는 헤더를 포함한 HTTP 메시지를 다시 보냅니다. 특히, 이 응답에는 로그인 폼을 위한 HTML 코드가 포함되어 있지 않습니다.
  • 브라우저가 이 응답을 받으면 HTTP 헤더를 해석하고 ESP8266이 사용자 이름/비밀번호를 요청하고 있음을 이해합니다. 그 결과, 브라우저는 사용자가 자격 증명을 입력할 수 있도록 동적으로 로그인 폼을 생성합니다.
  • 그런 다음 사용자는 이 폼에 자신의 사용자 이름/비밀번호를 입력합니다.
  • 브라우저는 입력된 사용자 이름/비밀번호를 HTTP 요청에 포함시켜 ESP8266으로 다시 전송합니다.
  • ESP8266은 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!