Arduino - Mot de passe du serveur Web
Dans ce tutoriel, nous apprendrons comment créer un serveur Web Arduino sécurisé qui nécessite un nom d'utilisateur et un mot de passe pour la connexion. Avant d'accéder à n'importe quelle page Web hébergée sur l'Arduino, les utilisateurs seront invités à saisir leur nom d'utilisateur et leur mot de passe.
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
À propos d'Arduino et du serveur Web
Si vous n'êtes pas familier avec Arduino et un serveur Web (y compris le brochage, leur mode de fonctionnement et leur programmation), vous pouvez en apprendre davantage sur eux grâce aux tutoriels suivants :
Code Arduino - Serveur Web Nom d'utilisateur/Mot de passe
/*
* Ce code Arduino a été développé par newbiely.fr
* Ce code Arduino est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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();
}
Étapes rapides
- Si c'est la première fois que vous utilisez Arduino Uno R4, consultez Comment démarrer avec Arduino Uno R4..
- Connectez la carte Arduino à votre PC via un câble micro USB
- Ouvrez l'IDE Arduino sur votre PC.
- Sélectionnez la carte Arduino et le port COM correct.
- Ouvrez le Gestionnaire de bibliothèques en cliquant sur l'icône Gestionnaire de bibliothèques sur le côté gauche de l'IDE Arduino.
- Recherchez Web Server for Arduino Uno R4 WiFi et localisez la bibliothèque Web Server créée par DIYables.
- Cliquez sur le bouton Install pour ajouter la bibliothèque Web Server.
- Copiez le code ci-dessus et ouvrez-le avec l'IDE Arduino
- Modifiez les informations Wi‑Fi (SSID et mot de passe) dans le code pour les remplacer par les vôtres.
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur Arduino.
- Ouvrez le Moniteur série.
- Vérifiez le résultat dans le Moniteur série.
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
- Vous verrez une adresse IP dans le Moniteur série, par exemple : 192.168.0.3
- Saisissez l'adresse IP dans la barre d'adresse d'un navigateur web sur votre smartphone ou votre PC.
- Veuillez noter que vous devez remplacer 192.168.0.3 par l'adresse IP que vous avez obtenue dans le Moniteur série.
- Vous verrez une page qui vous invite à saisir votre nom d'utilisateur et votre mot de passe.
- Tapez le nom d'utilisateur/mot de passe qui se trouvent dans le code Arduino, dans ce cas : admin comme nom d'utilisateur, arduino comme mot de passe
- Si vous entrez correctement le nom d'utilisateur et le mot de passe, le contenu Web d'Arduino sera affiché :
※ Note:
- Vous pouvez ajuster le nom d'utilisateur et le mot de passe de votre site Web directement dans le code en modifiant les valeurs attribuées à deux variables : www_username et www_password.
- Vous avez la flexibilité de personnaliser ce code en y ajoutant votre propre HTML, CSS et JavaScript pour concevoir votre page Web selon vos préférences.
- Il est important de noter que, dans le code lui-même, il n’y a pas de code HTML spécifiquement destiné au formulaire de connexion où les utilisateurs saisissent leur nom d’utilisateur et leur mot de passe. Ne soyez pas surpris par cela ! Au lieu de cela, le formulaire de connexion est généré dynamiquement par le navigateur Web lorsque cela est nécessaire.
Connaissance avancée
Cette section fournit des informations approfondies sur le fonctionnement du système de nom d'utilisateur et de mot de passe sans HTML pour le formulaire de connexion :
- Lorsque vous saisissez initialement l'adresse IP de l'Arduino dans un navigateur, le navigateur envoie une demande à l'Arduino via HTTP, mais sans aucun nom d'utilisateur/mot de passe.
- En recevant cette demande, le code de l'Arduino vérifie s'il y a des identifiants nom d'utilisateur/mot de passe inclus. S'il n'en trouve pas, l'Arduino ne répond pas avec le contenu de la page. À la place, il renvoie un message HTTP avec des en-têtes indiquant au navigateur de demander à l'utilisateur son nom d'utilisateur et son mot de passe. Important, cette réponse ne contient pas de code HTML pour le formulaire de connexion.
- Lorsque le navigateur reçoit cette réponse, il interprète les en-têtes HTTP et comprend que l'Arduino demande un nom d'utilisateur/mot de passe. Par conséquent, le navigateur crée dynamiquement un formulaire de connexion pour que l'utilisateur saisisse ses identifiants.
- L'utilisateur saisit ensuite son nom d'utilisateur/mot de passe dans ce formulaire.
- Le navigateur inclut le nom d'utilisateur et le mot de passe saisis dans une demande HTTP et la renvoie à l'Arduino.
- L'Arduino vérifie le nom d'utilisateur et le mot de passe inclus dans la demande HTTP. S'ils sont corrects, il fournit le contenu de la page demandée. S'ils sont incorrects, le processus est répété, invitant l'utilisateur à saisir à nouveau les identifiants corrects.
- Une fois que l'utilisateur saisit correctement son nom d'utilisateur et son mot de passe pour la première fois, les demandes suivantes ne nécessitent pas de les saisir à nouveau. C'est parce que le navigateur enregistre automatiquement les identifiants et les inclut dans les demandes suivantes.