ESP8266 - Contraseña del servidor web
Este tutorial te enseña cómo crear un servidor web seguro para ESP8266 que solicite un nombre de usuario y una contraseña para acceder. Antes de ver cualquier página web almacenada en el ESP8266, los usuarios deberán introducir su nombre de usuario y su 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 ESP8266 y el servidor web
Si no estás familiarizado con ESP8266 y con el 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 ESP8266 - Servidor web Nombre de usuario/Contraseña
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-web-server-password
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
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);
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 ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
Pasos R\u00e1pidos
Para empezar con ESP8266 en el IDE de Arduino, sigue estos pasos:
- Consulta el tutorial cómo configurar el entorno para ESP8266 en Arduino IDE si es la primera vez que usas ESP8266.
- Conecta los componentes tal como se muestra en el diagrama.
- Conecta la placa ESP8266 a tu ordenador con un cable USB.
- Abre Arduino IDE en tu ordenador.
- Elige la placa ESP8266 correcta, por ejemplo (p. ej. NodeMCU 1.0 (Módulo ESP-12E)), y su puerto COM respectivo.
- Copia el código anterior y ábrelo con Arduino IDE.
- Modifica la información de WiFi (SSID y contraseña) en el código para que coincida con la de tu red.
- Haz clic en el botón Subir en Arduino IDE para subir el código al ESP8266.
- Abre el monitor serie.
- Consulta el resultado en el monitor serie.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Verá una dirección IP en el Monitor Serial, por ejemplo: 192.168.0.3
- Escriba la dirección IP en la barra de direcciones de un navegador web en su teléfono inteligente o PC.
- Tenga en cuenta que debe cambiar 192.168.0.3 por la dirección IP que obtuvo en el Monitor Serial.
- Verá una página que le pedirá introducir su nombre de usuario y su contraseña.
- Escribe el nombre de usuario y la contraseña que están en el código del ESP8266; en este caso: admin como nombre de usuario, esp8266 como contraseña
- Si introduces correctamente el nombre de usuario y la contraseña, se mostrará el contenido web del ESP8266
※ Nota:
- Puedes modificar el nombre de usuario y la contraseña de tu sitio web directamente dentro del código cambiando los valores asignados a dos variables: www_username y www_password.
- Tienes la libertad de personalizar este código integrando tu propio HTML, CSS y JavaScript para diseñar tu página web a tu gusto.
- Cabe mencionar que no hay un código HTML específico dentro del propio código para el formulario de inicio de sesión donde los usuarios introducen su nombre de usuario y su contraseña. Esto podría parecer inesperado, pero en su lugar, el formulario de inicio de sesión se crea dinámicamente por el navegador web cuando sea necesario.
Conocimiento avanzado
Este segmento ofrece una explicación detallada de cómo funciona el sistema de nombre de usuario y contraseña sin HTML para el formulario de inicio de sesión:
- Cuando ingreses la dirección IP del ESP8266 en un navegador web por primera vez, el navegador envía una solicitud al ESP8266 a través de HTTP, pero sin ninguna información de nombre de usuario y contraseña.
- Al recibir esta solicitud, el código del ESP8266 verifica si se proporcionaron credenciales de nombre de usuario y contraseña. Si no se detectan, el ESP8266 no responde con el contenido de la página. En su lugar, envía de vuelta un mensaje HTTP que contiene cabeceras que indican al navegador que solicite el nombre de usuario y la contraseña del usuario. Cabe destacar que esta respuesta no incluye código HTML para el formulario de inicio de sesión.
- Cuando el navegador recibe esta respuesta, interpreta las cabeceras HTTP y comprende que el ESP8266 está solicitando un nombre de usuario y una contraseña. En consecuencia, el navegador genera dinámicamente un formulario de inicio de sesión para que el usuario ingrese sus credenciales.
- Luego, el usuario introduce su nombre de usuario y contraseña en este formulario.
- El navegador incorpora el nombre de usuario y la contraseña ingresados en la solicitud HTTP y la envía de vuelta al ESP8266.
- El ESP8266 verifica el nombre de usuario y la contraseña proporcionados en la solicitud HTTP. Si son correctas, proporciona el contenido de la página solicitada. Si no lo son, el proceso se repite, pidiéndole al usuario que vuelva a introducir sus credenciales una vez más.
- Una vez que el usuario ingresa correctamente su nombre de usuario y contraseña por primera vez, las solicitudes posteriores no requieren que vuelva a ingresar sus credenciales. Esto se debe a que el navegador almacena automáticamente las credenciales y las incluye en las solicitudes siguientes.