使用说明
OAuth 半自动验证 - Playwright MCP 版
使用 Playwright MCP 和 Claude Code 验证阿里云 RAM SSO 登录流程。
方案特点
- ✅ 浏览器操作自动化 - 自动填写用户名、密码、点击按钮
- 📱 SMS 验证码提示 - 当需要验证码时，Claude 会提示您输入
- 🆓 零成本 - 不需要 Twilio 等付费服务
- 🖥️ 支持无头服务器 - 在 Ubuntu 无头服务器上运行
- 📸 自动截图 - 每个步骤自动保存截图用于调试
适用场景
- 开发测试 OAuth 登录流程
- CI/CD 中的登录验证
- 定期回归测试
- 演示和文档录制
快速开始
1. 安装依赖
cd /home/denny/projects/oauth-for-playwright
npm install
npx playwright install chromium
2. 配置环境变量
创建 .env 文件：
cp .env.example .env
编辑 .env：
# Kibana 配置
KIBANA_URL=http://47.236.247.55:5601
USERNAME=dongdongplanet@1437310945246567.onaliyun.com
PASSWORD=Summer11
# 手机号（用于 SMS 验证）
MOBILE=18972952966
# 浏览器配置
HEADLESS=true # true=无头模式, false=可见窗口（调试用）
3. 运行验证
方法 A: 直接运行脚本
node oauth_validation_playwright.js
当提示输入验证码时，查看您的手机短信，然后输入 6 位验证码。
方法 B: 在 Claude Code 中使用
在 Claude Code 中直接运行：
node oauth_validation_playwright.js
Claude 会自动检测到需要输入验证码，并询问您：
═══════════════════════════════════════════════════════════════
📱 SMS 验证码验证
═══════════════════════════════════════════════════════════════
验证码已发送到: 18972952966
请查看您的手机短信...
请输入 6 位验证码:
您查看手机后回复验证码即可，Claude 会自动继续。
方法 C: 使用 Playwright MCP 工具
Claude Code 内置了 Playwright MCP 工具，可以逐步控制浏览器：
# 导航到 OAuth 授权页面
playwright_browser_navigate {"url": "http://47.236.247.55:5601/api/security/aliyun/oauth/authorize?redirect_to=/"}
# 获取页面结构
playwright_browser_snapshot
# 当需要验证码时，Claude 会提示您输入
使用示例
完整的 Claude Code 对话
您：
请帮我验证阿里云 OAuth 登录流程
Claude：
我来帮您验证阿里云 OAuth 登录流程。这将在浏览器中自动完成大部分操作，
当需要 SMS 验证码时我会询问您。
═══════════════════════════════════════════════════════════════
OAuth 半自动验证
═══════════════════════════════════════════════════════════════
目标: http://47.236.247.55:5601
用户名: dongdongplanet@1437310945246567.onaliyun.com
手机号: 18972952966
[步骤 1] 正在获取 OAuth 授权 URL...
✓ 已获取授权 URL
[步骤 2] 正在导航到阿里云登录页面...
✓ 已到达登录页面
[步骤 3] 正在填写用户名...
✓ 用户名已填写
[步骤 4] 正在检查并填写密码...
✓ 密码已填写
[步骤 5] 正在检测 SMS 验证界面...
检测到 SMS 验证
[步骤 6] 正在点击"获取验证码"...
✓ 已点击"获取验证码"按钮
═══════════════════════════════════════════════════════════════
📱 SMS 验证码验证
═══════════════════════════════════════════════════════════════
验证码已发送到: 18972952966
请查看您的手机短信...
请输入 6 位验证码:
您：
847291
Claude：
[步骤 8] 正在填写验证码...
✓ 验证码已填写
[步骤 9] 正在提交...
✓ 已提交
[步骤 10] 等待跳转到 Kibana...
✓ 已跳转到 Kibana
[步骤 11] 验证登录状态...
═══════════════════════════════════════════════════════════════
✅ 登录成功！
═══════════════════════════════════════════════════════════════
检测到 Kibana UI 元素:
- Kibana UI 组件
- Discover 页面
- Dashboards
截图已保存: /tmp/oauth-success.png
OAuth 验证完成！您已成功通过阿里云 RAM 认证并登录到 Kibana。
调试
查看浏览器窗口
HEADLESS=false node oauth_validation_playwright.js
这会显示浏览器窗口，您可以实时看到操作过程。
查看截图
脚本会自动保存截图到 /tmp/：
ls -la /tmp/oauth-*.png
截图文件：
oauth-step1-login.png- 登录页面oauth-step2-username.png- 填写用户名后oauth-step3-password.png- 填写密码后oauth-step4-sms.png- SMS 验证后oauth-success.png- 登录成功oauth-failure.png- 登录失败oauth-error.png- 错误情况
使用 Playwright MCP 检查页面
如果脚本找不到元素，可以使用 Playwright MCP 的 snapshot 功能：
playwright_browser_navigate {"url": "http://47.236.247.55:5601"}
playwright_browser_snapshot
这会显示当前页面的 DOM 结构，帮助您找到正确的选择器。
配置选项
环境变量
| 变量 | 必需 | 默认值 | 说明 |
|---|---|---|---|
KIBANA_URL |
否 | http://47.236.247.55:5601 |
Kibana URL |
USERNAME |
否 | dongdongplanet@... |
阿里云用户名 |
PASSWORD |
否 | Summer11 |
阿里云密码 |
MOBILE |
否 | 18972952966 |
接收验证码的手机号 |
HEADLESS |
否 | true |
是否使用无头模式 |
命令行参数
# 使用无头模式（默认）
node oauth_validation_playwright.js
# 显示浏览器窗口（调试用）
HEADLESS=false node oauth_validation_playwright.js
# 指定不同的手机号
MOBILE=13800138000 node oauth_validation_playwright.js
# 指定不同的 Kibana URL
KIBANA_URL=http://myserver:5601 node oauth_validation_playwright.js
架构
用户 Claude Code Playwright MCP 阿里云 OAuth
│ │ │ │
│ "验证 OAuth 登录" │ │ │
│─────────────────────────>│ │ │
│ │ 启动浏览器 │ │
│ │───────────────────────────>│ │
│ │ │ 自动填写用户名+密码 │
│ │ │──────────────────────>│
│ │ │ │
│ │ │ 点击"获取验证码" │
│ │ │──────────────────────>│
│<═══════════════════════════════════════════════════════════════════════════════│
│ │ │ │
│ │ "请输入 6 位验证码：" │ │
│<─────────────────────────│ │ │
│ │ │ │
│ "123456" │ │ │
│─────────────────────────>│ │ │
│ │ 填写验证码并提交 │ │
│ │───────────────────────────>│──────────────────────>│
│ │ │ │
│ │ "✓ 登录成功！" │ │
│<─────────────────────────│ │ │
与全自动化方案对比
| 特性 | 半自动化（本方案） | Twilio 全自动化 |
|---|---|---|
| 成本 | 免费 | $3-4/月 |
| SMS 处理 | 人工输入 | 自动获取 |
| 配置复杂度 | 简单 | 复杂 |
| 依赖服务 | 无 | Twilio API |
| 适用场景 | 测试、偶尔使用 | 高频自动化、CI/CD |
| 可靠性 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
推荐： 对于开发和测试，本方案更加经济实用。
常见问题
Q: 为什么需要人工输入 SMS 验证码？
A: 这样可以节省 Twilio 等付费服务的成本。对于开发和测试场景，手动输入验证码只需几秒钟，是最经济的选择。
如果您需要 100% 自动化，可以使用 Twilio 方案（需要每月 $3-4 的费用）。
Q: 脚本找不到用户名输入框？
A: 阿里云可能更新了页面结构。您可以：
- 使用
HEADLESS=false查看浏览器窗口 - 使用
playwright_browser_snapshot查看当前页面结构 - 修改脚本中的选择器
Q: 验证码输入后没有反应？
A:
- 检查验证码是否正确（6 位数字）
- 查看
/tmp/oauth-step4-sms.png确认是否正确填写 - 尝试手动点击提交按钮看是否有错误提示
Q: 登录后没有跳转到 Kibana？
A: 可能是：
- 角色映射配置问题 - 检查 Elasticsearch 中的角色映射
- OAuth 回调失败 - 检查 Kibana 日志
- 会话超时 - 增加等待时间
Q: 可以在 CI/CD 中使用吗？
A: 可以，但需要修改为全自动化方案（使用 Twilio 接收 SMS）。
或者，您可以设置 SMS 转发服务：
// 使用 SMS 转发 API
async function getSMSCode() {
const response = await fetch('https://your-sms-service.com/api/latest');
const data = await response.json();
return data.code;
}
安全注意事项
-
不要提交 .env 文件到 Git
echo ".env" >> .gitignore -
定期更换密码
- 测试完成后更换阿里云密码
- 不要在生产环境使用测试账号
-
限制 Kibana 访问
- 使用 IP 白名单
- 启用 HTTPS
- 配置合适的会话超时
文件结构
/home/denny/projects/oauth-for-playwright/
├── plan.md # 方案文档（中文）
├── oauth_validation_playwright.js # 主脚本
├── package.json # 依赖配置
├── .env.example # 环境变量模板
└── README.md # 本文件
故障排除
安装 Playwright 浏览器失败
# 安装系统依赖
sudo apt-get update
sudo apt-get install -y libglib2.0-0 libnss3 libnspr4 libatk1.0-0 \
libatk-bridge2.0-0 libcups2 libdrm2 libdbus-1-3 libxkbcommon0 \
libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 \
libpango-1.0-0 libcairo2 libasound2
# 重新安装浏览器
npx playwright install chromium
脚本超时
# 增加超时时间
MOBILE=18972952966 node -e "
const CONFIG = { SMS_MAX_WAIT: 300000 }; // 5 分钟
require('./oauth_validation_playwright.js');
"
贡献
欢迎提交 Issue 和 PR！
许可证
MIT
作者: Claude Code
最后更新: 2026-02-14
