Arduino - Déverrouillage par modèle Web
Composants et fournitures
![]() |
| × | 1 | |||
![]() |
| × | 1 | |||
| × | 1 | ||||
| × | 1 |
À propos de ce projet
Présentation
Si vous êtes débutant, je vous recommande de lire les tutoriels suivants :
- Arduino - Moteur
- Arduino - Servomoteur
- Arduino - Wi-Fi
Vous connaissez peut-être le schéma de déverrouillage lorsque vous accédez à votre téléphone. Maintenant, cette fonctionnalité est disponible sur Arduino. Il empêche les personnes non autorisées de contrôler/surveiller Arduino.
L'utilisateur peut librement réutiliser le code de ce projet pour d'autres applications. Par souci de simplicité, je prends le contrôle du servomoteur comme exemple.
Cette idée provient de deux projets, écrits pour la plate-forme PHPoC :
- https://www.hackster.io/iot_lover/web-based-pattern-unlock-for-iot-device-aeaf44.
- https://forum.phpoc.com/articles/tutorials/350-servo-motor-controlling-servo-motor-via-websocket-with-graphic-ui
Je les adapte pour Arduino.
Dans ce projet, j'ai utilisé PHPoC WiFi Shield pour connecter Arduino à Internet car :
- PHPoC Shield prend en charge Websocket, ce qui est pratique pour ce projet.
- PHPoC Shield dispose d'un serveur Web intégré dédié, permettant de stocker l'application Web intégrée sur le shield.
PHPoC Shield a des applications Web intégrées qui permettent à l'utilisateur d'utiliser une application Web intégrée pour contrôler/surveiller Arduino sans avoir besoin de connaissances en programmation Web.
De plus, PHPoC Shield permet aux utilisateurs qui peuvent programmer une application Web de développer leur propre application Web et de la stocker sur PHPoC Shield.
Démonstration
Flux de données
Navigateur Web <---> PHPoC WiFi Shield <---> Arduino

Comment ça marche
Lorsque l'utilisateur dessine son motif sur un navigateur Web, le motif est mappé sur une chaîne. Cette chaîne de modèle est envoyée à Arduino via WebSocket (via PHPoC Shield).
Lorsque Arduino reçoit la chaîne de modèle d'entrée, il comparera la chaîne reçue avec la chaîne de modèle codée en dur dans Arduino. S'ils correspondent, Arduino renvoie le code ACCEPTÉ au client (navigateur Web) et définit la variable authentifiée à vrai. Sinon, Arduino envoie le code REFUSÉ au client et définit la variable authentifiée à faux.
Lorsque Arduino reçoit une commande de contrôle de l'utilisateur, il vérifie la valeur de la variable authentifiée première. Si la valeur est vraie, il exécute la tâche correspondant à la commande. Si la valeur est fausse, il envoie le code REFUSÉ au client.
Mappage de motifs

Le motif sera mappé sur une chaîne. Par exemple, dans l'image ci-dessus, la chaîne de motif est "1, 4, 8, 6, 3".
Un délai d'attente est défini. Après un certain temps, si l'utilisateur n'a aucune activité, l'authentification a expiré, l'utilisateur doit saisir à nouveau le motif pour déverrouiller Arduino.
Le code source comprend deux fichiers :
- ArduinoUnlockExample.ino :est compilé et téléchargé sur Arduino via Arduino IDE
- unlock.php :il s'agit du code de l'application Web, il est téléchargé sur PHPoC shield via PHPoC Debugger.
Ce que nous devons faire
- Définir les informations Wifi pour le bouclier PHPoC (SSID et mot de passe)
- Télécharger la nouvelle interface utilisateur vers le bouclier PHPoC
- Écrire le code Arduino
Définition des informations Wifi pour PHPoC Shield
Voir cette instruction.
Télécharger la nouvelle interface utilisateur Web vers PHPoC Shield
- Téléchargez le code source PHPoC unlock.php (dans la section code).
- Télécharger les deux images suivantes pour contrôler le servomoteur


- Téléchargez-le sur PHPoC Shield à l'aide du débogueur PHPoC conformément à cette instruction (notez que ne supprimez PAS le fichier existant sur PHPoC Shield)
Écrire le code Arduino
- Installez la bibliothèque PHPoC pour Arduino sur Arduino IDE (voir les instructions)
- Voir le code source dans la section code.
- Compiler et télécharger sur Arduino via Arduino IDE
Essayez-le
- Cliquez sur le bouton série sur Arduino IDE pour voir l'adresse IP.
- Ouvrez le navigateur Web, saisissez
http://
replace_ip_address
/unlock.php
- Cliquez sur le bouton de connexion et testez-le.
Le meilleur kit de démarrage Arduino pour débutant
Si vous recherchez un kit Arduino, consultez Le meilleur kit Arduino pour les débutants
Références de fonction
- Arduino - Bibliothèque Servo
- Servo.attach()
- Servo.write()
- Servo.writeMicroseconds()
- Servo.read()
- Servo.attaché()
- Servo.detach()
- Serial.begin()
- Série.println()
- retard()
- millis()
- boucle for
- boucle while
- si autre
- boucle()
- configuration()
- String.toInt()
- String.substring()
- Chaîne.indexOf()
- Chaîne.remove()
- Chaîne.égales()
Code
- unlock.php
- Exemple de déverrouillage Arduino
unlock.phpPHP
Ceci est l'interface utilisateur WebArduino - PHPoC Shield
Arduino - Déverrouillage par modèle Web
WebSocket :null
ArduinoUnlockExampleArduino
/* serveur Web arduino - déverrouillage par motif */#include "SPI.h"#include "Phpoc.h"#include#define CMD_AUTH 0#define CMD_CTRL 1#define ACCEPTED "202"#define Serveur PhpocServer "401" NON AUTORISÉ (80 ); Servo servo ; Modèle de chaîne ; bool authentifié ; long timeout non signé ; long lastActiveTime non signé ; void setup() { Serial.begin (9600); while(!Série); Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); //Phpoc.begin(); server.beginWebSocket("web_pattern"); Serial.print("Adresse du serveur WebSocket :"); Serial.println(Phpoc.localIP()); attache.servo(8) ; // attache le servo sur la broche 8 à l'objet servo servo.write(90); motif =String("1,4,8,6,3"); authentifié =faux ; délai d'attente =10000 ; // 10000 millisecondes lastActiveTime =0;}void loop() { // attend un nouveau client :PhpocClient client =server.available(); if (client) { String data =client.readLine(); if(data) { int pos =data.indexOf(':'); int cmd =data.substring(0, pos).toInt(); if(cmd ==CMD_AUTH) { String reqPattern =data.substring(pos+1); reqPattern.remove(reqPattern.indexOf(13)); reqPattern.remove(reqPattern.indexOf(10)); if(pattern.equals(reqPattern)) { authentifié =vrai ; sendResponse(ACCEPTÉ, 3); lastActiveTime =millis(); } else { //Serial.print(reqPattern); authentifié =faux ; sendResponse(NON AUTORISÉ, 3); } } else if(cmd ==CMD_CTRL) { if(authentifié) { int angle =data.substring(pos+1).toInt(); //angle =carte(angle, -90, 90, 0, 180); angle =carte(angle, 90, -90, 0, 180); servo.write(angle); lastActiveTime =millis(); Serial.println(angle); } else { sendResponse(UNAUTHORIZED, 3); } } } } if (authentifié &&((millis() - lastActiveTime)> timeout)){ authentifié =false; sendResponse(NON AUTORISÉ, 3); }}void sendResponse(char *data, int len) { server.write(data, len); }
Schémas

Processus de fabrication