Python: Webový prihlasovací formulár II./ 11. časť

0

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_.png,

- 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

Marek Sopko

Všetky autorove články

Pridať komentár

Mohlo by vás zaujímať

Mohlo by vás zaujímať