Python: Webový prihlasovací formulár II./ 11. časť
V tomto článku dokončíme opis algoritmu webového prihlasovacieho formulára verzie 1.0. Zameriame sa pri tom na viaceré dôležité detaily algoritmu. V úvode uvedieme adresárovú štruktúru aplikácie s umiestnením jej jednotlivých súborov. Potom sa zameriame na význam a funkcionalitu jej konkrétnych modulov Python a súborov HTML.
Adresárová štruktúra
Umiestnenie jednotlivých súborov aplikácie cars_v1 dodržuje pravidlá stanovené frameworkom Flask. V koreňovej zložke sú umiestnené súbory = moduly obsahujúce kód Pythonu, pomocou ktorého je vytvorená aplikácia Flask a tzv. blueprinty. Zložku static sme použili z dôvodu ukladania obrázka – QR kódu, ktorý následne načítava príslušná stránka HTML. Kód HTML jednotlivých webových stránok je umiestnený v zložke templates:
cars_v1
auth.py
cars.db
__init__.py
inner.py
outer.py
static
otp_email.png
templates
base.html
index.html
inside
index.html
login.html
otp.html
register.html
Princíp fungovania
Naša aplikácia WSGI štartuje v module __init__.py. Prvý a najdôležitejší krok je vytvorenie objektu Flask. Hneď potom priraďujeme atribútu secret_key kľúč potrebný na podpisovanie session cookies a nastavujeme názov databázového súboru cars.db. Ďalej nasleduje vytvorenie objektu SQLAlchemy a definícia triedy User, prostredníctvom ktorej riešime komunikáciu s databázou. Tú reprezentuje súbor cars.db, ktorý, samozrejme, dokážeme otvoriť a spravovať v akomkoľvek sqlite nástroji (napr. aj pomocou sqlitebrowser). Následne vytvárame objekt LoginManager, špecifikujeme funkciu, ktorá sa vykoná v prípade, ak nebude používateľ autentifikovaný v rámci flask-login, a definujeme povinnú callback funkciu load_user().
Na konci súboru __init__.py registrujeme tri tzv. blueprinty. Flask pomocou blueprintov organizuje jednotlivé webové stránky, ktoré sú odpoveďou webového servera na požiadavky (requests) používateľov. V našom prípade sme vytvorili tri blueprinty:
1. outer – definuje cestu (route) / a pomocou funkcie index() zobrazuje stránku index.html,
2. auth – definuje cesty /register, /otp, /login, /logout a pomocou funkcií register(), register_post(), otp(), otp_post(), login(), login_post() a logout() zobrazuje stránky register.html, otp.html, login.html a index.html,
3. inner – definuje cestu /inside a pomocou funkcie index() zobrazuje stránku inside/index.html.
Úvod
Neprihlásenému používateľovi sa zobrazí stránka index.html so stručným opisom aplikácie. V prípade, ak neprihlásený používateľ ručne zadá URL /inside, resp. /logout, Flask vykoná funkciu inner_page.index(), resp. auth_page.logout(). Tie sú však označené tzv. dekorátorom @login_required, a pretože používateľ nie je prihlásený (ešte sa nevykonala funkcia login_user()), Flask automaticky zobrazí stránku definovanú pomocou LoginManager.login_view. Neprihlásený používateľ teda môže zobraziť iba úvodnú stránku (funkcia outer_page.index()) a stránku určenú na registráciu (auth_page.register()) alebo prihlásenie (auth_page.login()).
Obr. 1 Registračný a prihlasovací formulár
Registrácia
Registrácia používateľa sa začína zadaním jeho e-mailovej adresy a hesla. Po stlačení tlačidla Zaregistruj ma sa spustí funkcia auth_page.register_post(), v rámci ktorej sa vykoná:
- kontrola vloženia e-mailu a hesla,
- kontrola existencie e-mailu v databáze,
- pridanie používateľa do databázy (nový riadok = zadaný e-mail a haš hesla),
- spustenie funkcie auth_page.otp(), a to pomocou funkcie presmerovania redirect().
Vo funkcii auth_page.otp() sa:
- vytvorí obrázok s QR kódom pomocou funkcie qrcode.make(),
- obrázok uloží do zložky static pod názvom otp_
- zobrazí stránka otp.html, v rámci ktorej sa zobrazí uložený obrázok (QR kód) so stručným opisom ďalšej činnosti,
- po stlačení tlačidla Hotovo sa spustí funkcia auth_page.otp_post(), pomocou ktorej dôjde k presmerovaniu používateľa na stránku login.html.
Prihlásenie
Na úspešné prihlásenie sa používateľa treba zadať zaregistrovanú e-mailovú adresu, heslo a navyše OTP kód, ktorý vygeneruje aplikácia bežiaca napr. v smartfóne. Uvedený proces je riešený vo funkcii auth_page.login_post(), v rámci ktorej sa vykonáva:
- kontrola vloženia e-mailu, hesla a OTP kódu,
- kontrola existencie e-mailu a korešpondujúceho hesla (rovnosť hašov) v databáze,
- kontrola rovnosti OTP kódov,
- autentifikácia používateľa pomocou funkcie flask_login.login_user(),
- presmerovanie používateľa na stránku inside/index.html.
Odhlásenie
Prihlásený, resp. autentifikovaný používateľ zostáva v tejto pozícii počas celej session, čo zabezpečuje modul flask_login. Používateľ môže v tomto momente zobrazovať všetky stránky vrátane tých, ktoré sú označené dekorátorom @login_required. Samozrejme, že hovoríme iba o autentifikácii používateľa s tým, že jeho ďalšie správanie sa na našom portáli musíme naďalej kontrolovať programovo v rámci aplikácie. V tomto momente neriešime autorizáciu používateľa na vykonávanie konkrétnych činností. Používateľ zostáva prihlásený až do okamihu vykonania funkcie auth_page.logout(), v rámci ktorej dôjde k spusteniu funkcie flask_login.logout_user() a presmerovaniu na úvodnú stránku index.html.
Obr. 2 Interný web aplikácie, dostupný iba po prihlásení
Templates
Flask používa na uloženie súborov s kódom HTML tzv. Jinja template systém. V zložke template sa v prípade našej aplikácie nachádza 6 súborov:
1. base.html – základná webová stránka s definíciou hlavičky a tela dokumentu HTML, obsahuje navigačný panel (menu) aplikácie, ktorého jednotlivé položky sú zobrazované na základe stavu prihlásenia sa používateľa (flask_login.current_user.is_authenticated), base.html je základný Jinja template súbor, ktorý sa následne využíva, resp. rozširuje ostatnými template súbormi pomocou výkonného výrazu {% extends "base.html" %},
2. index.html – úvodná stránka aplikácie so stručnými informáciami o použitých komponentoch,
3. register.html – stránka obsahujúca registračný formulár,
4. otp.html – stránka zobrazuje QR kód, ktorý možno naskenovať v aplikácii FreeOTP alebo v inom generátore OTP kódov, pomocou generátora OTP neskôr získame kódy potrebné na prihlásenie,
5. login.html – stránka obsahujúca prihlasovací formulár,
6. inside/index.html – interná stránka aplikácie dostupná iba po prihlásení sa používateľa.
Zobrazit Galériu
