google_login

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, request, jsonify, render_template, send_from_directory,redirect, make_response, Response, session
+from flask import Flask, request, jsonify, render_template, send_from_directory,redirect, make_response, Response, session, url_for 
 import base64
 from pydub import AudioSegment  # 変換用にpydubをインポート
 import os
@@ -11,10 +11,12 @@ from pyannote.audio import Model, Inference
 from pydub import AudioSegment
 from flask_sqlalchemy import SQLAlchemy
 from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required
-from database import db 
 from users import Users
 from werkzeug.security import generate_password_hash, check_password_hash
 from dotenv import load_dotenv
+from google.oauth2 import id_token
+from google_auth_oauthlib.flow import Flow
+from google.auth.transport import requests as google_requests
 
 
 # Hugging Face のトークン取得（環境変数 HF に設定）
@@ -34,6 +36,20 @@ inference = Inference(model)
 app = Flask(__name__)
 
 app.config['SECRET_KEY'] = os.urandom(24)
+
+# Google OAuth 2.0の設定
+os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"
+GOOGLE_CLIENT_ID = "228160683186-6u7986qsfhcv3kd9iqtv08iphpl4gdk2.apps.googleusercontent.com"
+GOOGLE_CLIENT_SECRET = "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"
+REDIRECT_URI = "http://127.0.0.1:7860/callback"
+
+flow = Flow.from_client_secrets_file(
+    'client_secret.json',
+    scopes=["openid", "https://www.googleapis.com/auth/userinfo.profile", "https://www.googleapis.com/auth/userinfo.email"],
+    redirect_uri=REDIRECT_URI
+)
+
+"""
 # データベース設定
 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
@@ -45,7 +61,7 @@ db.init_app(app)
 login_manager = LoginManager()
 login_manager.init_app(app)
 login_manager.login_view = "login"
-
+"""
 @login_manager.user_loader
 def load_user(user_id):
     return Users.query.get(int(user_id))
@@ -120,46 +136,65 @@ def top():
     return redirect('/login')
 
 # ログイン後画面
-@app.route('/after')
-@login_required # ログインしているユーザのみアクセス許可
-def index():
-    users = Users.query.order_by(Users.id).all()
-    return render_template('index.html', users=users)
+@app.route('/callback')
+def callback():
+    flow.fetch_token(authorization_response=request.url)
+
+    if not session['state'] == request.args['state']:
+        return 'State mismatch error', 400
+
+    credentials = flow.credentials
+    request_session = google_requests.Request()
 
-@app.route('/index', methods=['GET', 'POST'])
-def index_page():
-    users = Users.query.order_by(Users.id).all()
-    return render_template('index.html', users=users)
+    id_info = id_token.verify_oauth2_token(
+        credentials.id_token, request_session, GOOGLE_CLIENT_ID
+    )
+
+    session['google_id'] = id_info.get("sub")
+    session['email'] = id_info.get("email")
+    session['name'] = id_info.get("name")
+
+    return redirect(url_for('index'))
 
 # フィードバック画面（テンプレート: feedback.html）
 @app.route('/feedback', methods=['GET', 'POST'])
 def feedback():
-    users = Users.query.order_by(Users.id).all()
+    if 'google_id' not in session:
+        return redirect(url_for('login'))
+    user_info = {
+        'name': session.get('name'),
+        'email': session.get('email')
+    }
     return render_template('feedback.html', users=users)
 
 # 会話詳細画面（テンプレート: talkDetail.html）
 @app.route('/talk_detail', methods=['GET', 'POST'])
 def talk_detail():
-    users = Users.query.order_by(Users.id).all()
+    if 'google_id' not in session:
+        return redirect(url_for('login'))
+    user_info = {
+        'name': session.get('name'),
+        'email': session.get('email')
+   }
     return render_template('talkDetail.html', users=users)
 
 # ログイン画面（テンプレート: login.html）
-@app.route('/login', methods=['GET', 'POST'])
+@app.route('/login')
 def login():
-   if request.method == "POST":
-        username = request.form.get('username')
-        password = request.form.get('password')
-        # Userテーブルからusernameに一致するユーザを取得
-        user = Users.query.filter_by(username=username).first()
-        if check_password_hash(user.password, password):
-            login_user(user)
-            return redirect('after')
-        else:
-            # 入力したユーザー名のパスワードが間違っている場合
-            # return "<p>パスワードが間違っています。</p>"
-            return Response(status=404, response="ページが見つかりません。")
-   else:
-        return render_template('login.html')
+   authorization_url, state = flow.authorization_url()
+   session['state'] = state
+   return redirect(authorization_url)
+
+   # インデックス画面（テンプレート: index.html）
+@app.route('/index')
+def index():
+   if 'google_id' not in session:
+        return redirect(url_for('login'))
+   user_info = {
+        'name': session.get('name'),
+        'email': session.get('email')
+   }
+   return render_template('index.html', user=user_info)
 
 # 登録画面（テンプレート: new_person.html）
 @app.route('/new_person', methods=['GET', 'POST'])

database.py

@@ -1,3 +0,0 @@
-from flask_sqlalchemy import SQLAlchemy
-
-db = SQLAlchemy()

templates/index.html

@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Voice Recorder Interface</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
     <style>
       body {
         display: flex;
@@ -121,6 +125,7 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   </head>
   <body>
+    <h1>ようこそ, {{ user.name }} さん!</h1>
     <!-- トグルスイッチ：基準音声保存モード -->
     <div class="toggle-container">
       <span class="toggle-label">基準音声を保存</span>

templates/login.html

@@ -140,7 +140,7 @@ history-button:hover {
   <body>
     <form method="POST">
       <div class="container">
-        <h2>ログイン</h2>
+        <h2>Googleあかうんとでログイン</h2>
         <div>
           <label for="">ユーザ名</label>
           <input type="text" name="username" />
@@ -151,6 +151,7 @@ history-button:hover {
           <br />
         </div>
         <div class="flex">
+          <button id="login-btn" class="history-button">Googleでログイン</button>
           <input
             type="submit"
             class="history-button"