Oauth For Playwright

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 结构，帮助您找到正确的选择器。

配置选项

环境变量

命令行参数

# 使用无头模式（默认）
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 登录"       │                            │                       │
 │─────────────────────────>│                            │                       │
 │                          │  启动浏览器                 │                       │
 │                          │───────────────────────────>│                       │
 │                          │                            │  自动填写用户名+密码  │
 │                          │                            │──────────────────────>│
 │                          │                            │                       │
 │                          │                            │  点击"获取验证码"    │
 │                          │                            │──────────────────────>│
 ││                            │                       │
 │                          │  填写验证码并提交          │                       │
 │                          │───────────────────────────>│──────────────────────>│
 │                          │                            │                       │
 │                          │  "✓ 登录成功！"            │                       │
 │> .gitignore

1. 定期更换密码

- 测试完成后更换阿里云密码 - 不要在生产环境使用测试账号

1. 限制 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