プログラミング学習

【Python】ログイン機能を作る「Flask-Login」④

投稿日:

「Flask-Login」を使って「ログイン機能を作る」【Part4】になります。
今回は「ログインページ(login.html)」に入力フォームを作っていきたいと思います。
「Flask-WTF」を使っていくので復習になりますね。

ログインページにフォームを作ろう

ログインするための「name(名前)」,「mail(メールアドレス)」を入力するフォームを使っていきます。

③の記事はこちら。

「flask_wtf」をインポートしよう

「flask_wtf」から「FlaskForm」
「wtforms」から「StringField」,「SubmitField」をインポートしましょう。

from flask import Flask, render_template
from flask_login import LoginManager, login_required

----------------------------------------------

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

----------------------------------------------

app = Flask(__name__)
login_manager = LoginManager()
login_manager.init_app(app)
app.config['SECRET_KEY'] = "secret"

@login_manager.user_loader

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

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

@app.route('/login', methods=['GET','POST'])
def login():
  return render_template('login.html')

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

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

「Flask-WTF」についてはこちら。

Formクラスを定義しよう

「FlaskForm」を継承した「LoginForm」を定義していきます。

from flask import Flask, render_template
from flask_login import LoginManager, login_required
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

app = Flask(__name__)
login_manager = LoginManager()
login_manager.init_app(app)
app.config['SECRET_KEY'] = "secret"

----------------------------------------------

class LoginForm(FlaskForm):
    name = StringField('名前')
    mail = StringField('メールアドレス')
    submit = SubmitField('ログイン')

----------------------------------------------

@login_manager.user_loader


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


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


@app.route('/login', methods=['GET','POST'])
def login():
  return render_template('login.html')

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

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

「name(名前)」,「mail(メールアドレス)」,「submit(ログイン)」をフォームに作成します。

Formクラスをインスタンス化しよう

「@app.route」にインスタンスを作成していきます。

from flask import Flask, render_template
from flask_login import LoginManager, login_required
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

app = Flask(__name__)
login_manager = LoginManager()
login_manager.init_app(app)
app.config['SECRET_KEY'] = "secret"

class LoginForm(FlaskForm):
    name = StringField('名前')
    mail = StringField('メールアドレス')
    submit = SubmitField('ログイン')

@login_manager.user_loader

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

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

----------------------------------------------

@app.route('/login', methods=['GET','POST'])
def login():
  form = LoginForm()
  return render_template('login.html',form=form)

----------------------------------------------

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

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

「methods=[‘GET’,’POST’]」も追加しておきましょう。

では最後にテンプレート(login.html)を変更していきます。

テンプレートを作成しよう

<html>
  <head>
    <title>Login</title>
  </head>
  <body>
    <h1>ログイン</h1>
    <p>
      <form method="POST" action="{{url_for('login')}}">
        {{ form.csrf_token }}
        {{ form.name.label }}:{{ form.name }} 
        {{ form.mail.label }}:{{ form.mail }}
        {{ form.submit}}
     </form>
    </p>
  </body>
</html>

これで入力フォームができたはずです。
見ていきましょう。

ログインページを確認しよう

まずは「login.py」を実行。「top.html(localhost:5000)」にアクセス。

「ログインはこちら」から確認しましょう。

今回はフォームを作成しただけなので、ログインボタンをを押しても何も起こりませんね。

まとめ

「入力フォーム」を作成してみました。
「Flask-WTF」を使ったものになります。
やはり簡単にフォームを作成できるので便利ですね。
ぜひ使い方を参考にしてみてください。それではまた。

-プログラミング学習
-

執筆者:


  1. […] 【Python】ログイン機能を作る「Flask-Login」④ […]

  2. […] 【Python】ログイン機能を作る「Flask-Login」④ […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【Python】グラフを作成してみよう

Pythonでは、グラフを作成することも出来ます。今回は、実際にグラフの作り方を見ていきたいと思います。 Pythonでグラフを描いてみよう Pythonでグラフを作成するには「matplotlib」 …

【Python】ログイン機能を作る「Flask-Login」①

以前に「Flask」を使って掲示板を作成してみました。次のチャレンジとして、「ログイン機能」を作成していきたいと思います。 Flaskでログイン機能を作ろう 今回は「Flask ログイン機能」で調べて …

【Python】リサイズした画像をExcelに貼ってみよう

前回は、画像を「openpyxl」でExcelシートに貼り付けることができました。今回は「OpenCV」を使って、リサイズしてから画像を貼り付けてみたいと思います。 リサイズした画像を貼ってみよう O …

【Python】ログイン機能を作る「Flask-Login」⑦

「ログイン機能を作る」【Part7】。前回は「データベース」の設定を追加しました。今回は「ログイン処理」の部分を変更していこうと思います。 ログイン処理を変更しよう 「名前」に「ANDoblog」,「 …

【Python】Flaskを使ってみよう

前回は「Flaskとは」から「Flaskのインポート」まで紹介しました。今回は「Flask」を使って、動作確認までしていきたいと思います。 Flaskを使ってみよう サーバーにアクセスした際に「Hel …