Nextjs MCP Okta Client

🛡️ 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和密码

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

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

📖 用法

第一步：身份验证

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

步骤2：发出MCP请求

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

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

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

步骤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状态
• 完全注销

生成新令牌

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

🐛 故障排除

问题：“状态参数无效”

解决方案：清除浏览器的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。

📝 环境变量

🎯 后续步骤

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

📄 许可证

麻省理工学院

🙏 学分

建于❤️ 使用：

• Next.js
• oauth4webapi
• Shadcn/ui
• 顺风 CSS

______________________________________________________________________

需要帮助？ 查看：

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