Authentification serveur Web ESP32 avec LittleFS
Description :
Projet d’authentification Web sur ESP32 utilisant LittleFS pour stocker les fichiers HTML/CSS/JS et gérer la connexion sécurisée des utilisateurs via un serveur Web intégré.
Prérequis :
- 1 x Carte ESP32
- Fils de connexion
Version IDE :
- Arduino IDE 2.3.5
Bibliothèque :
- LittleFS.h (Tuto dispo)
- ESPAsyncWebServer.h (version: 3.7.10 par ESP32Async)
- AsyncTCP.h (version 3.4.7 par ESP32Async)
Vidéo de démonstration :
Schéma de câblage :
Code :
Code Arduino :
#include "LittleFS.h"
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <WiFi.h>
const char *ssid = "......."; // "Votre Nom_du_routeur"
const char *password = "......."; // "Votre Mot_de_passe_du_routeur"
AsyncWebServer server(80);
const char *www_username = "admin"; // "Login Web"
const char *www_password = "admin"; // "Mot de pass Web"
void setup() {
Serial.begin(115200);
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
if (!LittleFS.begin()) {
Serial.println("An Error has occurred while mounting LittleFS");
return;
}
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/index.html", "text/html");
});
server.on("/login", HTTP_GET, [](AsyncWebServerRequest *request) {
if (!request->authenticate(www_username, www_password))
return request->requestAuthentication();
request->send(LittleFS, "/login.html", "text/html");
});
server.on("/logout", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(401);
});
server.on("/logged-out", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/logout.html", "text/html");
});
server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/script.js", "text/javascript");
});
delay(10);
}
void loop() {
}
Code HTML :
( index.html )
<!DOCTYPE html>
<html lang="fr">
<head>
<title>ESPLOGIN</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
</head>
<body>
<center>
<div>
<br>
<p>Bienvenue sur votre serveur Web ESP32</p>
<p>Exemple authentification</p>
<a href="login">
<input type="button" value="LOGIN">
</a>
</div>
</center>
</body>
</html>
( login.html )
<!DOCTYPE html>
<html lang="fr">
<head>
<title>ESPLOGIN</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<center>
<div>
<p>Bienvenue</p>
<a href="#" onclick="logoutButton()">Logout</a>
</div>
</center>
</body>
</html>
( logout.html )
<!DOCTYPE html>
<html lang="fr">
<head>
<title>ESPLOGIN</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
</head>
<body>
<center>
<div>
<p>Déconnecté</p>
<a href="/">Retour à la page d'accueil</a>.
</div>
</center>
</body>
</html>
Code Javascript :
( script.js )
function logoutButton() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/logout", true);
xhr.send();
setTimeout(function(){ window.open("/logged-out","_self"); }, 1000);
}
