Arduino - Contraseña del servidor web
En este tutorial, aprenderemos cómo crear un servidor web seguro con Arduino que requiera un nombre de usuario y una contraseña para iniciar sesión. Antes de acceder a cualquier página web alojada en el Arduino, se les pedirá a los usuarios que ingresen su nombre de usuario y su contraseña.
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino 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.
Acerca de Arduino y el servidor web
Si no estás familiarizado con Arduino 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 de Arduino - Servidor web Nombre de usuario/Contraseña
/*
* Este código de Arduino fue desarrollado por es.newbiely.com
* Este código de Arduino se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino/arduino-web-server-password
*/
#include <UnoR4WiFi_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 = "arduino";
// Create web server instance
UnoR4WiFi_WebServer server;
// HTML page content
const char* LOGIN_SUCCESS_PAGE = R"(
<!DOCTYPE HTML>
<html>
<head><title>Arduino Web Server</title></head>
<body>
<h1>Login Successful!</h1>
<p>You are now logged in.</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, "Arduino");
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();
}
Pasos R\u00e1pidos
- Si es la primera vez que usas Arduino Uno R4, consulta cómo configurar el entorno para Arduino Uno R4 en Arduino IDE.
- Conecta la placa Arduino a tu PC mediante un cable micro USB.
- Abre Arduino IDE en tu PC.
- Selecciona la placa Arduino correcta y el puerto COM.
- Abre el Administrador de Bibliotecas haciendo clic en el Administrador de Bibliotecas icono en el lado izquierdo del IDE de Arduino.
- Busca Servidor Web para Arduino Uno R4 WiFi y localiza la biblioteca Servidor Web creada por DIYables.
- Haz clic en el botón Instalar para añadir la biblioteca Servidor Web.
- 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 Arduino
- Abre el Monitor Serial
- Revisa el resultado en el Monitor Serial
COM6
Attempting to connect to SSID: YOUR_WIFI_SSID
Connected! IP Address: 192.168.0.254
SSID: YOUR_WIFI_SSID
IP Address: 192.168.0.254
Signal strength (RSSI): -43 dBm
Basic Authentication enabled
Realm: Arduino
IP Address: 192.168.0.254
Server ready with authentication enabled
Username: admin
Password: arduino
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.
- Por favor, 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 pedirá ingresar el nombre de usuario y la contraseña.
- Escribe el nombre de usuario y la contraseña que están en el código de Arduino, en este caso: admin como nombre de usuario, arduino como contraseña
- Si introduces el nombre de usuario y la contraseña correctamente, se mostrará el contenido web de Arduino:
※ Nota:
- Puedes ajustar el nombre de usuario y la contraseña de tu sitio web directamente en el código cambiando los valores asignados a dos variables: www_username y www_password.
- Tienes la flexibilidad de personalizar este código agregando tu propio HTML, CSS y JavaScript para diseñar tu página web según tus preferencias.
- Es importante señalar que dentro del propio código no hay ningún código HTML específicamente para el formulario de inicio de sesión en el que los usuarios introducen su nombre de usuario y contraseña. ¡No te sorprendas por esto! En su lugar, el formulario de inicio de sesión se genera dinámicamente por el navegador cuando sea necesario.
Conocimiento Avanzado
Esta sección proporciona información detallada sobre cómo funciona el sistema de nombre de usuario y contraseña sin HTML para el formulario de inicio de sesión:
- Cuando introduces por primera vez la dirección IP del Arduino en un navegador web, el navegador envía una solicitud al Arduino a través de HTTP, pero sin ningún dato de nombre de usuario y contraseña.
- Al recibir esta solicitud, el código del Arduino verifica si se incluyen credenciales de nombre de usuario y contraseña. Si no se encuentran, el Arduino no responde con el contenido de la página. En su lugar, envía un mensaje HTTP con cabeceras que indican al navegador que pida al usuario su nombre de usuario y contraseña. Importante: esta respuesta no contiene 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 Arduino está pidiendo un nombre de usuario y una contraseña. En consecuencia, el navegador crea dinámicamente un formulario de inicio de sesión para que el usuario introduzca sus credenciales.
- Luego, el usuario introduce su nombre de usuario y contraseña en este formulario.
- El navegador incluye el nombre de usuario y la contraseña introducidos en una solicitud HTTP y la envía de vuelta al Arduino.
- El Arduino verifica el nombre de usuario y la contraseña incluidos en la solicitud HTTP. Si son correctos, proporciona el contenido de la página solicitada. Si son incorrectos, el proceso se repite, pidiendo al usuario que introduzca de nuevo las credenciales correctas.
- Una vez que el usuario introduce correctamente su nombre de usuario y contraseña por primera vez, las solicitudes siguientes no requieren que vuelva a introducir los datos. Esto se debe a que el navegador guarda automáticamente las credenciales y las incluye en las solicitudes siguientes.