第7章 ログイン

1　app.py（フォーム表示）

ログイン用のページを作成します。

@app.get('/login')
def login():
    return render_template("login.html")

/login にアクセスし、ログインページが表示されることを確認します。

2　login.tml

login.htmlにはログイン用のフォームを作成します。まず、エラーメッセージを出す部分を作成します。これはフラッシュメッセージと言って、flash関数で設定したメッセージを取得するものです。一度だけ表示されるのが特徴です。

{% for message in get_flashed_messages() %}
    <p>{{ message }}</p>
{% endfor %}

その下にフォームを作成します。フォームは、/loginにPOSTで送信します。テキストボックスはplaceholderを使って何を入力するかを表示しています。

<form action="/login" method="post" >
<input type="text" name="uname" placeholder="ユーザ名" required><br>
<input type="password" name="upass" placeholder="パスワード" required><br>
<input type="submit" value="ログイン">
</form>

3　app.py（ログイン処理）

app.py で送信データを受け取る関数、login_postを作成します。unameとupassを受け取り、userテーブルをfilterで検索します。検索結果は一件のはずなので、first() で結果を受け取ります。

結果がNoneの場合、ログインに失敗していますので、flash関数でエラーメッセージを設定して、/loginにリダイレクトします。 そうで無い場合にはログインに成功していますので、ユーザIDをセッションに保存し、トップページにリダイレクトします。

@app.post('/login')
def login_post():
    uname = request.form['uname']
    upass = request.form['upass']

    row = User.query.filter(User.uname==uname, User.upass == upass).first()

    if row is None:
        flash("ユーザ名またはパスワードが違います")
        return redirect("/login")
    else:
        session['uid'] = row.uid
        return redirect("/")

セッションはsessionという名前の辞書で表されます。この辞書に入れた内容はページをまたいでも引き継がれます。ただし、大きなデータは入れることは出来ません。そこで、ログインしたユーザのIDのみを保存しています。

4　style.css

staticフォルダにあるstyle.cssにスタイルを設定します。 テキストボックス、パスワードは内側に余白を0.5文字、角を丸くして外側にライトグレイの線を引きます。幅は20文字とし、下側に余白を取ります。

input[type="text"], input[type="password"] {
    padding: 0.5em;
    border: 1px solid lightgray;
    border-radius: 4px;
    width: 20em;
    margin-bottom:0.5em;
}

ログインボタンは背景色を緑にし文字を白にします。もともとあった枠線は消します。ボタンの内側に余白を付けて少しボタンを大きくします。角を丸くし、マウスカーソルが上に来たときに形を変更します。

input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 0.5em 1em;
    border-radius: 4px;
    cursor: pointer;
}