GitHub鏈接：github_auth

流程圖

功能特性

• ? GitHub OAuth 認證
• ? 獲取用戶基本信息
• ? 顯示用戶的 GitHub 倉庫列表
• ? 安全的會話管理
• ? 響應式用戶界面

技術棧

后端

• Flask - Python Web 框架
• Flask-CORS - 跨域資源共享
• Requests - HTTP 庫
• Session - 會話管理

前端

• React - 用戶界面庫
• React Router - 路由管理
• Axios - HTTP 客戶端
• CSS3 - 樣式設計

項目結構

github_auth/
├── app.py                 # Flask 后端應用
├── package.json          # Node.js 依賴配置
├── public/
│   └── index.html        # HTML 模板
├── src/
│   ├── App.js            # React 主應用組件
│   ├── App.css           # 應用樣式
│   ├── index.js          # React 入口文件
│   └── components/
│       ├── Home.js       # 首頁組件
│       ├── AuthSuccess.js # 認證成功頁面
│       └── Dashboard.js  # 用戶儀表板
└── README.md

快速開始

前置要求

• Python 3.11+
• Node.js 16+
• GitHub 賬號

1. 創建 GitHub OAuth 應用

1. 訪問 GitHub Developer Settings
2. 點擊 “New OAuth App”
3. 填寫應用信息：
   • Application name: GitHub Auth Demo
   • Homepage URL: http://localhost:3000
   • Authorization callback URL: http://localhost:5000/auth/github/callback
4. 獲取 Client ID 和 Client Secret

2. 配置環境

在 app.py 中更新你的 GitHub OAuth 配置：

GITHUB_CLIENT_ID = 'your_client_id_here'
GITHUB_CLIENT_SECRET = 'your_client_secret_here'

3. 安裝依賴

后端依賴

# 使用 uv (推薦)
uv sync# 或使用 pip
pip install flask flask-cors requests

前端依賴

npm install

4. 啟動應用

啟動后端服務器

# 使用 uv
uv run python app.py# 或直接運行
python app.py

后端服務器將在 http://localhost:5000 啟動

啟動前端開發服務器

npm start

前端應用將在 http://localhost:3000 啟動

5. 使用應用

1. 打開瀏覽器訪問 http://localhost:3000
2. 點擊 “使用 GitHub 登錄” 按鈕
3. 在 GitHub 授權頁面確認授權
4. 成功登錄后查看用戶信息和倉庫列表

API 端點

認證相關

• GET /auth/github - 重定向到 GitHub OAuth 授權頁面
• GET /auth/github/callback - 處理 GitHub OAuth 回調
• POST /api/logout - 用戶登出

用戶數據

• GET /api/user - 獲取當前登錄用戶信息
• GET /api/repos - 獲取用戶的 GitHub 倉庫列表