Merge pull request #87 from kc3hack/feature/issue-71-login-auth

feat: #71 GitHub OAuth認証とスキルツリー自動生成の統合、認証ガード実装

Author: Inlet-back

.github/decisions/IMPLEMENTATION_ISSUE_71.md

@@ -0,0 +1,201 @@
+# Issue #71: GitHub OAuth認証とスキルツリー生成の統合
+
+## 実装概要
+
+GitHub OAuthを使った認証機能を実装し、認証後にユーザーのGitHubリポジトリを分析してパーソナライズされたスキルツリーを自動生成する機能を統合しました。
+
+## 実装内容
+
+### 1. ログイン画面の改善 (`frontend/src/app/login/page.tsx`)
+
+- **デザイン改善**:
+  - グラデーション背景の追加
+  - アイコン追加（🌳）
+  - アニメーション効果（スライドアップ、シェイク、スライドダウン）
+  - GitHubログインボタンの視覚効果強化（シャインエフェクト）
+  - ローディング状態の改善（スピナー表示）
+- **UI/UX改善**:
+  - テストユーザー情報を折りたたみ可能に変更
+  - エラーメッセージのスタイル改善
+  - ボタンのホバー/アクティブ状態のアニメーション
+
+### 2. OAuth callback時のProfile自動作成 (`backend/app/api/endpoints/auth.py`)
+
+- **新規ユーザー登録時**:
+  - User、OAuthAccount、Profileを同一トランザクションで作成
+  - GitHubのログイン名を `github_username` として自動設定
+  - アトミック性を保証（一部だけが保存されるゾンビレコードを防止）
+
+- **既存ユーザーログイン時**:
+  - Profileが存在しない場合は自動作成（マイグレーション対策）
+  - 失敗してもログインは継続（Warningログのみ）
+
+### 3. Profile CRUD操作の改善 (`backend/app/crud/profile.py`)
+
+- `create_profile()` に `commit` パラメータを追加
+- `commit=False` の場合は `flush()` のみ実行（トランザクション制御用）
+
+### 4. スキルツリーAPIエンドポイントの改善 (`backend/app/api/endpoints/users.py`)
+
+- `/users/me/skill-trees` エンドポイントに `category` クエリパラメータを追加
+- カテゴリでフィルタリング可能に
+- 未指定の場合は全カテゴリを返却（後方互換性維持）
+
+## 動作フロー
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant F as Frontend
+    participant B as Backend
+    participant GH as GitHub
+
+    U->>F: ログインページアクセス
+    U->>F: 「GitHubでログイン」クリック
+    F->>B: GET /api/v1/auth/github/login
+    B->>GH: 認可ページへリダイレクト
+    GH->>U: 認可確認
+    U->>GH: Authorize
+    GH->>B: Callback with code
+    B->>GH: Access Token取得
+    B->>GH: ユーザー情報取得
+    B->>B: User + OAuthAccount + Profile作成
+    B->>F: ダッシュボードへリダイレクト（JWT Cookie付与）
+    F->>B: GET /users/me/skill-trees?category=web
+    alt スキルツリーが存在しない
+        F->>B: POST /analyze/skill-tree
+        B->>GH: リポジトリ分析
+        B->>B: スキルツリー生成
+        B->>F: スキルツリーデータ返却
+    else スキルツリーが存在する
+        B->>F: 既存スキルツリー返却
+    end
+    F->>U: スキルツリー表示
+```
+
+## セットアップ手順
+
+### 1. GitHub OAuth Appの作成
+
+詳細は [docs/GITHUB_OAUTH_SETUP.md](../docs/GITHUB_OAUTH_SETUP.md) を参照してください。
+
+**簡易手順**:
+
+1. [GitHub Developer Settings](https://github.com/settings/developers) にアクセス
+2. 「New OAuth App」をクリック
+3. 以下を設定:
+   - Homepage URL: `http://localhost:3000`
+   - Authorization callback URL: `http://localhost:8000/api/v1/auth/github/callback`
+4. Client IDとClient Secretを取得
+
+### 2. 環境変数の設定
+
+`backend/.env` ファイルに以下を設定:
+
+```dotenv
+# GitHub OAuth
+GITHUB_CLIENT_ID=<取得したClient ID>
+GITHUB_CLIENT_SECRET=<取得したClient Secret>
+
+# JWT設定（必須）
+JWT_SECRET_KEY=<ランダムな文字列>
+
+# 暗号化キー（必須）
+ENCRYPTION_KEY=<Fernetキー>
+
+# GitHub API Token（オプション、Rate Limit緩和）
+GITHUB_API_TOKEN=<Personal Access Token>
+```
+
+**キー生成方法**:
+
+```bash
+# JWT Secret Key
+python -c "import secrets; print(secrets.token_hex(32))"
+
+# Encryption Key
+python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"
+```
+
+### 3. 起動
+
+```bash
+# バックエンド
+cd backend
+poetry install
+poetry run uvicorn app.main:app --reload
+
+# フロントエンド（別ターミナル）
+cd frontend
+npm install
+npm run dev
+```
+
+### 4. 動作確認
+
+1. `http://localhost:3000/login` にアクセス
+2. 「🚀 GitHub でログイン（推奨）」ボタンをクリック
+3. GitHubの認可ページで「Authorize」をクリック
+4. ダッシュボードにリダイレクトされ、スキルツリーが表示される
+
+## セキュリティ対策
+
+### 実装済みの対策
+
+1. **CSRF対策** (ADR 014):
+   - HMAC署名付きstateパラメータ
+   - Cookie バインディング検証
+
+2. **XSS対策**:
+   - httpOnly Cookie（JavaScriptからアクセス不可）
+   - JWT を URL パラメータに含めない
+
+3. **トークン暗号化** (ADR 005):
+   - OAuthアクセストークンはFernetで暗号化してDB保存
+   - `ENCRYPTION_KEY` が未設定の場合は起動時にエラー
+
+4. **最小権限の原則**:
+   - GitHub OAuth スコープは `read:user` のみ要求
+
+5. **入力検証**:
+   - username: 1〜72文字制限（ADR 017）
+   - password: 1〜128文字制限（PBKDF2 DoS対策）
+
+## テスト
+
+```bash
+cd backend
+poetry run pytest tests/test_api/test_auth.py -v
+poetry run pytest tests/test_services/test_skill_tree_service.py -v
+```
+
+## トラブルシューティング
+
+### エラー: "GitHub OAuth は設定されていません"
+
+→ `.env` の `GITHUB_CLIENT_ID` と `GITHUB_CLIENT_SECRET` を確認し、バックエンドを再起動
+
+### エラー: "Invalid or expired state parameter"
+
+→ GitHub OAuth Appの `Authorization callback URL` が正しいか確認
+
+### スキルツリーが表示されない
+
+→ ブラウザの開発者ツールでネットワークタブを確認:
+
+- `/users/me/skill-trees` が 200 を返しているか？
+- 404の場合: Profileが作成されていない可能性（DBを確認）
+- 500の場合: バックエンドログを確認
+
+## 関連Issue
+
+- Issue #71: GitHub OAuth認証とスキルツリー生成の統合
+- Issue #59: GitHub OAuth認証の実装
+- Issue #61: 認証統合（Cookie ベース）
+- Issue #54: スキルツリー生成（LLM実装）
+
+## ADR参照
+
+- ADR 014: JWT Cookie ベース認証
+- ADR 005: OAuthトークンの暗号化保存
+- ADR 017: 入力バリデーション戦略

backend/app/api/endpoints/auth.py

@@ -15,6 +15,7 @@
 
 import hashlib
 import hmac
+import logging
 import secrets
 import time
 from datetime import datetime, timedelta, timezone
@@ -32,9 +33,11 @@
 from app.core.password import verify_password
 from app.crud import oauth_account as crud_oauth
 from app.crud import user as crud_user
+from app.crud import profile as crud_profile
 from app.db.session import get_db
 from app.schemas.oauth_account import OAuthAccountCreate, OAuthTokenUpdate
 from app.schemas.user import UserCreate
+from app.schemas.profile import ProfileCreate
 
 router = APIRouter()
 
@@ -286,16 +289,32 @@ async def github_callback(
             OAuthTokenUpdate(access_token=access_token),
         )
         db_user = crud_user.get_user(db, existing_oauth.user_id)
+
+        # 既存ユーザーでもProfileが存在しない場合は作成（マイグレーション対策: Issue #71）
+        if db_user and not crud_profile.get_profile_by_user_id(db, db_user.id):
+            try:
+                crud_profile.create_profile(
+                    db,
+                    ProfileCreate(
+                        user_id=db_user.id,
+                        github_username=github_login_name,
+                    ),
+                )
+            except Exception as e:
+                # Profileの作成に失敗してもログインは継続（Warning のみ）
+                logger = logging.getLogger(__name__)
+                logger.warning(
+                    f"Failed to create profile for user_id={db_user.id}: {e}"
+                )
     else:
         # 新規登録: username の重複回避
         username = github_login_name
         if crud_user.get_user_by_username(db, username) is not None:
             username = f"{github_login_name}_{github_user_id}"
 
-        # User と OAuthAccount を同一トランザクションで作成（アトミック性保証）
-        # commit=False にして両方を flush した後、一括 commit する。
+        # User と OAuthAccount と Profile を同一トランザクションで作成（アトミック性保証）
+        # commit=False にして全てを flush した後、一括 commit する。
         # これにより「User だけが永続化されるゾンビレコード」を防ぐ。
-        # create_user / create_oauth_account の flush も含めて全体を囲う（C-1修正）
         try:
             db_user = crud_user.create_user(
                 db, UserCreate(username=username), commit=False
@@ -311,6 +330,15 @@ async def github_callback(
                 ),
                 commit=False,
             )
+            # Profile 作成（スキルツリー生成に必要: Issue #71）
+            crud_profile.create_profile(
+                db,
+                ProfileCreate(
+                    user_id=db_user.id,
+                    github_username=github_login_name,
+                ),
+                commit=False,
+            )
             db.commit()
         except Exception as e:
             db.rollback()

backend/app/api/endpoints/users.py

@@ -8,7 +8,7 @@
 /users/{id} 系の管理者向けエンドポイントは、別途管理 API モジュール／Issue で扱う。
 """
 
-from fastapi import APIRouter, Depends, HTTPException
+from fastapi import APIRouter, Depends, HTTPException, Query
 from sqlalchemy.orm import Session
 
 from app.crud import badge as crud_badge
@@ -19,6 +19,7 @@
 from app.db.session import get_db
 from app.dependencies.auth import get_current_user
 from app.models.user import User
+from app.models.enums import SkillCategory
 from app.schemas.badge import Badge as BadgeSchema
 from app.schemas.profile import Profile as ProfileSchema
 from app.schemas.profile import ProfileCreate, ProfileUpdate
@@ -103,11 +104,33 @@ def get_my_badges(
 
 @router.get("/me/skill-trees", response_model=list[SkillTreeSchema])
 def get_my_skill_trees(
+    category: str | None = Query(
+        None,
+        description="スキルカテゴリでフィルタ（web/ai/security/infrastructure/game/design）",
+    ),
     db: Session = Depends(get_db),
     current_user: User = Depends(get_current_user),
 ) -> list[SkillTreeSchema]:
-    """認証済みユーザー自身のスキルツリー一覧取得（6カテゴリ）。"""
-    return crud_skill_tree.get_skill_trees_by_user(db, current_user.id)
+    """認証済みユーザー自身のスキルツリー取得。
+
+    category パラメータが指定された場合は該当カテゴリのみ返却。
+    未指定の場合は全カテゴリ（6カテゴリ）を返却。
+    """
+    all_trees = crud_skill_tree.get_skill_trees_by_user(db, current_user.id)
+
+    if category:
+        # categoryでフィルタリング
+        try:
+            # 文字列をEnumに変換して検証
+            cat_enum = SkillCategory(category.lower())
+            return [tree for tree in all_trees if tree.category == cat_enum.value]
+        except ValueError:
+            raise HTTPException(
+                status_code=400,
+                detail=f"Invalid category: {category}. Valid values: web, ai, security, infrastructure, game, design",
+            )
+
+    return all_trees
 
 
 @router.get("/me/quest-progress", response_model=list[QuestProgressSchema])

backend/app/crud/profile.py

@@ -11,24 +11,35 @@ def get_profile_by_user_id(db: Session, user_id: int) -> Profile | None:
     return db.query(Profile).filter(Profile.user_id == user_id).first()
 
 
-def create_profile(db: Session, profile_in: ProfileCreate) -> Profile:
+def create_profile(
+    db: Session, profile_in: ProfileCreate, commit: bool = True
+) -> Profile:
     data = profile_in.model_dump()
     # HttpUrlをstrに変換
     if data.get("portfolio_url"):
         data["portfolio_url"] = str(data["portfolio_url"])
     db_profile = Profile(**data)
     db.add(db_profile)
-    try:
-        db.commit()
-    except IntegrityError as e:
-        db.rollback()
-        raise ValueError(
-            f"Profile for user_id={profile_in.user_id} already exists"
-        ) from e
-    except Exception:
-        db.rollback()
-        raise
-    db.refresh(db_profile)
+    if commit:
+        try:
+            db.commit()
+        except IntegrityError as e:
+            db.rollback()
+            raise ValueError(
+                f"Profile for user_id={profile_in.user_id} already exists"
+            ) from e
+        except Exception:
+            db.rollback()
+            raise
+        db.refresh(db_profile)
+    else:
+        try:
+            db.flush()
+        except IntegrityError as e:
+            db.rollback()
+            raise ValueError(
+                f"Profile for user_id={profile_in.user_id} already exists"
+            ) from e
     return db_profile