Browserbase MCP Oauth2

使用OAuth2身份验证的浏览器基MCP服务器

基于Browsebase构建的强大浏览器自动化MCP（模型上下文协议）服务器，支持OAuth2身份验证，实现了Claude.ai的无缝集成。

🚀 特性

• 浏览器自动化：完整的Playwright浏览器自动化功能
• OAuth2身份验证：用于Claude.ai的Google OAuth2集成
• 双重身份验证：具有Cloud Run IAM回退的OAuth2
• HundredX集成：@hundredxinc.com帐户的域验证
• Claude.ai准备好了：与Claude.ai远程MCP服务器直接集成
• 浏览器基础云：通过Browsebase实现无服务器浏览器自动化
• 会话管理：令牌过期的安全会话处理

🏗️ 建筑

Claude.ai → OAuth2 Flow → Browserbase MCP Server → Browserbase Cloud → Browser Automation
                ↓
        Google Authentication
                ↓
        HundredX Domain Validation

📦 安装

先决条件

• Node.js 18+
• Browserbase帐户和API密钥
• Docker（用于部署）
• 谷歌云SDK(gcloud)

快速开始

1. 克隆存储库:

   git clone https://github.com/ccowan190/browserbase-mcp-oauth2.git
   cd browserbase-mcp-oauth2

1. 安装依赖项:

   npm install && npm run build

1. 配置环境变量:

   export BROWSERBASE_API_KEY="your-browserbase-api-key"
   export BROWSERBASE_PROJECT_ID="your-browserbase-project-id"
   export OAUTH2_CLIENT_ID="your-google-client-id"
   export OAUTH2_CLIENT_SECRET="your-google-client-secret"

1. 部署到Google Cloud Run:

   ./deploy-browserbase-oauth2.sh

🔧 配置

环境变量

\*如果未提供，服务器将回退到Cloud Run IAM身份验证

浏览器基础设置

1. 创建浏览器基础帐户：注册地址： 浏览器库
2. 获取API凭据:

- API仪表板中的密钥 - 项目设置中的项目ID

OAuth2设置

1. 创建OAuth2凭据 在……里面 谷歌云控制台:

- 应用程序类型：Web应用程序 - 名称：Claude.ai浏览器基础MCP服务器 - 授权来源： https://claude.ai, https://api.anthropic.com - 重定向URI： https://claude.ai/oauth/callback, https://api.anthropic.com/oauth/callback

🌐 浏览器自动化功能

可用工具

• 页面导航：导航到URL，返回/前进
• 元素交互：单击、键入、悬停在元素上
• 表单处理：填写表格，提交数据
• 电脑屏幕截图工具：拍摄整页或元素截图
• 内容提取：获取文本、HTML或结构化数据
• 等待操作：等待元素、网络或超时
• JavaScript执行：在浏览器上下文中运行自定义JavaScript

示例用法

// Navigate to a website
await browserbase.navigate('https://example.com');

// Take a screenshot
const screenshot = await browserbase.screenshot();

// Click an element
await browserbase.click('button[type="submit"]');

// Extract text content
const text = await browserbase.getText('.content');

🌐 API终点

健康检查

GET /health

答复：

{
  "status": "ok",
  "service": "browserbase-mcp-server",
  "auth": "oauth2|iam",
  "browserbase": "connected"
}

身份验证状态

GET /auth/status

答复：

{
  "auth_type": "oauth2|iam",
  "auth_enabled": true,
  "login_url": "/oauth/login"
}

OAuth2身份验证（启用时）

GET /oauth/login          # Initiates OAuth2 flow
GET /oauth/callback       # Handles OAuth2 callback

MCP协议

POST /mcp                 # Browser automation operations (requires auth)

🔐 Claude.ai集成

选项1:OAuth2身份验证（推荐）

1. 使用配置的OAuth2凭据进行部署
2. 在Claude.ai集成设置中：

- 服务URL: https://your-service-url/mcp - OAuth客户端ID：您的Google OAuth2客户端ID

选项2:NPM包（本地开发）

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["@browserbasehq/mcp"],
      "env": {
        "BROWSERBASE_API_KEY": "your-api-key",
        "BROWSERBASE_PROJECT_ID": "your-project-id"
      }
    }
  }
}

选项3：代理方法（开发）

# Start authenticated proxy
gcloud run services proxy browserbase-mcp-server --region=us-central1 --project=your-project --port=8080

# Configure Claude Desktop
# URL: http://localhost:8080/mcp

🧪 测试

运行综合测试套件：

./test-browserbase-oauth2.sh

测试包括：

• 健康检查端点
• 身份验证状态
• MCP端点保护
• OAuth2流（启用时）
• 浏览器自动化功能

🛡️ 安全功能

• 域验证：只允许使用@hundredxinc.com电子邮件地址
• 令牌到期：会话令牌在1小时后过期
• 安全会话：每个用户隔离的浏览器会话
• 仅限HTTPS：所有OAuth2流都使用安全连接
• IAM回退：未配置OAuth2时，云运行IAM安全

📁 项目结构

├── src/
│   ├── oauth2/                   # OAuth2 authentication
│   │   ├── oauth2.ts            # OAuth2 handler implementation
│   │   └── index.ts             # OAuth2 exports
│   ├── tools/                   # Browser automation tools
│   ├── server.ts                # Main MCP server
│   ├── sessionManager.ts       # Session management
│   └── transport.ts             # HTTP transport with OAuth2
├── deploy-browserbase-oauth2.sh # Deployment script
├── test-browserbase-oauth2.sh   # Testing script
├── Dockerfile                   # Container configuration
└── README.md                    # This file

🚀 部署

谷歌云运行

# Build and deploy
./deploy-browserbase-oauth2.sh

# Or manually:
docker build -t gcr.io/your-project/browserbase-mcp:oauth2 .
docker push gcr.io/your-project/browserbase-mcp:oauth2
gcloud run deploy browserbase-mcp-server \
  --image=gcr.io/your-project/browserbase-mcp:oauth2 \
  --set-env-vars="OAUTH2_CLIENT_ID=your-id,OAUTH2_CLIENT_SECRET=your-secret,BROWSERBASE_API_KEY=your-key"

地方发展

# Run locally with OAuth2
npm run build
BROWSERBASE_API_KEY=your-key \
OAUTH2_CLIENT_ID=your-id \
OAUTH2_CLIENT_SECRET=your-secret \
node cli.js

🔄 身份验证模式

OAuth2模式

• 启用：何时 OAUTH2_CLIENT_ID 和 OAUTH2_CLIENT_SECRET 已设置
• 流动：谷歌OAuth2→ 域确认→ 会话令牌
• 克劳德·艾：与OAuth客户端ID直接集成

IAM模式（回退）

• 启用：未配置OAuth2凭据时
• 流动：Google Cloud IAM身份验证
• 克劳德·艾：需要代理或服务帐户

📊 监控

监控您的部署：

# Check health
curl https://your-service-url/health

# Check auth status
curl https://your-service-url/auth/status

# View logs
gcloud run services logs read browserbase-mcp-server --region=us-central1

🎯 用例

• Web剪贴：从动态网站中提取数据
• 表单自动化：自动填写和提交表单
• 测试：自动化UI测试和验证
• 截图：捕获网站截图以供记录
• 数据收集：从多个来源收集信息
• 监控：网站正常运行时间和内容监控

🤝 贡献

1. 分叉存储库
2. 创建要素分支
3. 进行更改
4. 添加测试
5. 提交拉取请求

📄 许可证

该项目基于Browsebase的MCP服务器，并增强了OAuth2功能。

🆘 支持

• 问题:
• 浏览器基础文档: browserbase.com/docs
• MCP协议: 模型上下文协议.io

🎯 路线图

• \[\]JWT令牌签名以增强安全性
• \[\]多个OAuth2提供程序支持
• \[\]高级会话管理
• \[\]浏览器会话录制
• \[\]自定义浏览器配置
• \[\]并行浏览器操作

______________________________________________________________________

内置于❤️ 用于浏览器自动化和Claude.ai集成。