Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python
Code

Stwórz od zera aplikację internetową w Python Flask i MySQL: Część 2

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Creating a Web App From Scratch Using Python Flask and MySQL.
Creating a Web App From Scratch Using Python Flask and MySQL
Creating a Web App From Scratch Using Python Flask and MySQL: Part 3

Polish (Polski) translation by Katarzyna Kapusta (you can also view the original English article)

W poprzednim odcinku serii nauczyliśmy się, jak zacząć pracę z Python Flask i MySQL, i zaimplementowaliśmy część aplikacji odpowiedzialną za rejestrację użytkownika. W tym samouczku wejdziemy o poziom wyżej - zaprogramujemy funkcjonalności logowania i wylogowania.

Zaczynamy

Na początek sklonuj kod źródłowy z poprzedniego tutorialu z GitHub.

Po sklonowaniu kodu źródłowego przejdź do katalogu PythonFlaskMySQLApp---Part-1 i uruchom serwer.

Wpisz w okienko przeglądarki http://localhost:5002 - aplikacja powinna się uruchomić.

Tworzymy interfejs logowania

Przejdź do PythonFlaskMySQLApp---Part-1/templates i utwórz nowy plik o nazwie signin.html. Otwórz signin.html i wklej do niego następujący kod HTML:

Otwórz app.py i dodaj nowe przekierowanie dla interfejsu rejestracji.

Teraz otwórz index.html oraz signup.html i wstaw na obu stronach link href do strony logowania z adresem /showSignin. Zapisz wszystkie zmiany i zrestartuj serwer .

Wejdź na http://localhost:5002 i kliknij łącze Sign In - powinna się wyświetlić strona logowania.

Sign In page

Implementujemy logowanie

Teraz potrzebna będzie funkcja, która pozwoli nam sprawdzić, czy użytkownik zalogował się poprawnie. Po kliknięciu w Sign In odeślemy podany adres e-mail wraz z hasłem do funkcji zatwierdzania użytkownika.

Tworzymy procedurę składowaną

Do sprawdzenia użytkownika będziemy potrzebowali procedury składowanej MySQL. Utwórz więc procedurę składowaną MySQL zgodnie z przykładem:

Dane użytkownika sprawdzimy przy pomocy procedury sp_validateLogin na podstawie loginu (username) zapisanego w bazie MySQL. Zakodowane hasło z bazy porównamy z hasłem podanym przez użytkownika.

Metoda zatwierdzania użytkownika

Utwórz metodę do zatwierdzania użytkownika, która zostanie wywołana, gdy użytkownik prześle formularz:

Jak widać w powyższym kodzie, przypisaliśmy podany adres e-mail i hasło do zmiennych _username i _password. Teraz wywołamy procedurę  sp_validateLogin z parametrem  _username. Utwórz zatem połączenie MySQL wewnątrz metody validateLogin:

Gdy już mamy ustanowione połączenie, utwórz kursor (cursor), korzystając z połączenia con.

Korzystając z kursora, wywołaj procedurę składowaną MySQL:

Za pomocą kursora, wywołaj procedurę składowaną, jak w przykładzie:

Jeśli pod podanymi danymi istnieje jakiś zapis, porównamy hasło z bazy z tym wprowadzonym przez użytkownika.

Jak widać w powyższym kodzie, do sprawdzenia, czy podane hasło odpowiada zaszyfrowanemu hasłu z bazy, korzystamy z metody check_password_hash. Jeśli wszystko się zgadza, przekierowujemy użytkownika na stronę userHome.html. A jeśli wkradł się jakiś błąd, wyświetlamy error.html z komunikatem o błędzie.

Oto pełny kod funkcji validateLogin:

Utwórz stronę o nazwie userHome.html w folderze szablonów (templates) i dodaj następujący kod HTML:

W tym samym folderze templates utwórz stronę z komunikatem o błędzie  error.html i umieść na niej następujący kod:

Wewnątrz error.html znalazł się taki element:

Wartość zmiennej zostanie nadana przez funkcję render_template i przypisana dynamicznie.

Po pomyślnym zalogowaniu przekierujemy użytkownika do indywidualnej strony głównej, musimy więc utworzyć przekierowanie o nazwie /userHome, jak w przykładzie:

Zapisz wszystkie zmiany i zrestartuj serwer. Kliknij łącze Sign In na stronie głównej i spróbuj zalogować się przy użyciu adresu e-mail i hasła. Po pomyślnym zalogowaniu powinna się wyświetlić taka strona:

User home on successful user sign in

W przypadku nieudanego logowania użytkownik zostanie przekierowany do strony o błędzie:

Error message on unsuccessful user sign in

Do wyświetlenia komunikatu o błędzie użyliśmy osobnej strony. Można jednak również wyświetlić go na tej samej stronie.

Ograniczanie nieautoryzowanego dostępu do strony użytkownika

Po pomyślnym zalogowaniu użytkownik zostanie przekierowany na swoją stronę domową. Póki co jednak nawet niezarejestrowany użytkownik może ją zobaczyć, gdy tylko wpisze URL http://localhost:5002/userHome.

Aby uniemożliwić dostęp nieautoryzowanym użytkownikom, będziemy sprawdzać zmienną sesji, przypisywaną w momencie pomyślnego logowania użytkownika. Zaimportuj zatem flaskową bibliotekę session:

Musimy nadać sesji tajny klucz. W app.py, po inicjalizacji aplikacji, przypisz klucz sesji w taki sposób:

Teraz wewnątrz metody validateLogin, przed przekierowaniem użytkownika do /userHome po pomyślnym zalogowaniu, ustaw zmienną sesji session jak pokazano:

A teraz, wewnątrz metody userHome, sprawdź zmienną sesji przed wyrenderowaniem userHome.html. Jeśli zmiennej sesji brakuje, przekieruj użytkownika do strony o błędzie.

Zapisz wszystkie zmiany i uruchom ponownie serwer. Spróbuj, bez logowania, wejść na stronę http://localhost:5002/userHome. Ponieważ logowania nie było, powinieneś zobaczyć stronę o błędzie.

Unauthorized access error

Implementacja wylogowania

Funkcjonalność wylogowania jest najłatwiejsza do implementacji. Wystarczy nadać zmiennej sesji user wartość null i przekierować użytkownika na stronę główną.

Wewnątrz app.py utwórz nowe przekierowanie i metodę wylogowania (logout), jak w przykładzie:

Ustawiliśmy już href dla przycisku 'wyloguj się' (log out) na adres /logout. Zapisz zatem wszystkie zmiany i uruchom ponownie serwer. Będąc na stronie głównej, kliknij przycisk Sign in i spróbuj się zalogować, używając właściwego adresu e-mail i hasła. Po zalogowaniu, kliknij przycisk Logout na stronie użytkownika - powinieneś zostać pomyślnie wylogowany.

Podsumowanie

W tej części tutorialu zobaczyliśmy, jak można zaimplementować funkcjonalności logowania i wylogowywania. Nauczyliśmy się też odcinać dostęp do stron aplikacji nieuprawnionym użytkownikom. W kolejnej części tutorialu umożliwimy zalogowanemu użytkownikowi dodawanie i edycję wpisów blogowych w ramach aplikacji.

Kod źródłowy z tego tutorialu znadziesz na GitHub.

Daj nam znać, co sądzisz o tym artykule, w komentarzach poniżej!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.