☆☆ 新着記事 ☆☆

2019年2月1日金曜日

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

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

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

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



login.py

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>


login.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に最初にアクセスしたとき




2) ログイン・ページに遷移して、間違ったuser nameとpasswordを入力




3) FLASH MESSAGEが、index.htmlに表示される。





4) FLASH MESSAGEが、index.htmlに表示される。
    正しいログイン名とパスワードを入れる。

 






0 件のコメント:

コメントを投稿