Python FLASKのログインページ（サンプル）とFLASHメッセージ。

2019年2月1日金曜日

Python FLASKのログインページ（サンプル）とFLASHメッセージ。

'flash' は、htmlからのrequestに対して、Flaskで簡単にmessageをフィード・バックする仕組みです。

Flaskのセッションを利用しています。　
flask側： flash('メッセージ’）
html側： {% with messages = get_flashed_messages() %}
で、htmlにメッセージをフィード・バック（print-out)することが可能です。

セッションを利用しているので、ブラウザやサーバー・サイドでcookieの長さに制限をかけている場合、失敗する場合があります。失敗した場合、メッセージが表示されないだけで、挙動自体に影響は与えません。

import os
from flask import Flask, flash, redirect, render_template, request, url_for
app = Flask(__name__)
app.secret_key = os.urandom(24)
@app.route('/')
def index():
     return render_template('index.html')

@app.route('/login', methods = ['GET', 'POST'])
def login():
   error = None
   if request.method == 'POST':

        if request.form['username'] != 'admin' or request.form['password'] != 'admin':

           flash('Invalid username or password. Please try again!')
           return redirect(url_for('index'))

        else:
           flash('You were successfully logged in')
           return redirect(url_for('index'))

   return render_template('login.html')

if __name__ == "__main__":
   app.run(debug =True)

index.html

<!doctype html>
<html>
   <head>
      <title>Flask Message flashing</title>
   </head>
   <body>
      {% with messages = get_flashed_messages() %}
         {% if messages %}
            <ul>
               {% for message in messages %}
               <li>{{ message }}</li>
               {% endfor %}
            </ul>
         {% endif %}
      {% endwith %}
<h1>Flask Message Flashing Example</h1>
      <p>Do you want to <a href = "{{ url_for('login') }}">
         <b>log in?</b></a></p>
   </body>
</html>

<!doctype html>
<html>
<body>
      <h1>Login</h1>
      {% if error %}
         <p><strong>Error:</strong> {{ error }}
      {% endif %}

      <form action = "" method = post>
         <dl>
            <dt>Username:</dt>
            　　<dd>
               　<input type = text name = username value = "{{request.form.username }}">
　　            </dd>
               <dt>Password:</dt>
　　            <dd>
     　          <input type = password name = password>
　　　　　　</dd>
         </dl>
         <p>　<input type = submit value = Login>　</p>
      </form>
   </body>
</html>

ブラウザで確認。

1) index.htmlに最初にアクセスしたとき