Python FlaskとMySQLを使用してゼロからWebアプリを作成する：パート2

このシリーズの前のパートでは、Python FlaskとMySQLの使用を開始し、アプリケーションのユーザー登録部分を実装する方法を説明しました。このチュートリアルでは、アプリケーションにサインインおよびログアウト機能を実装することで、これを次のレベルに引き上げます。

はじめに

まず、GitHubから前のチュートリアルのソースコードを複製します。

git clone https://github.com/tutsplus/create-a-web-app-from-scratch-using-python-flask-and-mysql/.git

ソースコードのクローンが作成されたら、パート1に移動しますディレクトリを作成してサーバーを起動します。

python app.py

ブラウザでhttps：// localhost：5000を指定すると、アプリケーションが実行されているはずです。

サインインインターフェイスの作成

FlaskApp / templatesに移動します signin.htmlという名前の新しいファイルを作成します。 signin.htmlを開きます次のHTMLコードを追加します：

<!DOCTYPE html>
<html lang="en">
    <head>
		    
		<title>Python Flask Bucket List App - Sign In</title>
		    
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>&copy; Company 2022</p>
				        
			</footer>

			    
		</div>

	</body>
</html>

app.pyを開きますサインインインターフェイスの新しいルートを追加します。

@app.route('/signin')
def showSignin():
    return render_template('signin.html')

次に、 index.htmlを開きますおよびsignup.html 、hrefを追加します /signinとして両方のページにサインインするためのリンク。すべての変更を保存して、サーバーを再起動します。

python app.py

ブラウザでhttp：// localhost：5000にアクセスし、サインインをクリックします。リンクをクリックすると、サインインページが表示されるはずです。

サインインの実装

次に、ユーザーログインを検証する関数を作成する必要があります。 サインインをクリックすると、入力したメールアドレスとパスワードをユーザー検証機能に送信します。

ストアドプロシージャの作成

ユーザーを検証するには、MySQLストアドプロシージャが必要です。したがって、次のようにMySQLストアドプロシージャを作成します。

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 ;

usernameに基づいてユーザーの詳細を取得します sp_validateLoginを使用してMySQLデータベースから。ハッシュ化されたパスワードを取得したら、ユーザーが入力したパスワードと照合して検証します。

ユーザーメソッドの検証

ユーザーがフォームを送信したときに呼び出すユーザーを検証するメソッドを作成します。

@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))

上記のコードに見られるように、投稿されたメールアドレスとパスワードを_usernameに読み込みました。および_password 。ここで、sp_validateLoginを呼び出します。パラメータ_usernameを使用したプロシージャ。したがって、validatelogin内にMySQL接続を作成します方法：

con = mysql.connect()

接続が作成されたら、cursorを作成します conを使用する接続。

cursor = con.cursor()

カーソルを使用して、次のようにMySQLストアドプロシージャを呼び出します。

cursor.callproc('sp_validateLogin',(_username,))

次のように、カーソルからフェッチされたレコードを取得します。

data = cursor.fetchall()

データにいくつかのレコードがある場合は、取得したパスワードをユーザーが入力したパスワードと照合します。

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.')

上記のコードに見られるように、check_password_hashというメソッドを使用しました。返されたハッシュパスワードがユーザーが入力したパスワードと一致するかどうかを確認します。すべて問題がなければ、ユーザーを userHome.htmlにリダイレクトします。エラーが発生した場合は、 error.htmlを表示しますエラーメッセージが表示されます。

これが完全なvalidateLoginですコード：

@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()

userhome.htmlというページを作成しますテンプレートフォルダ内に次のHTMLコードを追加します：

<!DOCTYPE html>
<html lang="en">
    <head>
		    
		<title>Python Flask Bucket List App - Home</title>
		    
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>&copy; Company 2022</p>
				        
			</footer>

			    
		</div>
	</body>
</html>

また、 error.htmlというエラーページを作成します templatesでフォルダを作成し、次のHTMLコードを追加します：

<!DOCTYPE html>
<html lang="en">
    <head>
		    
		<title>Error - Python Flask App</title>
		    
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>&copy; Company 2022</p>
				        
			</footer>

			    
		</div>
	</body>
</html>

error.htmlの内部、次のような要素があります：

<h1 class="text-center fw-bold display-5">{{error}}</h1>

変数の値は、render_templateから渡すことができます機能し、動的に設定できます。

サインインが成功すると、ユーザーをユーザーのホームページにリダイレクトするため、/userHomeというルートを作成する必要があります。示されているように：

@app.route('/userHome')
def userHome():
    return render_template('userHome.html')

すべての変更を保存して、サーバーを再起動します。 サインインをクリックしますホームページのリンクをクリックし、有効な電子メールアドレスとパスワードを使用してサインインしてみてください。ユーザー検証が成功すると、次のようなページが表示されます。

ユーザー検証が失敗すると、ユーザーは次のようなエラーページにリダイレクトされます。

ここでは、別のエラーページを使用してエラーを表示しました。同じページを使用してエラーメッセージを表示する場合も問題ありません。

ユーザーホームページへの不正アクセスの制限

ユーザーの検証が成功すると、ユーザーはユーザーのホームページにリダイレクトされます。ただし、現在、権限のないユーザーでも、URL http：// localhost：5000/userhomeを参照するだけでホームページを表示できます。

不正なユーザーアクセスを制限するために、ユーザーログインが成功したときに設定するセッション変数を確認します。したがって、sessionをインポートしますフラスコから：

from flask import session

また、セッションの秘密鍵を設定する必要があります。したがって、app.py 、アプリが初期化されたら、次のように秘密鍵を設定します：

app.secret_key = 'why would I tell you my secret key?'

さて、validateLoginの中にメソッド、ユーザーを/userhomeにリダイレクトする前サインインに成功したら、sessionを設定します示されている変数：

session['user'] = data[0][0]

次に、userhome内メソッド、userhome.htmlをレンダリングする前にセッション変数を確認してください。セッション変数が見つからない場合は、エラーページにリダイレクトしてください。

@app.route('/userhome')
def userHome():
    if session.get('user'):
        return render_template('userhome.html')
    else:
        return render_template('error.html',error = 'Unauthorized Access')

すべての変更を保存して、サーバーを再起動します。サインインせずに、http：// localhost：5000 / userhomeに移動してみてください。まだログインしていないため、エラーページにリダイレクトされます。

ログアウトの実装

ログアウト機能の実装は最も簡単です。セッション変数をuserにするだけです。 nullにして、ユーザーをメインページにリダイレクトします。

app.pyの内部、logoutの新しいルートとメソッドを作成します示されているように：

@app.route('/logout')
def logout():
    session.pop('user',None)
    return redirect('/')

ログアウトボタンのhrefはすでに/logoutに設定されています。したがって、すべての変更を保存して、サーバーを再起動します。ホームページから、サインインをクリックします有効なメールアドレスとパスワードを使用してログインしてみてください。サインインしたら、ログアウトをクリックしますユーザーホームのボタンをクリックすると、アプリケーションから正常にログアウトされます。