홈
ESP32

인증이 포함된 ESP32 웹 서버 예제

ESP32 - 기본 인증 웹 서버

이 예제는 DIYables_ESP32_WebServer 라이브러리를 사용하여 ESP32에서 HTTP 기본 인증으로 보안 웹 서버를 구축하는 방법을 보여줍니다.

필수 하드웨어

1×ESP32 ESP-WROOM-32 개발 모듈 쿠팡 | 아마존
1×USB 케이블 타입-A to 타입-C (USB-A PC용) 쿠팡 | 아마존
1×USB 케이블 타입-C to 타입-C (USB-C PC용) 아마존
1×(추천) ESP32용 스크루 터미널 확장 보드 쿠팡 | 아마존
1×(추천) Breakout Expansion Board for ESP32 쿠팡 | 아마존
1×(추천) ESP32용 전원 분배기 쿠팡 | 아마존
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

시연된 기능

  • ✅ HTTP 기본 인증
  • ✅ 사용자 이름과 비밀번호 보호
  • ✅ 브라우저 네이티브 로그인 대화상자
  • ✅ 보안 접근 제어
  • ✅ 간단한 인증 설정
  • ✅ 하위 호환성 (인증 선택 가능)

회로도

추가 배선이 필요하지 않습니다. 이 예제는 ESP32의 내장 LED와 WiFi 기능만 사용합니다.

코드 예제

/* * ESP32 - Simple Web Server with Basic Authentication * * This example demonstrates basic authentication using the DIYables_ESP32_WebServer library. * Adapted from the simple WiFi authentication example structure. * * Hardware: ESP32 * Library: DIYables_ESP32_WebServer (with Basic Authentication support) */ #include <DIYables_ESP32_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 = "esp32"; // Create web server instance DIYables_ESP32_WebServer server; // HTML page content const char* LOGIN_SUCCESS_PAGE = R"( <!DOCTYPE HTML> <html> <head><title>ESP32 Web Server</title></head> <body> <h1>Login Successful!</h1> <p>You are now logged in.</p> <p>Server running with DIYables_ESP32_WebServer library</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, "ESP32"); 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(); }

작동 방식

1. 인증 설정

다음 예제는 HTTP 기본 인증을 활성화합니다:

It looks like the content inside the code block is missing. Please provide the English text you’d like translated into Korean.

서버.인증활성화(www_username, www_password, "ESP32");

번역할 내용이 제공되지 않았습니다. 번역할 내용을 입력해 주세요.

2. 자동 보호

인증이 활성화되면, 모든 경로가 자동으로 보호됩니다. 사용자는 어떤 페이지에 접근하려면 유효한 자격 증명을 제시해야 합니다.

3. 브라우저 연동

사용자가 웹 서버를 방문할 때:

  1. 브라우저에 로그인 대화상자가 표시됩니다
  2. 사용자가 사용자 이름과 비밀번호를 입력합니다
  3. 성공 시: 페이지가 정상적으로 로드됩니다
  4. 실패 시: 401 Unauthorized 페이지가 표시됩니다

4. 자격 증명 저장

브라우저는 세션 동안 자격 증명을 캐시하므로 사용자는 반복적으로 로그인할 필요가 없습니다.

보안 고려사항

✅ 적합한 대상:

  • 가정용 네트워크 및 신뢰할 수 있는 환경
  • 내부 IoT 기기
  • 개발 및 시제품 제작
  • 교육용 프로젝트

⚠️ 제한 사항:

  • 자격 증명은 암호화되지 않고 Base64로 인코딩됩니다.
  • HTTPS 지원이 없습니다(ESP32 플랫폼의 한계).
  • 단일 아이디/비밀번호 조합.
  • 공용 네트워크에서의 생산 용도로는 적합하지 않습니다.

🔒 모범 사례:

  • 기본 자격 증명을 즉시 변경하십시오
  • 신뢰할 수 있는 네트워크에서만 사용하십시오
  • 추가 네트워크 보안(VPN, 방화벽)을 고려하십시오
  • 고보안 애플리케이션의 경우 추가 인증 계층을 도입하십시오

인증 테스트

  1. ESP32에 코드를 업로드
  2. 시리얼 모니터를 열어 IP 주소를 확인합니다
  3. 웹 브라우저에서 해당 IP 주소에 접속합니다
  4. 로그인 대화 상자가 표시됩니다 - 자격 증명을 입력합니다:
  • 사용자 이름: admin
  • 비밀번호: esp32
  1. 인증 후 성공 페이지가 로드됩니다

맞춤 설정 옵션

자격 증명 변경

아래 코드 블록에 번역할 영어 내용을 입력해 주세요.

const char* www_username = "myuser";

const char* www_password = "나의비밀암호";

번역할 영어 내용을 입력해 주세요.

사용자 정의 영역

번역할 영어 내용을 코드 블록 안에 입력해 주세요.

server.enableAuthentication(www_username, www_password, "나의 맞춤형 디바이스");

번역할 영어 텍스트를 제공해 주세요.

인증 비활성화

There is no content to translate.

server.disableAuthentication(); // 모든 경로를 공개로 설정

번역할 내용이 제공되지 않았습니다.

인증 상태 확인

번역할 영어 텍스트를 제공해 주세요.

만약 (server.isAuthenticationEnabled()) {

Serial.println("인증 활성화");

}

번역할 내용을 코드 블록에 입력해 주세요.

하위 호환성

인증은 기본적으로 비활성화되어 있습니다, 따라서 기존 코드는 수정 없이 계속 작동합니다. 필요할 때만 인증을 활성화하세요:

번역할 영어 텍스트를 입력해 주세요.

// 이전과 동일하게 작동합니다(인증 없음)

DIYables_ESP32_WebServer 서버;

server.addRoute("/", handleRoot);

server.begin("와이파이", "비밀번호");

// 인증을 활성화하려면 이 줄을 추가하세요

서버.enableAuthentication("admin", "password123");

번역할 영어 텍스트를 제공해 주세요.

문제 해결

브라우저가 계속 자격 증명을 요청합니다

  • 사용자 이름/비밀번호에 오타가 있는지 확인하세요
  • 브라우저 캐시와 쿠키를 지우세요
  • 계정 정보가 정확히 일치하는지 확인하세요

어떤 페이지에도 접근할 수 없습니다

  • 인증은 활성화되면 모든 경로를 보호합니다
  • 테스트하려면 server.disableAuthentication()를 사용하세요
  • 인증 메시지는 시리얼 출력에서 확인하세요

인증이 작동하지 않음

  • enableAuthentication()가 server.begin() 이후에 호출되도록 합니다.
  • 자격 증명의 길이가 한도 내에 있는지 확인합니다(최대 31자).
  • 비밀번호에 특수 문자가 포함되어 있는지 확인합니다.

관련 예시

참고문헌

관련 튜토리얼

DISCLOSURE
Newbiely.kr는 Amazon Services LLC Associates Program에 참여하고 있습니다. 이 프로그램은 Amazon.com, Amazon.fr, Amazon.it, Amazon.co.uk, Amazon.de, Amazon.ca, Amazon.es, Amazon.nl, Amazon.pl, Amazon.se에 광고 및 링크를 게재하여 사이트가 광고 수수료를 받을 수 있도록 고안된 제휴 광고 프로그램입니다.
Copyright © 2025 Newbiely.kr. All rights reserved.
Terms and Conditions | Privacy Policy
Email: newbiely.com@gmail.com