9. diel - Webový server na module ESP-32 - Autentizácia užívateľa

V predchádzajúcej lekcii, Spracovanie dát z HTML formulára na module ESP-32 , sme si ukázali, ako môžeme spracovávať dáta z HTML formulára na stránke bežiacej na webovom serveri na ESP32.

V tomto tutoriále Internetu vecí s ESP-32 sa spoločne budeme naposledy venovať webovému serveru. Ukážeme si, akým spôsobom je možné webový server zabezpečiť pred nežiaducimi návštevníkmi. Popíšeme si, čo je to autentizácia a nastavíme serveru prihlasovacie meno a heslo, vďaka ktorým bude možné obsah na serveri zobraziť.

Čo je to autentizácia

Aby sme vôbec mohli začať pracovať s autentizáciou ako takou, mali by sme o nej poznať aspoň základné informácie. Ide o proces overovanej proklamovanej identity subjektu, čo je v podstate len overenie, či osoba požadujúca akúkoľvek operáciu má k tejto operácii prístup alebo nie. Existujú rôzne typy autentizácie, ako napr. biometrické overenie alebo viacfázové overenie, s tým si ale my nebudeme lámať hlavu. V našom prípade webového servera použijeme prihlasovacie meno a heslo.

Príprava projektu

Ak rozumieme pojmu autentizácia, poďme postupne začať riešiť čiastkové časti projektu. V tomto projekte budeme po prihlásení k webovému serveru tlačidlom rozsvecovať resp. zhasínať LED diódu. Poďme si teda ukázať schému zapojenia:

Súbor so štruktúrou HTML stránky

V tomto projekte opäť využijeme nám už dobre známe rozhranie SPIFFS, aby sa náš program pre mikrokontrolér trošku zjednodušil. Poďme si preto teraz zostaviť súbor index.html. Súbor vložíme ho do podzložky data/ v pracovnom adresári nášho projektu. Jeho obsah bude vyzerať takto:

Reťazec %STAV% nám poslúži ako placeholder pre aktuálnu hodnotu na LED dióde. Obsah tohto reťazca sa dynamicky prepíše po kliknutí na tlačidlo na stránke.

Program pre ESP-32

Ak máme všetko zapojené a máme vytvorený HTML súbor, poďme sa teraz vrhnúť na to najdôležitejšie, a to na kód pre mikrokontrolér. Tento program sa opäť nebude príliš líšiť od predchádzajúcich programov, skĺbime však dohromady ako ovládanie diódy cez webový server, tak aj proces autentizácie. Začnime teda opäť hlavičkou:

Použijeme opäť tri knižnice, ktoré používame niekoľko lekcií za sebou, poďme si ich napriek tomu ľahko zrekapitulovať. Knižnica WiFi.h nám umožní prácu s Wi-Fi sieťou. Táto knižnica je v základnej konfigurácii IDE a nie je nutné ju zvlášť inštalovať. To však neplatí o knižnici ESPAsyncWebServer.h, ktorú je potrebné stiahnuť a nainštalovať. V predchádzajúcich lekciách sme si vysvetľovali ako na to. Nakoniec tiež potrebujeme knižnicu pre prácu s rozhraním SPIFFS, zahrnieme teda aj knižnicu SPIFFS.h, ktorá je tiež v základnej konfigurácii.

Reťazce ssid a password obsahujú názov Wi-Fi siete a heslo k nej. Ďalšie dva reťazce http_login a http_heslo obsahujú prihlasovacie meno a heslo na prístup na náš webový server.

V tomto prípade použijeme ako prihlasovacie meno a heslo ten istý reťazec. Z hľadiska bezpečnosti to nie je optimálne riešenie hneď z niekoľkých všeobecne známych dôvodov. Na náš účel demonštrácie prístupu to však postačí. V praxi by bolo vhodné ukladať tieto údaje do zabezpečenej databázy a hashovať ich.

Konštanta ledPin obsahuje číslo pinu, ku ktorému je pripojená LED dióda a reťazec ledStav slúži na uchovávanie informácie o aktuálnom stave na LED dióde.

Funkcia zpracuj()

Poďme si teraz vytvoriť funkciu zpracuj(), vďaka ktorej budeme meniť hodnotu placeholderu %STAV% v HTML dokumente:

Túto funkciu budeme volať pri každom spracovávaní požiadavky zo servera. Funkcia vyhodnotí, či je parameter funkcie zhodný s reťazcom STAV a pokiaľ áno, zisťuje aktuálny stav na LED dióde. Ten vloží do premennej ledStav, ktorá je potom vypísaná namiesto placeholdera %STAV%. V prípade, že parameter nie je zhodný, vracia funkcia prázdny reťazec.

Funkcia setup()

Nakoniec si poďme predstaviť a popísať funkciu setup(), ktorá obsahuje hlavnú logiku tohto projektu: Pred akýmkoľvek spracovávaním požiadaviek z webového klienta poďme overiť, či všetko funguje správne. Najprv nastavme výstup sériového monitora na 115200 Baudov a pomocou funkcie pinMode() nastavíme pin 32 ako výstupný. Potom budeme vypisovať informáciu o pripájaní k Wi-Fi sieti pokiaľ sa mikrokontrolér nepripojí. Po pripojení vypíšeme do monitora IP adresu webového servera. Nakoniec overíme, či sa v poriadku nastavilo rozhranie SPIFFS. Až potom sa pustíme do spracovania požiadaviek a nastavenia autentizácie servera. Pokračujme teda v tvorbe setup() práve autentizáciou:

Hneď po načítaní stránky sa spustí autentizačná podmienka. Kým používateľ nezadá správne prihlasovacie meno a heslo, na server nebude mať prístup a nebude mu umožnené ovládať LED diódu. Akonáhle používateľ prejde autentizáciou, zobrazí sa mu stránka servera, ktorej štruktúru obsahuje súbor index.html.

Pre našu ukážku sme použili ako pre prihlasovacie meno, tak aj pre heslo reťazec admin.

Nakoniec určíme, čo sa má vykonať po kliknutí na príslušné tlačidlá: Tým máme funkciu setup() hotovú. Po kliknutí na tlačidlo ZAPNÚŤ sa do URL adresy vloží reťazec on. Ten prečítame, zmeníme hodnotu na LED dióde a zmeníme hodnotu placeholdera. V opačnom prípade po kliknutí na tlačidlo VYPNÚŤ sa do URL adresy vloží reťazec off a LED dióda zhasne.

Funkcia loop()

Toto boli posledné kroky v programe, pretože funkcia loop() zostane prázdna:

Poďme si teraz ukázať výsledok nášho projektu.

Výstup na prehliadači

Po zadaní IP adresy zo sériového monitora do prehliadača dostaneme tento pohľad:

Keď zadáme správne prihlasovacie meno a heslo, zobrazí sa nám celá stránka:

Zdrojové kódy sú priložené v archíve pod lekciou.

V budúcej lekcii, Bluetooth Low Energy na module ESP-32 - Úvod , sa zoznámime s teoretickým základom služby Bluetooth Low Energy.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.