Système de gestion des utilisateurs RFID ESP32 avec serveur Web

View raw code

Copy the following to the add-user.html file.

    
    
    Add User
    


    
    
        

            
➕ Add User
            
Enter the UID in lower case letters and no spaces.


            
        
    

Afficher le code brut

Copiez ce qui suit dans le fichier get.html.

    
    
    Add User
    


    
    

Afficher le code brut

Fichier CSS

Copiez ce qui suit dans le fichier style.css. N'hésitez pas à le modifier pour que la page Web ait l'air comme vous le souhaitez.

/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* Navigation Bar Styles */
nav {
    width: 100%;
    background-color: #333;
    padding: 1rem 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

.brand {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
}

.nav-menu {
    list-style-type: none;
    display: flex;
}

.nav-menu li {
    margin-left: 1.5rem;
}

.nav-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s;
}

.nav-menu a:hover, .nav-menu a.active {
    color: #f4f4f9;
}

.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    width: 100%;
}

.main-section {
    max-width: 500px;
    padding: 2rem;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.main-section h2 {
    margin-bottom: 1rem;
    color: #333;
}

.user-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #333;
}

.user-form input, .user-form select {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.user-form button {
    width: 100%;
    padding: 0.7rem;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.user-form button:hover {
    background-color: #555;
}


.button {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition-duration: 0.4s;
}

.button-delete {
    background-color: #780320;
    color: #fff;
}

.button-home {
    background-color: #333;
    color: #fff;
}

#tableData {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
#tableData td, #tableData th {
    border: 1px solid #ddd;
    padding: 8px;
}

#tableData tr:nth-child(even) {
    background-color: #f2f2f2;
}

#tableData tr:hover {
    background-color: #ddd;
}

#tableData th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #1f1f1f;
    color: white;
}

Afficher le code brut

Code - ESP32 RFID User Management System Server Web

Le code suivant gère le serveur Web pour gérer le système de gestion des utilisateurs RFID, comme expliqué dans l'aperçu du projet.

/*********
  Rui Santos & Sara Santos - Raspberryme.com
  Complete instructions at https://Raspberryme.com/esp32-rfid-user-management-web-server/
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/
#include 
#include 
#include 
//#include 
#include 
#include 

#include 
#include 
#include 

#include "FS.h"
#include "SD.h"
#include "SPI.h"
#include 
#include 

// Learn more about using SPI/I2C or check the pin assigment for your board: https://github.com/OSSLibraries/Arduino_MFRC522v2#pin-layout
MFRC522DriverPinSimple ss_pin(5);

MFRC522DriverSPI driver{ss_pin}; // Create SPI driver
//MFRC522DriverI2C driver{};     // Create I2C driver
MFRC522 mfrc522{driver};         // Create MFRC522 instance

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

long timezone = 0;
byte daysavetime = 1;

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

const char* PARAM_INPUT_1 = "uid";
const char* PARAM_INPUT_2 = "role";
const char* PARAM_INPUT_3 = "delete";
const char* PARAM_INPUT_4 = "delete-user";

String inputMessage;
String inputParam;

const int ledPin = 22;
const int buzzerPin = 4;

// Write to the SD card
void writeFile(fs::FS &fs, const char * path, const char * message) {
  Serial.printf("Writing file: %s\n", path);

  File file = fs.open(path, FILE_WRITE);
  if(!file) {
    Serial.println("Failed to open file for writing");
    return;
  }
  if(file.print(message)) {
    Serial.println("File written");
  } else {
    Serial.println("Write failed");
  }
  file.close();
}

// Append data to the SD card
void appendFile(fs::FS &fs, const char * path, const char * message) {
  Serial.printf("Appending to file: %s\n", path);

  File file = fs.open(path, FILE_APPEND);
  if(!file) {
    Serial.println("Failed to open file for appending");
    return;
  }

  time_t t = file.getLastWrite();
  struct tm *tmstruct = localtime(&t);

  char bufferDate[50]; // Adjust buffer size as needed
  snprintf(bufferDate, sizeof(bufferDate), "%d-%02d-%02d", 
          (tmstruct->tm_year) + 1900, 
          (tmstruct->tm_mon) + 1, 
          tmstruct->tm_mday);
  char bufferTime[50]; // Adjust buffer size as needed
  snprintf(bufferTime, sizeof(bufferTime), "%02d:%02d:%02d", 
          tmstruct->tm_hour, 
          tmstruct->tm_min, 
          tmstruct->tm_sec);
          
  String lastWriteTime = bufferDate;
  String finalString = String(bufferDate) + "," + String(bufferTime) + "," + String(message) + "\n";
  Serial.println(lastWriteTime);
  if(file.print(finalString.c_str())) {
    Serial.println("Message appended");
  } else {
    Serial.println("Append failed");
  }
  file.close();
}

// Append data to the SD card
void appendUserFile(fs::FS &fs, const char * path, const char * message) {
  Serial.printf("Appending to file: %s\n", path);

  File file = fs.open(path, FILE_APPEND);
  if(!file) {
    Serial.println("Failed to open file for appending");
    return;
  }

  String finalString = String(message) + "\n";

  if(file.print(finalString.c_str())) {
    Serial.println("Message appended");
  } else {
    Serial.println("Append failed");
  }
  file.close();
}

void deleteFile(fs::FS &fs, const char *path) {
  Serial.printf("Deleting file: %s\n", path);
  if (fs.remove(path)) {
    Serial.println("File deleted");
  } else {
    Serial.println("Delete failed");
  }
}

String processor(const String& var){
  return String("HTTP GET request sent to your ESP on input field (" 
                + inputParam + ") with value: " + inputMessage +
                "
Return to Home Page");
}

void deleteLineFromFile(const char* filename, int lineNumber) {
  File file = SD.open(filename);
  if (!file) {
    Serial.println("Failed to open file for reading.");
    return;
  }

  // Read all lines except the one to delete
  String lines = "";
  int currentLine = 0;
  while (file.available()) {
    String line = file.readStringUntil('\n');
    if (currentLine != lineNumber) {
      lines += line + "\n";
    }
    currentLine++;
  }
  file.close();

  // Write back all lines except the deleted one
  file = SD.open(filename, FILE_WRITE);
  if (!file) {
    Serial.println("Failed to open file for writing.");
    return;
  }

  file.print(lines);
  file.close();
  Serial.println("Line deleted successfully.");
}

String getRoleFromFile(const char* filename, String uid) {
  File file = SD.open(filename);
  if (!file) {
    Serial.println("Failed to open file for reading.");
    return "";
  }

  // Skip the header line
  file.readStringUntil('\n');
  
  // Read each line and check for UID
  while (file.available()) {
    String line = file.readStringUntil('\n');
    
    int commaIndex = line.indexOf(',');
    if (commaIndex > 0) {
      String fileUID = line.substring(0, commaIndex);
      String role = line.substring(commaIndex + 1);

      // Compare UID
      if (fileUID == uid) {
        file.close();
        role.trim();  // Remove any extra spaces or newline characters
        return role;
      }
    }
  }
  file.close();
  return "";  // Return empty string if UID not found
}

void initRFIDReader() {
  mfrc522.PCD_Init();    // Init MFRC522 board.
  MFRC522Debug::PCD_DumpVersionToSerial(mfrc522, Serial);	// Show details of PCD - MFRC522 Card Reader details.
	Serial.println(F("Scan PICC to see UID"));
}

void initLittleFS() {
  if(!LittleFS.begin()){
    Serial.println("An Error has occurred while mounting LittleFS");
        return;
  }
}
void initWifi() {
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  // Print ESP32 Local IP Address
  Serial.print("ESP IP Address: ");
  Serial.println(WiFi.localIP());
}

void initTime() {
  Serial.println("CInitializing Time");
  struct tm tmstruct;
  delay(2000);
  tmstruct.tm_year = 0;
  getLocalTime(&tmstruct, 5000);
  Serial.printf(
    "Time and Date right now is : %d-%02d-%02d %02d:%02d:%02d\n", (tmstruct.tm_year) + 1900, (tmstruct.tm_mon) + 1, tmstruct.tm_mday, tmstruct.tm_hour, tmstruct.tm_min,
    tmstruct.tm_sec
  );
}

void initSDCard() {
  // CS pin = 15
  if (!SD.begin(15)) {
    Serial.println("Card Mount Failed");
    return;
  }
  uint8_t cardType = SD.cardType();

  if (cardType == CARD_NONE) {
    Serial.println("No SD card attached");
    return;
  }

  Serial.print("SD Card Type: ");
  if (cardType == CARD_MMC) {
    Serial.println("MMC");
  } else if (cardType == CARD_SD) {
    Serial.println("SDSC");
  } else if (cardType == CARD_SDHC) {
    Serial.println("SDHC");
  } else {
    Serial.println("UNKNOWN");
  }

  uint64_t cardSize = SD.cardSize() / (1024 * 1024);
  Serial.printf("SD Card Size: %lluMB\n", cardSize);

  // If the log.txt file doesn't exist, create a file on the SD card and write the header
  File file = SD.open("/log.txt");
  if(!file) {
    Serial.println("log.txt file doesn't exist");
    Serial.println("Creating file...");
    writeFile(SD, "/log.txt", "Date,Time,UID,Role\r\n");
  }
  else {
    Serial.println("log.txt file already exists");  
  }
  file.close();

  // If the users.txt file doesn't exist, create a file on the SD card and write the header
  file = SD.open("/users.txt");
  if(!file) {
    Serial.println("users.txt file doesn't exist");
    Serial.println("Creating file...");
    writeFile(SD, "/users.txt", "UID,Role\r\n");
  }
  else {
    Serial.println("users.txt file already exists");  
  }
  file.close();
}

void setup() {
  Serial.begin(115200);  // Initialize serial communication
  while (!Serial);       // Do nothing if no serial port is opened (added for Arduinos based on ATMEGA32U4).
  
  initRFIDReader();
  initLittleFS();
  initWifi();
  configTime(3600 * timezone, daysavetime * 3600, "time.nist.gov", "0.pool.ntp.org", "1.pool.ntp.org");
  initTime();
  initSDCard();

  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
  pinMode(buzzerPin, OUTPUT);
  digitalWrite(buzzerPin, LOW);

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/full-log.html");
  });
  // Route for root /add-user web page
  server.on("/add-user", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/add-user.html");
  });
  // Route for root /manage-users web page
  server.on("/manage-users", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/manage-users.html");
  });

  // Serve Static files
  server.serveStatic("/", LittleFS, "/");

  // Loads the log.txt file
  server.on("/view-log", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SD, "/log.txt", "text/plain", false);
  });
  // Loads the users.txt file
  server.on("/view-users", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SD, "/users.txt", "text/plain", false);
  });
  
  // Receive HTTP GET requests on /get?input=
  server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
    // GET input1 and input2 value on /get?input1=&input2=
    if (request->hasParam(PARAM_INPUT_1) && request->hasParam(PARAM_INPUT_2)) {
      inputMessage = request->getParam(PARAM_INPUT_1)->value();
      inputParam = String(PARAM_INPUT_1);
      inputMessage += " " + request->getParam(PARAM_INPUT_2)->value();
      inputParam += " " + String(PARAM_INPUT_2);

      String finalMessageInput = String(request->getParam(PARAM_INPUT_1)->value()) + "," + String(request->getParam(PARAM_INPUT_2)->value());
      appendUserFile(SD, "/users.txt", finalMessageInput.c_str());
    }
    else if (request->hasParam(PARAM_INPUT_3)) {
      inputMessage = request->getParam(PARAM_INPUT_3)->value();
      inputParam = String(PARAM_INPUT_3);
      if(request->getParam(PARAM_INPUT_3)->value()=="users") {
        deleteFile(SD, "/users.txt");
      }
      else if(request->getParam(PARAM_INPUT_3)->value()=="log") {
        deleteFile(SD, "/log.txt");
      }
    }
    else if (request->hasParam(PARAM_INPUT_4)) {
      inputMessage = request->getParam(PARAM_INPUT_4)->value();
      inputParam = String(PARAM_INPUT_4);
      deleteLineFromFile("/users.txt", inputMessage.toInt());
    }
    else {
      inputMessage = "No message sent";
      inputParam = "none";
    }
    request->send(LittleFS, "/get.html", "text/html", false, processor);
  });

  // Start server
  server.begin();
}

void loop() {
	// Reset the loop if no new card present on the sensor/reader. This saves the entire process when idle.
	if (!mfrc522.PICC_IsNewCardPresent()) {
		return;
	}

	// Select one of the cards.
	if (!mfrc522.PICC_ReadCardSerial()) {
		return;
	}

  // Save the UID on a String variable
  String uidString = "";
  for (byte i = 0; i < mfrc522.uid.size; i++) {
    if (mfrc522.uid.uidByte[i] < 0x10) {
      uidString += "0"; 
    }
    uidString += String(mfrc522.uid.uidByte[i], HEX);
  }
  Serial.print("Card UID: ");
  Serial.println(uidString);

  String role = getRoleFromFile("/users.txt", uidString);
  if (role != "") {
    Serial.print("Role for UID: ");
    Serial.print(uidString);
    Serial.print(" is ");
    Serial.println(role);
  } else {
    role = "unknown";
    Serial.print("UID: ");
    Serial.print(uidString);
    Serial.println(" not found, set user role to unknown");
  }
  String sdMessage = uidString + "," + role;
  appendFile(SD, "/log.txt", sdMessage.c_str());

  digitalWrite(buzzerPin, HIGH);
  digitalWrite(ledPin, HIGH);
  delay(500);
  digitalWrite(buzzerPin, LOW);
  delay(2500);
  digitalWrite(ledPin, LOW);
}

Afficher le code brut

Avant de télécharger le code, vous devez insérer vos informations d'identification réseau dans les lignes suivantes afin que l'ESP32 puisse établir une connexion Wi-Fi.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_SSID";

Ressources pour vous aider à comprendre le code

Ce code est assez long et nous n'expliquerons pas en détail comment il fonctionne car tous les sujets couverts ici ont déjà été expliqués dans les projets précédents.

Voici une liste des tutoriels que vous devriez consulter pour en savoir plus sur les sujets couverts ici:

1) Lecture de l'UID d'une balise RFID avec l'ESP32: ESP32: Débutant avec MFRC522 RFID Reader / Writer (Arduino IDE).

2) Obtenir un horodatage à l'aide d'un serveur NTP: ESP32 NTP Client-Server: Get Date and Heure (Arduino IDE).

3) Lecture et écriture de / vers la carte microSD: ESP32: Guide du module de carte microSD à l'aide d'Arduino IDE.

4) Datalogging avec l'ESP32: ESP32: comment enregistrer les données (10 façons différentes)

5) Création d'un serveur Web avec l'ESP32: une liste de tous nos projets de serveur Web.

6) Envoi de données à partir d'une page Web au formulaire ESP32 via HTML: Données d'entrée sur le formulaire HTML Formulaire ESP32 / ESP8266 Serveur Web à l'aide d'Arduino IDE.

7) Tout ce que vous devez savoir sur la création d'un serveur Web avec des fichiers HTML et CSS avec le serveur Web ESP32: Notre serveur Web avec ESP32 couvre de nombreux sujets en détail.

Télécharger le code et le dossier de données

Après avoir inséré vos informations d'identification réseau, enregistrez le code. Allez dans Sketch> Afficher le dossier Sketch et créez un dossier appelé DATA.

À l'intérieur de ce dossier, vous devez placer le HTML et les fichiers CSS fournis précédemment.

Téléchargement de l'image du système de fichiers

Téléchargez ces fichiers sur le système de fichiers: appuyez sur [Ctrl] + [Shift] + [P] sous Windows ou [⌘] + [Shift] + [P] sur macOS pour ouvrir la palette de commande. Recherchez le téléchargement Littlefs vers la commande PICO / ESP8266 / ESP32 et cliquez dessus.

Si vous n'avez pas cette option, c'est parce que vous n'avez pas installé le plugin de téléchargement de système de fichiers. Vérifiez ce tutoriel.

Important: assurez-vous que le moniteur série est fermé avant de télécharger sur le système de fichiers. Sinon, le téléchargement échouera.

Téléchargement du code

Ensuite, téléchargez le code sur votre carte ESP32. Assurez-vous que vous avez inséré vos informations d'identification réseau dans le code.

Lorsque tout est téléchargé avec succès, ouvrez le moniteur série à un taux en bauds de 115200. Appuyez sur le bouton ESP32 EN / RST et il devrait imprimer l'adresse IP ESP32.

Dépannage

Obtenez-vous cette erreur? Échec de l'affirmation: TCP_ALLOC /IDF/COMPONENTS/LWIP/LWIP/SRC/CORE/TCP.C:1851 (requis pour verrouiller la fonctionnalité de base TCPIP!)

Cela signifie que vous n'utilisez pas les bibliothèques recommandées. Vérifiez cette explication sur la façon de résoudre le problème.

Démonstration

Ouvrez un navigateur sur votre réseau local et saisissez l'adresse IP ESP32. Vous devez accéder à la page du serveur Web qui ressemble à ceci, il devrait avoir une table vierge par défaut.

Prenez une balise RFID et scannez-la dans le lecteur RFID. Chaque fois que vous numérisez une balise RFID, la LED devrait s'allumer et le buzzer piézo-éloigné bip brièvement. Dans votre moniteur de série Arduino IDE, l'UID de votre carte RFID sera imprimé:

À des fins de test, je recommande de numériser plusieurs balises RFID, afin que vous ayez plus de données affichées dans votre serveur Web. Ouvrez maintenant la page de journal complète de votre serveur Web, votre tableau doit être similaire:

Copiez l'UID de l'une de vos cartes RFID, veuillez noter qu'elle doit être dans des lettres inférieures et sans espaces (par exemple: BD31152B). Ensuite, ouvrez l'onglet Ajouter un utilisateur.

Tapez l'UID et sélectionnez le rôle (utilisateur ou administrateur). Enfin, cliquez sur le bouton «Enregistrer». Je vais répéter ce processus pour d'autres balises RFID à des fins de démonstration.

Maintenant, si vous parcourez la page Web des utilisateurs du gestionnaire:

Il charge une table avec tous les UID et leurs rôles utilisateur correspondants, vous pouvez cliquer sur «X» pour supprimer un utilisateur.

Scannez les balises RFID quelques fois de plus, puis ouvrez la page d'accueil du serveur Web. La table de journal doit avoir toutes les entrées avec un horodatage, UID et leurs rôles utilisateur correspondants.

Au bas des pages Web complètes du journal et des utilisateurs du gestionnaire, vous avez la possibilité de supprimer les fichiers log.txt et utilisateurs.txt de la carte microSD à tout moment.

Vous pouvez également accéder à la page du serveur Web de votre smartphone.

Emballage

Dans ce didacticiel, vous avez combiné différents sujets pour construire un système de gestion RFID et un enregistreur avec l'ESP32. Voici une liste des sujets que nous avons couverts: différentes fonctionnalités du serveur Web, obtenant un horodatage, la données de données, l'interfaçage d'un lecteur RFID, la lecture et l'écriture de fichiers sur une carte microSD, et bien plus encore.

Nous espérons que vous avez trouvé ce projet utile, si vous souhaitez en savoir plus sur le module RFID Reader / Writer avec l'ESP32 ou sur le module de carte microSD, vous pouvez lire les guides suivants:

Pour en savoir plus sur la création de serveurs Web avec l'ESP32, consultez notre ebook:

Si vous souhaitez en savoir plus sur l'ESP32 et pour l'inspiration pour les nouveaux projets, assurez-vous de jeter un œil à nos ressources:

Merci d'avoir lu.

Cette vidéo vous emmène dans l'histoire de Raspberry Pi :