レンタルサーバーでpython FLASK運用,ログインフォーム作成│ちからえもんWEB・WINDOWSプログラミング

レンタルサーバエックスサーバーにpythonのマイクロフレームワークFlaskをインストールし、ログインフォームを作成しました。
ログインフォームは、会員専用CMS等WEBアプリケーションに必須の機能です。ログインフォームとmySQLの追加・更新・削除を学習することにより、一気にFlaskで自作できるアプリの道が見えてくるかと思います。ログインしたかどうかは、SESSIONで管理していきます。
mySQL関連の説明は、割愛しますので、前々回の記事XサーバーでFlask運用、WEBブラウザからmySQL操作その１select,insert,updateをご確認の上ご覧いただけますと幸甚です。

1 アプリケーション概要
- - 1.0.1 ログインフォーム
  - 1.0.2 ログインエラー
2 アップロードするファイル
3 .htaccess
4 index.cgi
5 mySQLテーブル
6 index.py

アプリケーション概要

ログインフォーム・アプリケーションの概要です。

ログインフォーム

下画像のユーザー、パスワードを入力し、「ログイン」をクリックします。

下画像　一致するユーザー情報がmySQLテーブルに存在した場合、ログインに成功した画面です。
ログアウトするには、「ログアウト」をクリックします。

下画像　ログアウトした画面です。セッションが削除されます。

ログインエラー

下画像　ユーザーあるいはパスワードが異なり、ログインできない画面です。

アップロードするファイル

ドメイン直下のpublic_htmlにtest2/デイレクトリを作成し、3つのファイルをアップロードしました。
.htaccessと、index.cgi、pythonファイルであるindex.pyです。index.cgiの属性は755にします。

また、HTMLのテンプレートファイルを利用しますので、デイレクトリtemplatesも作成し、その中に、HTMLのテンプレートファイルloginform.html、loginconf.html、logout.html、loginerror.htmlをアップロードしました。次にファイルの中身を説明していきます。

.htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ /test2/index.cgi/$1 [QSA,L]
<Files ~ "\.py$">
  deny from all
</Files>

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^(.*)$ /test2/index.cgi/$1 [QSA,L]

deny from all

</Files>

このようにすることで、https://ドメイン/test2/index.cgi　でも　https://ドメイン/test2/ 　でも同じ内容がブラウザに表示されます。

index.cgi

#! /home/XサーバのサーバーID/.linuxbrew/bin/python3
from wsgiref.handlers import CGIHandler
from index import app
CGIHandler().run(app)

#! /home/XサーバのサーバーID/.linuxbrew/bin/python3

from wsgiref.handlers import CGIHandler

from index import app

CGIHandler().run(app)

from index 　のindexがindex.pyのpythonファイル名になります。
/home/XサーバのサーバーID/.linuxbrew/bin/python3はXサーバ内のpythonの格納されている場所を指しています。
それ以外は、定型文として、そのまま流用できます。
index.cgiの属性は755にする必要があります。

mySQLテーブル

下画像　user_tableを準備します

index.py

いよいよpythonファイルです。pythonファイルの全内容です。一行目のsessionは、セッションを使うので必要です。以下ファイル内の要所要所の解説です。

#0セッションを利用するのに必要です。app.secret_key = ‘aaa’

#1ログインフォーム　ルートディレクトリになります。ブラウザでは　URLとして　ドメイン/test2 と打ったときの表示となります。
loginform.html内の部品、user,pwを/login_checkにPOSTします。

#2ログインのチェックページ　パラメータuser,pwを変数に格納します。
user = request.form[‘user’]

pw = request.form[‘pw’]

#3ログインチェック関数login_postにuser,pwを引数として渡し、Trueであれば、/loginconfにページ遷移します。Falseであれば、loginerror.htmlを呼び出します。

#5ログインしていないのに、URLを指定された場合、ルートにページ遷移します。

#6ログインが成功した場合、loginconf.htmlを呼び出します。
#7loginconf.html内で、session[‘login_user’]を出力し、ログイン者名を表示します。

#8ログアウト　セッションに格納された値を削除する

#9ログインしているかの判定する関数です。セッションにlogin_userが含まれていれば、True、そうでなければ、Falseを返します。

from flask import Flask, render_template, request, session, redirect
import mysql.connector as mydb
# コネクションの作成
connector = mydb.connect(
    host='mysqXXXXX.xserver.jp',
    user='xsXXXXX_XXXXX',
    password='XXXXX',
    database='xsXXXXX_XXXXX',
	charset="utf8"
)
app = Flask(__name__)
#0セッションを利用するのに必要
app.secret_key = 'aaa'

@app.route('/')
def index():
    #1ログインフォーム
    return render_template('loginform.html')

@app.route('/login_check', methods=['POST'])
def login_check():
    #2ログインのチェックページ
    user = request.form['user']
    pw = request.form['pw']
    if (user is None) or (pw is None):
        return redirect('./')
    #3ログインチェック関数にuser,pwを引数として渡す
    if login_post(user, pw) == False:
        #4ログインが失敗した場合
        return render_template('loginerror.html')
    #4ログインが成功した場合
    return redirect('./loginconf')

@app.route('/loginconf')
def loginconf():
    #5ログインしていないのに、URLを指定された場合、ルートにページ遷移
    if not flag_login():
        return redirect('./')
    #6ログインが成功した場合、loginconf.htmlにページ遷移
    #7　loginconf.html上で、session['login_user']を出力
    return render_template('loginconf.html')
    
@app.route('/logout')
def logout():
    #8ログアウト
    #セッションに格納された値を削除する
    session.pop('login_user', None)
    return render_template('logout.html')

#9ログインしているかの判定、セッションにlogin_userが含まれているのか
def flag_login():
    if 'login_user' in session:
        return True
    return False

#mySQLのuser_tableにログインしたユーザーが含まれているのか　含まれていたらTrueを返す
def login_post(user, pw):
    cursor = connector.cursor()
    sql = "SELECT `name`, `user`, `pw` FROM `user_table` WHERE user='" + format(user) + "' AND pw='" + format(pw) + "'"
    cursor.execute(sql)
    result = cursor.fetchall()
    for row in result:
        session['login_user'] = str(row[0])
        return True 
    cursor.close()
    connector.close()
    if not flag_login():
        return False

if __name__ == '__main__':
    app.run(host='0.0.0.0')

from flask import Flask, render_template, request, session, redirect

import mysql.connector as mydb

# コネクションの作成

connector = mydb.connect(

host='mysqXXXXX.xserver.jp',

user='xsXXXXX_XXXXX',

password='XXXXX',

database='xsXXXXX_XXXXX',

charset="utf8"

)

app = Flask(__name__)

#0セッションを利用するのに必要

app.secret_key = 'aaa'

@app.route('/')

def index():

#1ログインフォーム

return render_template('loginform.html')

@app.route('/login_check', methods=['POST'])

def login_check():

#2ログインのチェックページ

user = request.form['user']

pw = request.form['pw']

if (user is None) or (pw is None):

return redirect('./')

#3ログインチェック関数にuser,pwを引数として渡す

if login_post(user, pw) == False:

#4ログインが失敗した場合

return render_template('loginerror.html')

#4ログインが成功した場合

return redirect('./loginconf')

@app.route('/loginconf')

def loginconf():

#5ログインしていないのに、URLを指定された場合、ルートにページ遷移

if not flag_login():

return redirect('./')

#6ログインが成功した場合、loginconf.htmlにページ遷移

#7　loginconf.html上で、session['login_user']を出力

return render_template('loginconf.html')

@app.route('/logout')

def logout():

#8ログアウト

#セッションに格納された値を削除する

session.pop('login_user', None)

return render_template('logout.html')

#9ログインしているかの判定、セッションにlogin_userが含まれているのか

def flag_login():

if 'login_user' in session:

return True

return False

#mySQLのuser_tableにログインしたユーザーが含まれているのか　含まれていたらTrueを返す

def login_post(user, pw):

cursor = connector.cursor()

sql = "SELECT `name`, `user`, `pw` FROM `user_table` WHERE user='" + format(user) + "' AND pw='" + format(pw) + "'"

cursor.execute(sql)

result = cursor.fetchall()

for row in result:

session['login_user'] = str(row[0])

return True

cursor.close()

connector.close()

if not flag_login():

return False

if __name__ == '__main__':

app.run(host='0.0.0.0')

loginform.html

ログインフォームです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ログイン</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    </head>
    <body>
        <div class="container-fluid">
            <h1 style="font-size: 2.0rem;margin-bottom: 2rem;">python,Flask　ログインフォーム</h1>
            <div style="max-width: 540px;">
                <form action="./login_check" method="POST">
                    <div class="form-group">
                      <label for="exampleFormControlInput1">ユーザー:</label>
                      <input type="text" name="user" class="form-control" id="exampleFormControlInput1" placeholder="" value="">
                    </div>
                    <div class="form-group">
                      <label for="exampleFormControlInput1">パスワード:</label>
                      <input type="password" name="pw" class="form-control" id="exampleFormControlInput1" placeholder="" value="">
                    </div>
                    <input type="submit" value="ログイン" class="btn btn-primary">
                  </form>
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1 style="font-size: 2.0rem;margin-bottom: 2rem;">python,Flask　ログインフォーム</h1>

</div>

<label for="exampleFormControlInput1">パスワード:</label>

</div>

</form>

</div>

</body>

</html>

loginconf.html

ログインに成功したら、呼び出されるHTMLファイルです。HTMLファイルの中で、session[‘login_user’]として、ログイン者名を表示しています。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ログイン成功</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    </head>
    <body>
        <div class="container-fluid">
            <h1 style="font-size: 2.0rem;margin-bottom: 2rem;">python,Flask　ログイン成功</h1>
            <h2 class="text-primary">Hello {{ session['login_user'] }}さん！</h2>
            <h2 class="text-primary">ログインに成功しました！</h2>
            <div><a href="./logout" class="btn btn-danger">ログアウト</a></div>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ログイン成功</title>

</head>

<body>

<h1 style="font-size: 2.0rem;margin-bottom: 2rem;">python,Flask　ログイン成功</h1>

<h2 class="text-primary">Hello {{ session['login_user'] }}さん！</h2>

<h2 class="text-primary">ログインに成功しました！</h2>

<div><a href="./logout" class="btn btn-danger">ログアウト</a></div>

</div>

</body>

</html>

logout.html

ログアウトしたら呼び出されるHTMLファイルです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ログアウト</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    </head>
    <body>
        <div class="container-fluid">
            <h1 style="font-size: 2.0rem;margin-bottom: 2rem;">python,Flask　ログアウト</h1>
            <h2 class="text-primary">ログアウトしました</h2>
            <div><a href="./" class="btn btn-danger">ログイン</a></div>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ログアウト</title>

</head>

<body>

<h1 style="font-size: 2.0rem;margin-bottom: 2rem;">python,Flask　ログアウト</h1>

<h2 class="text-primary">ログアウトしました</h2>

</div>

</body>

</html>

loginerror.html

ユーザーあるいはパスワードが間違いがあるときに呼び出されるHTMLファイルです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ログインエラー</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    </head>
    <body>
        <div class="container-fluid">
            <h1 style="font-size: 2.0rem;margin-bottom: 2rem;">python,Flask　ログインエラー</h1>
            <h2 class="text-primary">ユーザーあるいはパスワードが異なります</h2>
            <div><a href="./" class="btn btn-danger">戻る</a></div>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ログインエラー</title>

</head>

<body>

<h1 style="font-size: 2.0rem;margin-bottom: 2rem;">python,Flask　ログインエラー</h1>

<h2 class="text-primary">ユーザーあるいはパスワードが異なります</h2>

</div>

</body>

</html>

セッションが使えると、CMSとか一気に自作できるようになります！

2020年9月の四連休以降、時間を見つけてpythonというかFlask勉強していますが、とても面白いです！はまっています。

レンタルサーバーでpython FLASK運用,ログインフォーム作成

アプリケーション概要

ログインフォーム

ログインエラー

アップロードするファイル

.htaccess

index.cgi

mySQLテーブル

index.py

loginform.html

loginconf.html

logout.html

loginerror.html

レンタルサーバーでpython FLASK運用、mySQLその２GET POSTメソッド

vue.jsを使ったAJAX通信(PHP + mariaDB/mySQL)

pythonフレームワークFlaskをXサーバーで運用の最新記事8件

レンタルサーバーでpython FLASK運用,ログインフォーム作成

レンタルサーバーでpython FLASK運用、mySQLその２GET POSTメソッド

レンタルサーバーでpython FLASK運用、mySQLその１select,insert,update