Arduino Nano ESP32 - Contraseña del servidor web
En esta guía, aprenderemos a crear un servidor web Arduino Nano ESP32 con protección por nombre de usuario y contraseña para iniciar sesión. Antes de acceder a cualquier página web en el ESP32, se pedirá a los usuarios que introduzcan su nombre de usuario y contraseña.
Hardware Requerido
Or you can buy the following kits:
| 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.
Acerca de Arduino Nano ESP32 y Servidor Web
Si no estás familiarizado con Arduino Nano ESP32 y con un servidor web (incluido el pinout, cómo funciona y la programación), puedes aprender sobre ellos a través de los siguientes tutoriales:
Código Arduino Nano ESP32 - Servidor web Nombre de usuario/Contraseña
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server-password
*/
#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;
// Main page handler
void handleRoot(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, "<html><body><h1>Login Successful!</h1><p>You are now logged in.</p></body></html>");
}
void setup() {
Serial.begin(9600);
delay(1000);
// 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("Arduino Nano ESP32 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();
}
Pasos R\u00e1pidos
- Si es la primera vez que usas ESP32, consulta cómo configurar el entorno para Arduino Nano ESP32 en Arduino IDE.
- Conecta la placa Arduino Nano ESP32 a tu PC mediante un cable micro USB.
- Abre Arduino IDE en tu PC.
- Selecciona la placa Arduino Nano ESP32 y el puerto COM.
- Abre el Administrador de Bibliotecas haciendo clic en el icono Administrador de Bibliotecas en la barra de navegación izquierda de Arduino IDE.
- Busca “DIYables ESP32 WebServer”, luego encuentra la biblioteca Web Server creada por DIYables.
- Haz clic en el botón Instalar para instalar la biblioteca Web Server.
- Copia el código anterior y ábrelo con Arduino IDE
- Cambia la información de wifi (SSID y contraseña) en el código por la tuya
- Haz clic en el botón Subir en Arduino IDE para subir el código al ESP32
- Abre el Monitor Serial
- Verifica el resultado en el Monitor Serial
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
- Verás una dirección IP en el Monitor Serial, por ejemplo: 192.168.0.3
- Escribe la dirección IP en la barra de direcciones de un navegador web en tu teléfono inteligente o PC.
- Ten en cuenta que debes cambiar 192.168.0.3 por la dirección IP que obtuviste en el Monitor Serial.
- Verás una página que te solicite introducir un nombre de usuario y una contraseña.
- Escribe el nombre de usuario y la contraseña que están en el código de Arduino Nano ESP32, en este caso: admin como nombre de usuario, esp32 como contraseña
- Si introduces el nombre de usuario y la contraseña correctamente, se mostrará el contenido web de Arduino Nano ESP32:
※ Nota:
- Puedes ajustar el nombre de usuario web y la contraseña directamente dentro del código modificando los valores asignados a dos variables: www_username y www_password.
- Tienes la opción de personalizar este código incorporando tu propio código HTML, CSS y JavaScript para tu página web.
- Cabe señalar que no hay código HTML dentro del propio código para el formulario de inicio de sesión (nombre de usuario/contraseña). ¡No te sorprendas! En su lugar, el formulario de inicio de sesión se genera dinámicamente por el navegador web.
Conocimiento Avanzado
Esta sección ofrece ideas avanzadas sobre cómo funciona el sistema de nombre de usuario y contraseña sin HTML para el formulario de inicio de sesión:
- Inicialmente, cuando ingresas la dirección IP del Arduino Nano ESP32 en un navegador web, el navegador envía una solicitud HTTP al Arduino Nano ESP32 sin credenciales de nombre de usuario y contraseña.
- Al recibir esta solicitud, el código del Arduino Nano ESP32 verifica si se han proporcionado credenciales de nombre de usuario y contraseña. Si no, el Arduino Nano ESP32 no responde con el contenido de la página solicitada. En su lugar, responde con un mensaje HTTP que contiene encabezados que indican al navegador que solicite al usuario su nombre de usuario y contraseña. Es importante destacar que esta respuesta no incluye código HTML para el formulario de inicio de sesión.
- Al recibir esta respuesta, el navegador interpreta los encabezados HTTP, entendiendo la solicitud del ESP32 de nombre de usuario y contraseña. En consecuencia, el navegador genera dinámicamente un formulario de inicio de sesión, que permite al usuario introducir sus credenciales.
- Luego, el usuario introduce su nombre de usuario y contraseña en el formulario.
- El navegador web incluye el nombre de usuario y la contraseña ingresados en la solicitud HTTP y la envía al ESP32.
- El Arduino Nano ESP32 verifica el nombre de usuario y la contraseña incluidos en la solicitud HTTP. Si son correctos, devuelve el contenido de la página solicitada. Si son incorrectos, repite el proceso, solicitando al usuario que introduzca las credenciales correctas nuevamente.
- Una vez que el usuario introduce correctamente el nombre de usuario y la contraseña por primera vez, las solicitudes subsiguientes no requieren que vuelvan a ingresar sus credenciales. Esto se debe a que el navegador web guarda automáticamente las credenciales, incluyéndolas en las solicitudes siguientes.