构建 OAuth Next.js 工作台

​

示例项目

• GitHub: examples/oauth-client-nextjs
• 仓库本地路径： examples/oauth-client-nextjs

​

此应用涵盖的功能

• OAuth 2.1 + PKCE 登录
• 基于会话的 token 存储和刷新
• 用于控制和生成路由的统一代理
• 模型发现
• 基于以下接口的聊天流程 /responses
• 用于其他 Gateway 路由的通用端点测试器

​

何时从此示例开始

• 终端用户需要通过委托访问登录
• 你需要的不只是简单的聊天页面
• 你希望通过一条安全的服务器路由访问多个 Phaseo 端点

• 你只需要一个简单的 API 密钥聊天界面
• 你想先构建脚本或 CLI

​

关键文件

• app/page.tsx
• app/dashboard/page.tsx
• app/dashboard/GatewayWorkbench.tsx
• app/api/gateway/[...surface]/route.ts
• lib/oauth.ts
• lib/session.ts

​

采用此结构的原因

​

1. OAuth 与 Gateway 逻辑分离

• 身份验证启动和回调逻辑
• 加密会话处理
• token 刷新

​

2. 使用一条代理路由处理 Gateway 调用

• 检查端点允许列表
• 注入当前 bearer token
• 在需要时刷新 token
• 转发请求正文和响应正文

​

3. 控制台同时作为内部工作台

• 发现模型
• 测试 /responses
• 也可以测试非聊天端点

​

前置条件

• • Node.js 和受支持的包管理器
• • 已配置本地回调 URL 的 OAuth 客户端
• • 强度足够的会话密钥

​

运行示例

cd examples/oauth-client-nextjs
npm install
cp .env.example .env.local

cd examples/oauth-client-nextjs
pnpm install
cp .env.example .env.local

cd examples/oauth-client-nextjs
yarn install
cp .env.example .env.local

cd examples/oauth-client-nextjs
bun install
cp .env.example .env.local

• NEXT_PUBLIC_OAUTH_CLIENT_ID
• OAUTH_CLIENT_SECRET
• NEXT_PUBLIC_PHASEO_URL
• NEXT_PUBLIC_REDIRECT_URI
• SESSION_SECRET
• NEXT_PUBLIC_GATEWAY_URL

npm run dev

pnpm dev

yarn dev

bun run dev

​

检查结果

• 登录后会返回已配置的回调地址并创建会话。
• 控制台可以通过代理发现模型。
• 一次 Responses API 请求能够完成，且不会向浏览器暴露访问 token。
• 代理允许列表之外的端点会被拒绝。

​

根据需要修改示例

• • 将代理允许列表精简为产品真正需要的端点
• • 在此基础上构建更清晰的用户界面，同时将工作台保留供内部使用
• • 集成稳定后，将通用测试器替换为专门的产品流程

​

相关指南

• 使用 Next.js 构建 Web 聊天应用
• 迷你应用起步提示词
• 示例