V předchozí části této série jsme viděli, jak začít s Python Flask a MySQL, a implementovali jsme část naší aplikace pro registraci uživatelů. V tomto tutoriálu to posuneme na další úroveň implementací funkcí přihlášení a odhlášení pro naši aplikaci.
Začínáme
Nejprve naklonujte zdrojový kód předchozího tutoriálu z GitHubu.
git clone https://github.com/tutsplus/create-a-web-app-from-scratch-using-python-flask-and-mysql/.git
Po naklonování zdrojového kódu přejděte k části 1 adresář a spusťte server.
python app.py
Nasměrujte svůj prohlížeč na https://localhost:5000 a měli byste mít aplikaci spuštěnou.
Vytvoření přihlašovacího rozhraní
Přejděte na FlaskApp/šablony a vytvořte nový soubor s názvem signin.html . Otevřete signin.html a přidejte následující kód HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Python Flask Bucket List App - Sign In</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link href="../static/signup.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="header">
<nav
class="border-bottom flex-wrap mb-4 py-3 d-flex justify-content-center"
>
<a
href="/"
class="text-dark text-decoration-none mb-3 mb-md-0 d-flex align-items-center me-md-auto"
>
<span class="fs-4">Python Flask App</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/signup" class="nav-link">Signup</a>
</li>
<li class="nav-item">
<a href="/signin" class="nav-link active" aria-current="page"
>Sign In</a
>
</li>
</ul>
</nav>
</div>
<div class="bg-light rounded-3 mb-4 p-5">
<div class="container-fluid py-5">
<h1 class="text-center fw-bold display-5">Bucket List App</h1>
<form class="form-signin" action="/api/validateLogin" method="post">
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" name="inputEmail" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="inputPassword" id="inputPassword" class="form-control" placeholder="Password" required>
<button id="btnSignIn" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
<footer class="footer">
<p>© Company 2022</p>
</footer>
</div>
</body>
</html>
Otevřete app.py a přidejte novou trasu pro přihlašovací rozhraní.
@app.route('/signin')
def showSignin():
return render_template('signin.html')
Dále otevřete index.html a signup.html a přidejte href odkaz pro přihlášení na obou stránkách jako /signin . Uložte všechny změny a restartujte server.
python app.py
Nasměrujte svůj prohlížeč na http://localhost:5000 a klikněte na Přihlásit se a měli byste vidět přihlašovací stránku.
Implementace přihlášení
Nyní musíme vytvořit funkci pro ověření přihlášení uživatele. Po kliknutí na Přihlásit se , zašleme zadanou e-mailovou adresu a heslo do funkce ověření uživatele.
Vytvoření uložené procedury
K ověření uživatele budeme potřebovat uloženou proceduru MySQL. Vytvořte tedy uloženou proceduru MySQL, jak je znázorněno:
DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_validateLogin`(
IN p_username VARCHAR(20)
)
BEGIN
select * from tbl_user where user_username = p_username;
END$$
DELIMITER ;
Údaje o uživateli získáme na základě username z databáze MySQL pomocí sp_validateLogin . Jakmile budeme mít hashované heslo, ověříme ho podle hesla zadaného uživatelem.
Ověřte metodu uživatele
Vytvořte metodu pro ověření uživatele, kterou zavoláme, když uživatel odešle formulář:
@app.route('/api/validateLogin',methods=['POST'])
def validateLogin():
try:
_username = request.form['inputEmail']
_password = request.form['inputPassword']
except Exception as e:
return render_template('error.html',error = str(e))
Jak je vidět ve výše uvedeném kódu, přečetli jsme zaslanou e-mailovou adresu a heslo do _username a _password . Nyní zavoláme sp_validateLogin procedura s parametrem _username . Vytvořte tedy připojení k MySQL uvnitř validatelogin metoda:
con = mysql.connect()
Po vytvoření připojení vytvořte cursor pomocí con připojení.
cursor = con.cursor()
Pomocí kurzoru zavolejte uloženou proceduru MySQL, jak je znázorněno:
cursor.callproc('sp_validateLogin',(_username,)) Získejte načtené záznamy z kurzoru, jak je znázorněno:
data = cursor.fetchall()
Pokud data obsahují nějaké záznamy, porovnáme získané heslo s heslem zadaným uživatelem.
if len(data) > 0:
if check_password_hash(str(data[0][3]),_password):
return redirect('/userhome')
else:
return render_template('error.html',error = 'Wrong Email address or Password.')
else:
return render_template('error.html',error = 'Wrong Email address or Password.')
Jak je vidět ve výše uvedeném kódu, použili jsme metodu nazvanou check_password_hash zkontrolovat, zda se vrácené hash heslo shoduje s heslem zadaným uživatelem. Pokud je vše v pořádku, přesměrujeme uživatele na userHome.html . A pokud dojde k nějaké chybě, zobrazíme error.html s chybovou zprávou.
Zde je kompletní validateLogin kód:
@app.route('/api/validateLogin',methods=['POST'])
def validateLogin():
try:
_username = request.form['inputEmail']
_password = request.form['inputPassword']
# connect to mysql
con = mysql.connect()
cursor = con.cursor()
cursor.callproc('sp_validateLogin',(_username,))
data = cursor.fetchall()
if len(data) > 0:
if check_password_hash(str(data[0][3]),_password):
session['user'] = data[0][0]
return redirect('/userHome')
else:
return render_template('error.html',error = 'Wrong Email address or Password')
else:
return render_template('error.html',error = 'Wrong Email address or Password')
except Exception as e:
return render_template('error.html',error = str(e))
finally:
cursor.close()
con.close()
Vytvořte stránku s názvem domovina uživatele.html do složky šablon a přidejte následující kód HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Python Flask Bucket List App - Home</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<div class="header">
<nav
class="border-bottom flex-wrap mb-4 py-3 d-flex justify-content-center"
>
<a
href="/"
class="text-dark text-decoration-none mb-3 mb-md-0 d-flex align-items-center me-md-auto"
>
<span class="fs-4">Python Flask App</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a href="/userhome" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/logout" class="nav-link active">Logout</a>
</li>
</ul>
</nav>
</div>
<div class="bg-light rounded-3 mb-4 p-5">
<div class="container-fluid py-5">
<h1 class="text-center fw-bold display-5">Welcome Home!</h1>
</div>
</div>
<footer class="footer">
<p>© Company 2022</p>
</footer>
</div>
</body>
</html>
Vytvořte také chybovou stránku s názvem error.html v templates složku a přidejte následující kód HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Error - Python Flask App</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<div class="header">
<nav
class="border-bottom flex-wrap mb-4 py-3 d-flex justify-content-center"
>
<a
href="/"
class="text-dark text-decoration-none mb-3 mb-md-0 d-flex align-items-center me-md-auto"
>
<span class="fs-4">Python Flask App</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/signup" class="nav-link">Signup</a>
</li>
<li class="nav-item">
<a href="/signin" class="nav-link">Sign In</a>
</li>
</ul>
</nav>
</div>
<div class="bg-light rounded-3 mb-4 p-5">
<div class="container-fluid py-5">
<h1 class="text-center fw-bold display-5">{{error}}</h1>
</div>
</div>
<footer class="footer">
<p>© Company 2022</p>
</footer>
</div>
</body>
</html>
Uvnitř error.html , máme prvek, jak je znázorněno:
<h1 class="text-center fw-bold display-5">{{error}}</h1>
Hodnotu proměnné lze předat z render_template a lze je nastavit dynamicky.
Po úspěšném přihlášení přesměrováváme uživatele na domovskou stránku uživatele, takže musíme vytvořit trasu nazvanou /userHome jak je znázorněno:
@app.route('/userHome')
def userHome():
return render_template('userHome.html')
Uložte všechny změny a restartujte server. Klikněte na tlačítko Přihlásit se na domovské stránce a zkuste se přihlásit pomocí platné e-mailové adresy a hesla. Po úspěšném ověření uživatele byste měli mít stránku uvedenou níže:
Při neúspěšném ověření uživatele bude uživatel přesměrován na chybovou stránku, jak je uvedeno níže:
Zde jsme použili samostatnou chybovou stránku k zobrazení chyby. Je také v pořádku, pokud chcete použít stejnou stránku k zobrazení chybové zprávy.
Omezení neoprávněného přístupu na domovskou stránku uživatele
Po úspěšném ověření uživatele je uživatel přesměrován na domovskou stránku uživatele. Ale právě teď může i neoprávněný uživatel zobrazit domovskou stránku pouhým procházením URL http://localhost:5000/userhome.
Abychom omezili přístup neoprávněných uživatelů, zkontrolujeme proměnnou relace, kterou nastavíme při úspěšném přihlášení uživatele. Importujte tedy session z baňky:
from flask import session
Musíme také nastavit tajný klíč pro relaci. Tedy v app.py , po inicializaci aplikace nastavte tajný klíč podle obrázku:
app.secret_key = 'why would I tell you my secret key?'
Nyní uvnitř validateLogin před přesměrováním uživatele na /userhome po úspěšném přihlášení nastavte session proměnná, jak je znázorněno:
session['user'] = data[0][0]
Dále v userhome před vykreslením userhome.html zkontrolujte proměnnou session . Pokud proměnná relace není nalezena, přesměrujte se na chybovou stránku.
@app.route('/userhome')
def userHome():
if session.get('user'):
return render_template('userhome.html')
else:
return render_template('error.html',error = 'Unauthorized Access')
Uložte všechny změny a restartujte server. Bez přihlášení zkuste přejít na http://localhost:5000/userhome a protože jste se ještě nepřihlásili, měli byste být přesměrováni na chybovou stránku.
Implementace odhlášení
Implementace funkce odhlášení je nejjednodušší. Vše, co musíme udělat, je vytvořit proměnnou relace user null a přesměruje uživatele na hlavní stránku.
Uvnitř app.py , vytvořte novou trasu a metodu pro logout jak je znázorněno:
@app.route('/logout')
def logout():
session.pop('user',None)
return redirect('/')
Již jsme nastavili href pro tlačítko odhlášení na /logout . Uložte tedy všechny změny a restartujte server. Na domovské stránce klikněte na Přihlásit se a zkuste se přihlásit pomocí platné e-mailové adresy a hesla. Po přihlášení klikněte na Odhlásit na domovské stránce uživatele a měli byste být úspěšně odhlášeni z aplikace.