Flaskで、Login ページを作ってDBを操作する(1)

このポストの範囲：

◇　全体の流れを考える
・　ログインできるユーザを管理する。(html)
　　1)　ユーザ登録ページの作成
　　2)  ログインページ（ログイン認証要求ページ）を作成


・必要となるFunction
    1) app.pyで、これらhtmlのルーティングを管理
　 2) forms.pyで、htmlから送られてくる値のセキュリティー・チェック
　 3) 送信されてきたユーザデータをDBに登録。　ログイン認証時に参照できるようにする。

---

作業の流れとしては、

Step1 :
 forms.pyで、各htmlに設置する「入力フィールドの定義」と送信されてくる値の「validation」の方法を定義する。　＝＞ FLASK-WTFを利用。

Step2:
各htmlに入力フィールドを記述

Step3:
DBを作成する。

◇出来上がりのCode

<forms.py> 

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, BooleanField
from wtforms.validators import DataRequired, Length, Email, EqualTo

class RegistrationForm(FlaskForm):
    username = StringField('Username',
                           validators=[DataRequired(), Length(min=2, max=20)])
    email = StringField('Email',
                        validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    confirm_password = PasswordField('Confirm Password',
                                     validators=[DataRequired(), EqualTo('password')])
    submit = SubmitField('Sign Up')

class LoginForm(FlaskForm):
    email = StringField('Email',
                        validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    remember = BooleanField('Remember Me')
    submit = SubmitField('Login')

</templates/register.html>

  <　form method="POST" action="">
            {{ form.hidden_tag() }}

    <legend>Join Today</legend>

    {% with messages = get_flashed_messages(with_categories=true)%}
      {% if messages %}
         {% for category, message in messages %}
        <div class="alert alert-{{ category }}">
        {{ message }}
        </div>
         {% endfor %} 
      {% endif %}
    {% endwith %}
           
                    {{ form.username.label }}
                    {% if form.username.errors %}
                        {{ form.username }}
                     
                            {% for error in form.username.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                     
                    {% else %}
                        {{ form.username }}
                    {% endif %}
                </div>
                <div class="form-group">
                    {{ form.email.label }}
                    {% if form.email.errors %}
                        {{ form.email }}
                        <div class="invalid-feedback">
                            {% for error in form.email.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.email }}
                    {% endif %}
                </div>
                <div class="form-group">
                    {{ form.password.label }}
                    {% if form.password.errors %}
                        {{ form.password }}
                        <div class="invalid-feedback">
                            {% for error in form.password.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.password }}
                    {% endif %}
                </div>
                <div class="form-group">
                    {{ form.confirm_password.label(class="form-control-label") }}
                    {% if form.confirm_password.errors %}
                        {{ form.confirm_password(class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.confirm_password.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.confirm_password }}
                    {% endif %}
                </div>
            </fieldset>
            <div class="form-group">
                {{ form.submit }}
            </div>
        </form>
    </div>
    <div class="border-top pt-3">
        <small class="text-muted">
            Already Have An Account? <a  href="{{ url_for('login') }}">Sign In</a>
        </small>
    </div>
           

</templates/login.html>

                 <legend>Log In</legend>


    {% with messages = get_flashed_messages(with_categories=true)%}
      {% if messages %}
         {% for category, message in messages %}
        <div class="alert alert-{{ category }}">
        {{ message }}
        </div>
         {% endfor %} 
      {% endif %}


    {% endwith %}
       

    <!-- Input email -->
                    {{ form.email.label}}
                    {% if form.email.errors %}
                        {{ form.email }}
                        <div class="invalid-feedback">
                            {% for error in form.email.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.email }}
                    {% endif %}
                </div>
               <!-- Input password -->
                    {{ form.password.label }}
                    {% if form.password.errors %}
                        {{ form.password(class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.password.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.password }}
                    {% endif %}
                </div>
     <!-- Remember me -->
                <div class="form-check">
                    {{ form.remember }}
                    {{ form.remember.label}}
                </div>
            <div class="form-group">
                {{ form.submit }}
            </div>
            <small class="text-muted ml-2">
                <a href="#">Forgot Password?</a>
            </small>
        </form>
      </div>
      <div class="border-top pt-3">
            <small class="text-muted">
              Need An Account? <a class="ml-2" href="{{ url_for('register') }}">Sign Up Now</a>
            </small>
   </div>
  
  

<app.py>

from flask import Flask, render_template, url_for, flash, redirect
from forms import RegistrationForm, LoginForm
app = Flask(__name__)
app.config['SECRET_KEY'] = '5791628bb0b13ce0c676dfde280ba245'


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

@app.route("/register", methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():　

        flash(f'Account created for {form.username.data}!', 'success')
        return redirect(url_for('home'))　♯ユーザが正しく作成できた場合home にリダイレクト

    return render_template('register.html', title='Register', form=form)

@app.route("/login", methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():

        if form.email.data == 'admin@blog.com' and form.password.data == 'password':
　　　　　♯データベースを作る前なので仮にテスト用

            flash('You have been logged in!', 'success')
            return redirect(url_for('home'))　♯ユーザが正しく作成できた場合home にリダイレクト
        else:
            flash('Login Unsuccessful. Please check username and password', 'danger')

    return render_template('login.html', title='Login', form=form)
    #form を htmlにpass することで, htmlからLoginFormにアクセス可能になる。

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

* flash(f'Account created for {form.username.data}!', 'success')
  flashは、２つめの引数にBootstrapのカテゴリーを指定することが可能。指定しなくても良い。
　指定した場合は、HTML側に

{% with messages = get_flashed_messages() %}に、引数として以下のように指定する。
{% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
         {% for category, message in messages %}
        <div class="alert alert-{{ category }}">
        {{ message }}
        </div>
         {% endfor %} 
      {% endif %}
などと記入する。


<app.py>