Part 6: 总结与实战任务

回顾端到端流程，领取课后实战任务

Part 1

环境搭建
Chrome DevTools MCP

Part 2

MCP 爬取目标系统
AI 生成需求

Part 3

AI 初始化项目
建表 + 骨架 + 跑通

Part 4

AI 写管理功能
系统管理 + 认证管理

Part 5

AI 写登录认证
管理后台+密码+短信+企业

端到端闭环

MCP 爬需求 → AI 建项目
→ AI 写代码 → MCP 验证

端到端 AI 开发流程回顾

1

Chrome DevTools MCP 爬取目标系统 — AI 打开 kangke.xyz:9999，自动截图、点击、记录，输出 7 个模块需求

⬇

2

AI 从零初始化项目 — 设计 5 张表 → 生成 SQL → Spring Boot + Vue 3 骨架 → 跑通

⬇

3

AI 写管理功能 — 系统管理（管理员/角色/操作日志）+ 统一认证管理（自然人用户/应用/登录日志）

⬇

4

AI 写登录认证 — 管理后台登录 → 密码登录 → 短信登录 → 企业登录。MCP 测试 + Code Review。

⬇

5

Chrome DevTools MCP 贯穿全程 — 爬需求用它、验证页面用它、测试接口用它

核心理念：AI 负责「怎么做」，你负责「做什么」和「验证对不对」。Chrome DevTools MCP 让 AI 能自己看结果。

你学会了什么

Prompt 技能

Prompt 公式：角色 + 上下文 + 需求 + 约束
如何写清晰的接口需求
如何指定技术栈和约束条件
如何让 AI 修正错误

MCP 技能

用 MCP 控制浏览器抓取需求
用 MCP 验证页面和功能
用 MCP 自动测试登录流程

协作流程

先规划再动手
审查 AI 的输出
逐模块验证
有问题贴给 AI

核心认知

你负责「做什么」，AI 负责「怎么做」
代码是 AI 的产出物，不是学习目标
最终决策权在你

课后实战任务（必做）

脱离教程，独立用 AI + MCP 完成以下功能

任务 A：OAuth2 授权码模式

让 AI 实现 /authorize 和 /token 端点。第三方应用通过授权码获取 Access Token。
要求：授权码存 Redis（5 分钟一次性），Token 7 天有效，client_secret 校验。

任务 B：SSO 单点登录

配置 Sa-Token SSO，UAS 作为认证中心。一处登录，所有应用通行。一处登出，处处失效。

任务 C：第三方应用对接

创建一个简单的第三方应用，接入 UAS 的 OAuth2 登录。用 MCP 测试完整授权流程。

任务 D：AI Code Review

选中任务 A/B/C 的代码，让 AI 审查安全性、性能、健壮性。记录发现的问题并修复。

操作步骤

1. 打开 Builder 模式
2. 写详细 Prompt（用公式！）
3. AI 生成代码 → 审查 diff
4. 修改不符合需求的部分
5. 启动项目 → MCP 验证
6. 让 AI 做 Code Review

提交要求：Git 仓库目录结构

完成后将项目提交到 Git 仓库，目录结构如下：

your-repo/ ├─ oauth/ ← 统一身份认证系统 │ ├─ uas-admin/ ← 后端入口模块 │ ├─ uas-auth/ ← 认证业务模块 │ ├─ uas-common/ ← 通用工具模块 │ └─ uas-ui/ ← 前端 Vue 3 项目 │ ├─ demo/ ← 模拟第三方接入服务 │ ├─ demo-server/ ← 第三方后端（Spring Boot） │ └─ demo-ui/ ← 第三方前端（Vue 3） │ └─ docs/ ← 项目文档 ├─ 需求功能规格说明书.docx ├─ 概要设计文档.docx ├─ 详细设计文档.docx ├─ 数据库设计文档.docx ├─ 系统测试用例.docx ├─ 系统测试报告.docx ├─ 第三方接入文档.docx └─ 性能测试报告.docx ← 可选

代码部分

oauth/ — 统一身份认证前后端代码
demo/ — 模拟第三方接入的前后端代码

文档部分（docs/）

需求功能规格说明书 ✅
概要设计文档 ✅
详细设计文档 ✅
数据库设计文档 ✅
系统测试用例 ✅
系统测试报告 ✅
性能测试报告（可选）

提示：文档也可以让 AI 帮你生成！给 AI 你的代码和需求，让它输出标准文档。

任务 A 提示：OAuth2 授权码流程

授权码流程（5步）

1

用户点「第三方应用登录」→ 跳转 UAS 授权页

⬇

2

UAS 检查登录状态，未登录先登录

⬇

3

用户确认授权 → 生成授权码 code（Redis，5 分钟）

⬇

4

重定向回应用 → 应用后端用 code + secret 换 token

⬇

5

UAS 返回 Access Token → 应用用 token 获取用户信息

起手 Prompt

请实现 OAuth2 授权码模式：

/authorize：GET，检查登录，校验 client_id 和 redirect_uri，生成授权码存 Redis，302 重定向。

/token：POST，校验 client_id + client_secret，用授权码换 userId（一次性），生成 Access Token 返回。

约束：Spring Boot 3 + Sa-Token + Redis，异常 ServiceException。

MCP 验证：让 AI 打开浏览器，模拟从第三方应用跳转到 UAS 登录授权的完整流程。

OAuth2 接口设计

/authorize 端点

参数	说明
client_id	应用的 app_key
redirect_uri	回调地址
response_type	固定值 "code"
state	防 CSRF

核心逻辑

检查登录 → 校验应用 → 生成授权码 → Redis 存储 → 重定向

/token 端点

参数	说明
grant_type	固定值 "authorization_code"
code	授权码
client_id	应用的 app_key
client_secret	应用的 app_secret

核心逻辑

校验应用 → 用 code 换 userId（一次性）→ 生成 Token → 返回

你负责：理解流程、设计接口、审查 AI 输出。
AI 负责：实现具体逻辑、处理边界情况、生成代码。

加分项 & 扩展方向

加分任务

用户注册 + 忘记密码

AI 生成注册接口、重置密码流程。验证码 + BCrypt。

登录日志统计

AI 生成 MyBatis 聚合查询：近 7 天登录次数、方式分布

安全加固

让 AI 审查并实施安全改进（限流、参数过滤、SQL 防注入）

后续可探索

MFA 多因素认证

增加 TOTP 动态口令（类 Google Authenticator）

社交登录

接入微信、支付宝 OAuth 扫码登录

容器化部署

Dockerfile + docker-compose.yml 一键部署

AI 工具生态 & 核心竞争力

AI 开发工具

工具	类型	特点
Trae	AI IDE	免费，内置 MCP 支持
Claude Code	CLI 工具	支持 MCP，适合命令行场景
Cursor	AI IDE	付费，代码补全强
Copilot	代码补全	VS Code 内集成
Codeium	代码补全	免费

今天学的流程不依赖特定工具。换任何 AI IDE 都能复用这套方法论。

你的核心竞争力

AI 无法替代的

系统设计思维
业务理解能力
代码审查能力
把需求说清楚（Prompt 工程）

AI 正在改变的

记 API → AI 帮查
写样板代码 → AI 一秒生成
手动测试 → MCP 自动验证

谢谢大家!

开始你的 AI 端到端开发之旅

项目代码

本课程所有代码
在项目仓库中

课后任务

OAuth2 + SSO
第三方应用对接

有问题？

打开 AI IDE
MCP 验证

ESC 返回目录｜ ← → 翻页

Part 6: 总结与实战任务

Part 1

Part 2

Part 3

Part 4

Part 5

端到端闭环

端到端 AI 开发流程回顾

你学会了什么

Prompt 技能

MCP 技能

协作流程

核心认知

课后实战任务（必做）

任务 A：OAuth2 授权码模式

任务 B：SSO 单点登录

任务 C：第三方应用对接

任务 D：AI Code Review

提交要求：Git 仓库目录结构

代码部分

文档部分（docs/）

任务 A 提示：OAuth2 授权码流程

授权码流程（5步）

起手 Prompt

OAuth2 接口设计

/authorize 端点

核心逻辑

/token 端点

核心逻辑

加分项 & 扩展方向

加分任务

用户注册 + 忘记密码

登录日志统计

安全加固

后续可探索

MFA 多因素认证

社交登录

容器化部署

AI 工具生态 & 核心竞争力

AI 开发工具

你的核心竞争力

AI 无法替代的

AI 正在改变的

推荐学习资源

Java / Spring Boot

Sa-Token

OAuth2.0 / 安全

Chrome DevTools MCP

谢谢大家!

项目代码

课后任务

有问题？