ChatGPTに簡単なログイン機能が付いたWebアプリを作ってもらった

ChatGPTに簡単なログイン機能が付いたWebアプリを作ってもらいました。Flask-Loginを利用しています。

指示文(プロンプト):

Pythonで簡易なマイページ機能を持つWebアプリを作りたい。マイページにはログインできるようにしてログインしないと見れないようにしたい。Flask_Loginを利用してください。

回答:

Pythonで簡易なマイページ機能を持つWebアプリを作成するためには、Flaskフレームワークを使用してFlask_Loginを実装する必要があります。以下は、その手順です。

1. FlaskとFlask_Loginをインストールする

ターミナルまたはコマンドプロンプトを開いて、以下のコマンドを入力します。


pip install Flask
pip install Flask-Login
    


これにより、FlaskフレームワークとFlask_Loginライブラリがインストールされます。

2. Flaskアプリケーションを作成する

以下のコードを持つファイルapp.pyを作成します。


from flask import Flask, request, render_template, redirect, url_for
from flask_login import LoginManager, current_user, login_required, login_user, logout_user, UserMixin

app = Flask(__name__)
login_manager = LoginManager()
login_manager.init_app(app)
app.secret_key = 'secret_key'

class User(UserMixin):
    pass

@login_manager.user_loader
def user_loader(email):
    user = User()
    user.id = email
    return user

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

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        return render_template('login.html')
    email = request.form['email']
    password = request.form['password']
    # ユーザーを検証する処理
    user = User()
    user.id = email
    login_user(user)
    return redirect(url_for('mypage'))

@app.route('/mypage')
@login_required
def mypage():
    email = current_user.id
    return render_template('mypage.html', email=email)

@app.route('/logout')
def logout():
    logout_user()
    return redirect(url_for('index'))

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

3. テンプレートを作成する

以下の3つのファイルを作成し、templatesディレクトリに保存します。

index.html


<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
  </head>
  <body>
    <h1>Welcome to My App</h1>
    <p><a href="{{ url_for('login') }}">Log in</a></p>
  </body>
</html>

    



login.html


<!DOCTYPE html>
<html>
  <head>
    <title>Log in</title>
  </head>
  <body>
    <h1>Log in</h1>
    <form method="post" action="{{ url_for('login') }}">
      <p>
        Email:
        <input type="email" name="email" required>
      </p>
      <p>
        Password:
        <input type="password" name="password" required>
      </p>
      <p>
        <input type="submit" value="Log in">
      </p>
    </form>
  </body>
</html>



mypage.html


<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>My Page</h1>
    <p>Welcome, {{ email }}!</p>
    <p><a href="{{ url_for('logout') }}">Log out</a></p>
  </body>
</html>
結果:

下記のように成功しました。

 

 

回答で login.html のコードが途切れていたので、「login.html のソースコードの続きを教えてください。」と再質問して、コードを再取得しました。

また、なぜか必要なモジュールのインポート漏れがあったので、そこは手動で追記しました。

ちなみにBing AI-Chatにも同様に聞いたところ、「必要なPython、HTMLのソースコードは、フレームワークやライブラリのドキュメントに記載されています。それらを参考にして作成してください。」という回答でした。それはそうなんだけど。。。