Flaskフレームワークを使用したWebアプリケーション開発において、ユーザー認証機能は重要な要素の一つです。本記事では、ログインと新規登録画面の作成方法について解説します。
ログイン画面の実装
ログイン画面では、ユーザー名とパスワードを入力するフォームを作成します。Layuiフレームワークを活用して、モダンなUIを構築できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ユーザーログイン</title>
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<style>
.login-container {
width: 420px;
margin: 80px auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="login-container">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">ユーザー名</label>
<div class="layui-input-inline">
<input type="text" name="userId" required
lay-verify="required"
placeholder="ユーザー名を入力"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">パスワード</label>
<div class="layui-input-inline">
<input type="password" name="userPass" required
lay-verify="required"
placeholder="パスワードを入力"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="loginForm">ログイン</button>
<button type="reset" class="layui-btn layui-btn-primary">クリア</button>
<a class="layui-btn layui-btn-normal" href="/">ホームへ</a>
</div>
</div>
</form>
</div>
<script>
layui.use('form', function() {
var form = layui.form;
form.on('submit(loginForm)', function(formData) {
var payload = JSON.stringify(formData.field);
layui.$.ajax({
url: '/api/login',
type: 'POST',
contentType: 'application/json',
data: payload,
dataType: 'json',
success: function(result) {
if (result.status === 'success') {
layer.msg('ログイン成功');
window.location.href = '/dashboard';
} else {
layer.msg(result.message || 'ログイン失敗');
}
},
error: function(xhr, status, err) {
layer.msg('通信エラーが発生しました');
}
});
return false;
});
});
</script>
</body>
</html>
新規登録画面の実装
新規登録画面では、ユーザー情報をデータベースに保存する処理が必要です。Flaskのバックエンドと連携してデータを処理します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新規ユーザー登録</title>
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<style>
.register-wrapper {
width: 480px;
margin: 60px auto;
padding: 30px;
border: 1px solid #e6e6e6;
border-radius: 4px;
}
.form-title {
text-align: center;
margin-bottom: 25px;
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<div class="register-wrapper">
<h2 class="form-title">アカウント作成</h2>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">ユーザー名</label>
<div class="layui-input-block">
<input type="text" name="newUserId" required
lay-verify="required"
placeholder="希望するユーザー名"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">パスワード</label>
<div class="layui-input-block">
<input type="password" name="newUserPass" required
lay-verify="required"
placeholder="パスワードを設定"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">確認用</label>
<div class="layui-input-block">
<input type="password" name="confirmPass" required
lay-verify="required"
placeholder="パスワード再入力"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="registerForm">登録</button>
<button type="reset" class="layui-btn layui-btn-primary">リセット</button>
<a class="layui-btn" href="/">トップページ</a>
</div>
</div>
</form>
</div>
<script>
layui.use('form', function() {
var formModule = layui.form;
formModule.on('submit(registerForm)', function(formData) {
var fields = formData.field;
if (fields.newUserPass !== fields.confirmPass) {
layer.msg('パスワードが一致しません');
return false;
}
var jsonData = {
username: fields.newUserId,
password: fields.newUserPass
};
layui.$.ajax({
url: '/api/register',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(jsonData),
success: function(response) {
layer.msg(response.message || '登録完了');
if (response.success) {
setTimeout(function() {
window.location.href = '/login';
}, 1500);
}
},
error: function(err) {
layer.msg('登録に失敗しました');
}
});
return false;
});
});
</script>
</body>
</html>
ナビゲーションページの作成
ログインと登録画面への切り替えを行うシンプルなナビゲーションページを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>認証メニュー</title>
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<style>
.nav-container {
width: 280px;
margin: 120px auto;
text-align: center;
}
.nav-title {
margin-bottom: 30px;
font-size: 24px;
color: #393D49;
}
.nav-btn {
margin: 10px;
}
</style>
</head>
<body>
<div class="nav-container">
<h1 class="nav-title">ようこそ</h1>
<div>
<a class="layui-btn nav-btn" href="login">ログイン</a>
<a class="layui-btn layui-btn-normal nav-btn" href="register">新規登録</a>
</div>
</div>
</body>
</html>
Flaskバックエンドの実装例
フロントエンドからのリクエストを処理するFlaskサーバー側のコード例を示します。
from flask import Flask, request, jsonify, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/login')
def login_page():
return render_template('login.html')
@app.route('/register')
def register_page():
return render_template('register.html')
@app.route('/api/login', methods=['POST'])
def handle_login():
data = request.get_json()
user_id = data.get('userId')
user_pass = data.get('userPass')
# データベース認証処理をここに実装
# 例: user = db.query_user(user_id, user_pass)
return jsonify({
'status': 'success',
'message': '認証成功'
})
@app.route('/api/register', methods=['POST'])
def handle_register():
data = request.get_json()
username = data.get('username')
password = data.get('password')
# ユーザー登録処理をここに実装
# 例: db.create_user(username, password)
return jsonify({
'success': True,
'message': '登録が完了しました'
})
if __name__ == '__main__':
app.run(debug=True)
以上の実装により、Flaskを使用した基本的なユーザー認証システムを構築できます。実際の運用では、パスワードのハッシュ化やセッション管理の実装も必要となります。