Home
ESP32

Ejemplo de servidor web ESP32 con autenticación

ESP32 - Servidor Web con Autenticación Básica

Este ejemplo demuestra cómo crear un servidor web seguro con autenticación HTTP básica en ESP32 utilizando la biblioteca DIYables_ESP32_WebServer.

Requisitos de Hardware

1×Módulo de Desarrollo ESP32 ESP-WROOM-32
1×Cable USB Tipo-A a Tipo-C (para PC USB-A)
1×Cable USB Tipo-C a Tipo-C (para PC USB-C)
1×(Recomendado) Placa de Expansión de Terminales de Tornillo para ESP32
1×(Recomendado) Breakout Expansion Board for ESP32
1×(Recomendado) Divisor de Alimentación para ESP32

Or you can buy the following kits:

1×DIYables ESP32 Starter Kit (ESP32 included)
1×DIYables Sensor Kit (30 sensors/displays)
1×DIYables Sensor Kit (18 sensors/displays)
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.

Características Demostradas

  • ✅ Autenticación HTTP básica
  • ✅ Protección de nombre de usuario y contraseña
  • ✅ Diálogos de inicio de sesión nativos del navegador
  • ✅ Control de acceso seguro
  • ✅ Configuración de autenticación simple
  • ✅ Compatibilidad hacia atrás (autenticación opcional)

Diagrama de circuitos

No se requieren cables adicionales: este ejemplo utiliza únicamente el LED integrado y la funcionalidad WiFi del ESP32.

Ejemplo de código

/* * 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(); }

Cómo funciona

1. Configuración de autenticación

El ejemplo habilita la autenticación HTTP básica con:

It looks like the content to translate is missing inside the code block. Please provide the English text to translate.

server.enableAuthentication(www_username, www_password, "ESP32");

Please provide the English text you want translated into Spanish.

2. Protección automática

Una vez que la autenticación está habilitada, todas las rutas están protegidas automáticamente. Los usuarios deben proporcionar credenciales válidas para acceder a cualquier página.

3. Integración del navegador

Cuando los usuarios visitan el servidor web:

  1. El navegador muestra un cuadro de diálogo de inicio de sesión
  2. El usuario introduce su nombre de usuario y su contraseña
  3. En caso de éxito: la página se carga normalmente
  4. En caso de fallo: se muestra la página 401 No autorizada

4. Almacenamiento de credenciales

Los navegadores almacenan en caché las credenciales de la sesión, para que los usuarios no tengan que iniciar sesión repetidamente.

Consideraciones de seguridad

✅ Adecuado para:

  • Redes domésticas y entornos de confianza
  • Dispositivos IoT internos
  • Desarrollo y prototipado
  • Proyectos educativos

⚠️ Limitaciones:

  • Las credenciales están codificadas en Base64, no cifradas.
  • No hay soporte de HTTPS (limitación de la plataforma ESP32).
  • Una única combinación de nombre de usuario y contraseña.
  • No es adecuado para uso en producción a través de redes públicas.

🔒 Mejores Prácticas:

  • Cambie las credenciales predeterminadas de inmediato
  • Utilice solo en redes de confianza
  • Considere medidas de seguridad de red adicionales (VPN y cortafuegos)
  • Para aplicaciones de alta seguridad, agregue capas adicionales de autenticación

Pruebas de la autenticación

  1. Cargar el código a tu ESP32
  2. Abrir el Monitor Serial para ver la dirección IP
  3. Visitar la dirección IP en tu navegador web
  4. Aparece el cuadro de inicio de sesión - introduce credenciales:
  • Nombre de usuario: admin
  • Contraseña: esp32
  1. La página de éxito se carga después de la autenticación

Opciones de personalización

Cambiar credenciales

It looks like the content to translate is missing. Please provide the English text you want translated to Spanish.

const char* www_username = "miusuario";

const char* contrasena_www = "mi_contrasena_secreta";

It looks like the text to translate is missing—please paste the English content you want translated to Spanish.

Dominio personalizado

Please provide the English text to translate.

server.enableAuthentication(www_username, www_password, "Mi Dispositivo Personalizado");

Please provide the English text you want translated into Spanish.

Deshabilitar la autenticación

No hay contenido para traducir.

server.disableAuthentication(); // Hacer que todas las rutas sean públicas

Please provide the English text to translate.

Verificar estado de autenticación

No hay contenido en el bloque de código para traducir. Por favor proporciona el texto en el bloque de código para traducir.

si (server.isAuthenticationEnabled()) {

Serial.println("Autenticación activa");

}

There's no content to translate. Please provide the English text inside the code block.

Compatibilidad con versiones anteriores

La autenticación está deshabilitada por defecto, de modo que el código existente siga funcionando sin modificaciones. Activa la autenticación solo cuando sea necesario:

Please provide the English content to translate.

// Esto funciona exactamente como antes (sin autenticación)

DIYables_ESP32_WebServer servidor;

server.agregarRuta("/", manejarRaiz);

server.begin("WiFi", "Contraseña");

// Añade esta línea para habilitar la autenticación

server.enableAuthentication("admin", "password123");

Please paste the English text you want translated into Spanish.

Solución de problemas

El navegador sigue pidiendo credenciales

  • Verifica errores tipográficos en el nombre de usuario y la contraseña
  • Borra la caché y las cookies del navegador
  • Verifica que las credenciales coincidan exactamente

No se puede acceder a ninguna página

  • La autenticación protege TODAS las rutas cuando está habilitada
  • Utilice server.disableAuthentication() para probar
  • Verifique la salida Serial para mensajes de autenticación

Autenticación no funciona

  • Asegúrese de que enableAuthentication() se llame después de server.begin()
  • Verifique que las credenciales estén dentro de los límites de longitud (máximo de 31 caracteres)
  • Verifique si las contraseñas contienen caracteres especiales

Ejemplos relacionados

Referencias

Tutoriales Relacionados

※ NUESTROS MENSAJES

  • No dude en compartir el enlace de este tutorial. Sin embargo, por favor no use nuestro contenido en otros sitios web. Hemos invertido mucho esfuerzo y tiempo en crear el contenido, ¡por favor respete nuestro trabajo!
DIVULGACIÓN
es.newbiely.com es participante del Programa de Asociados de Amazon Services LLC, un programa de publicidad de afiliados diseñado para proporcionar un medio para que los sitios web ganen tarifas publicitarias mediante publicidad y enlaces a Amazon.com, Amazon.it, Amazon.de, Amazon.co.uk, Amazon.ca, Amazon.de, Amazon.es, Amazon.nl, Amazon.pl y Amazon.se
Copyright © 2025 es.newbiely.com. Todos los derechos reservados.
Términos y Condiciones | Política de Privacidad
Email: newbiely.com@gmail.com