使用说明

🛡️ MCP客户端-OAuth2工具

一个现代的、类似Postman的MCP（模型上下文协议）客户端，支持OAuth2身份验证。使用Next.js、TypeScript和 oauth4webapi.

✨ 特性

🔐 使用PKCE的OAuth2授权码流 -安全身份验证
🎯 供应商不可知 -适用于Okta、Auth0或任何OAuth2提供者
🔄 许可证管理 -轻松查看、刷新和清除令牌
👤 用户电子邮件跟踪 -显示经过身份验证的用户电子邮件
📝 请求构建器 -HTTP方法选择器和URL输入
📨 MCP消息编辑器 -MCP请求的JSON编辑器
📊 响应查看器 -打印精美的JSON响应，带有状态代码
⏱️ 性能指标 -响应时间跟踪
📋 复制到剪贴板 -轻松响应复制
🎨 现代用户界面 -使用Shadcn/ui组件构建

🚀 快速开始

先决条件

已安装Node.js 18+
Okta帐户（或其他OAuth2提供商）
Okta应用程序配置了：
- 应用类型：单页应用程序（SPA）
- 资助类型：带有PKCE的授权码
- 重定向URI: http://localhost:3000/api/auth/callback

安装

# Dependencies are already installed
npm install

# Start the development server
npm run dev

打开 http://localhost:3000 在您的浏览器中。

🔧 配置

1.更新 `.env.local`

重要：您需要设置Okta客户ID！

# OAuth Configuration
NEXT_PUBLIC_OAUTH_REDIRECT_URI=http://localhost:3000/api/auth/callback

# Okta Configuration
NEXT_PUBLIC_OKTA_ISSUER=https://trial-3882279.okta.com/oauth2/default
NEXT_PUBLIC_OKTA_AUTH_ENDPOINT=https://trial-3882279.okta.com/oauth2/default/v1/authorize
NEXT_PUBLIC_OKTA_TOKEN_ENDPOINT=https://trial-3882279.okta.com/oauth2/default/v1/token
NEXT_PUBLIC_OKTA_CLIENT_ID=your-okta-client-id-here  # ← UPDATE THIS!

# ⚠️ Client Secret (SERVER-SIDE ONLY - DO NOT use NEXT_PUBLIC_ prefix!)
OKTA_CLIENT_SECRET=your-okta-client-secret-here  # ← UPDATE THIS!

# Default MCP Endpoint
NEXT_PUBLIC_DEFAULT_MCP_ENDPOINT=https://agent-network-ingress-gw-205q5y.s7le3r.usa-e2.cloudhub.io/crm-mcp/

# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000

2.获取Okta客户ID和密码

在中创建应用程序 Anypoint交易所 → MCP服务器 → 请求访问
选择授权类型： 授权码 + 客户端凭证
设置重定向URI: http://localhost:3000/api/auth/callback
创建后，复制 客户端ID 和 客户端密钥
将它们粘贴进去 .env.local

⚠️ 安全说明： 这 OKTA_CLIENT_SECRET 变量没有 NEXT_PUBLIC_ 前缀。这是故意的！这意味着这个秘密只在服务器端可用，永远不会暴露给浏览器，从而保证了它的安全。

📖 用法

第一步：身份验证

打开应用程序 http://localhost:3000
点击授权标签
您的Okta配置已预先填充
输入您的 客户端ID
点击授权
使用您的Okta凭据登录
您将被重定向回一个令牌

步骤2：发出MCP请求

去消息标签
以JSON格式输入您的MCP请求：

{
  "method": "tools/list",
  "params": {}
}

点击跑发送请求
查看下面的回复

步骤3：管理代币

查看令牌：查看您当前的令牌、到期时间和用户电子邮件
刷新令牌：手动刷新您的令牌
清除令牌：删除令牌并注销

🎯 常见MCP请求

列出可用工具

{
  "method": "tools/list",
  "params": {}
}

调用特定工具

{
  "method": "tools/call",
  "params": {
    "name": "get_accounts",
    "arguments": {
      "Name": ""
    }
  }
}

🏗️ 项目结构

okta-mcp-ui/
├── app/
│   ├── api/auth/callback/       # OAuth callback handler
│   ├── layout.tsx               # Root layout
│   ├── page.tsx                 # Home page
│   └── globals.css              # Global styles
├── components/
│   ├── ui/                      # Shadcn UI components
│   ├── auth/                    # Auth components
│   │   ├── oauth-config-form.tsx
│   │   └── token-display.tsx
│   └── mcp-client/              # MCP client components
│       ├── mcp-client.tsx       # Main client
│       ├── authorization-tab.tsx
│       ├── message-tab.tsx
│       ├── headers-tab.tsx
│       ├── request-builder.tsx
│       └── response-viewer.tsx
├── lib/
│   ├── oauth/                   # OAuth utilities
│   │   ├── client.ts            # OAuth client
│   │   └── token-storage.ts     # Token management
│   ├── mcp/                     # MCP utilities
│   │   └── client.ts            # MCP client
│   └── utils.ts                 # Utilities
├── hooks/
│   └── use-auth.ts              # Auth hook
├── types/
│   └── index.ts                 # TypeScript types
└── .env.local                   # Environment variables

🔐 安全功能

✅ PKCE（代码交换证明密钥） -防止授权码被拦截
✅ 状态参数 -CSRF保护
✅ 安全令牌存储 -用于令牌的本地存储，用于PKCE验证器的会话存储
✅ 令牌到期跟踪 -自动过期检测
✅ 自动刷新 -到期前自动刷新令牌
✅ 无客户端密码 -公共客户端，前端无秘密

🛠️ 开发命令

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Type check
npm run type-check

# Lint
npm run lint

📚 技术栈

框架: Next.js 14 （应用路由器）
语言: TypeScript
OAuth库: oauth4webapi
UI组件: Shadcn/ui （根UI+顺风CSS）
图标: Lucide反应
样式: 顺风 CSS

🤔 为什么选择oauth4webapi？

看图书馆_ MPARISON.md 与Okta Auth JS进行详细比较。

太长，读不下去了: oauth4webapi 是：

✅ 更轻（20KB对比100KB）
✅ 提供者不可知
✅ 对令牌管理进行更多控制
✅ 非常适合这样的开发工具

🔄 许可证管理

自动刷新

如果刷新令牌可用，则令牌将在到期前5分钟自动刷新。

手动刷新

点击 刷新令牌 “授权”选项卡中的按钮。

清除令牌

点击 清除令牌 致：

删除访问令牌
删除刷新令牌
清除PKCE验证器
清除OAuth状态
完全注销

生成新令牌

点击 清除令牌
点击授权在“授权”选项卡中
再次登录以获取新令牌

🐛 故障排除

问题：“状态参数无效”

解决方案：清除浏览器的localStorage和sessionStorage，然后重试。

// In browser console:
localStorage.clear();
sessionStorage.clear();

问题：“CORS错误”

解决方案：验证您的Okta应用程序设置：

可信来源 包含 http://localhost:3000
重定向URI 包含 http://localhost:3000/api/auth/callback

问题：“令牌已过期”

解决方案：单击 刷新令牌 或 清除令牌 并重新进行身份验证。

问题：“缺少客户端ID”

解决方案：更新 .env.local 使用您实际的Okta客户ID。

📝 环境变量

变量	描述	必填
`NEXT_PUBLIC_OKTA_CLIENT_ID`	您的Okta应用程序客户端ID	✅ 是的
`OKTA_CLIENT_SECRET`	您的Okta客户端机密（仅服务器端，安全）	✅ 是的
`NEXT_PUBLIC_OKTA_ISSUER`	Okta发行人URL	✅ 是的
`NEXT_PUBLIC_OKTA_AUTH_ENDPOINT`	OAuth授权端点	✅ 是的
`NEXT_PUBLIC_OKTA_TOKEN_ENDPOINT`	OAuth令牌端点	✅ 是的
`NEXT_PUBLIC_OAUTH_REDIRECT_URI`	OAuth重定向URI	✅ 是的
`NEXT_PUBLIC_DEFAULT_MCP_ENDPOINT`	默认MCP端点URL	⚠️ 可选
`NEXT_PUBLIC_APP_URL`	应用程序URL	⚠️ 可选

🎯 后续步骤

更新客户端ID 在 .env.local
启动应用程序 随着 npm run dev
验证与Okta
发出MCP请求 到达您的端点

📄 许可证

麻省理工学院

🙏 学分

建于❤️ 使用：

需要帮助？ 查看：

实施_计划.md -详细架构
图书馆_ MPARISON.md -图书馆比较
快速启动.md -安装指南