openai-oauth

环境要求

• Node.js 与 npm 环境（用于安装 @openai-oauth/react）
• 一个 React 项目，该组件目前仅支持 React
• 一个 ChatGPT 个人账号（免费或付费计划均可）
• 托管网页应用需在 Chrome 或 Firefox 浏览器中安装 Sign in with ChatGPT 扩展

安装与启动步骤

1. 1安装 React 组件包

   在 React 项目根目录执行，安装 @openai-oauth/react。注意该组件当前只支持 React 项目。

   npm i @openai-oauth/react

   复制

2. 2渲染登录按钮

   在客户端组件中引入 SignInWithChatGPT 并渲染，按钮会处理完整的浏览器登录流程，登录后变成断开按钮。

   "use client";
   
   import { SignInWithChatGPT } from "@openai-oauth/react";
   
   export default function Page() {
   	return ;
   }

   复制

3. 3准备浏览器扩展

   托管网页应用需通过 Chrome 或 Firefox 扩展完成 OAuth 交接；预置组件会检测浏览器并展示对应安装引导。

4. 4把会话转发到服务端

   浏览器受 CORS 限制不能直接请求模型，需用 openaiAuthHeaders() 取到请求头并 POST 到自己的后端路由。

   import { openaiAuthHeaders } from "@openai-oauth/react";
   
   await fetch("/api/chat", {
   	method: "POST",
   	headers: await openaiAuthHeaders(),
   	body: "Hello!",
   });

   复制

5. 5服务端调用模型

   在服务端用 openaiCredentials(request) 读取请求绑定凭证，创建 OpenAI OAuth 客户端并调用模型生成文本。

   import { createOpenAIOAuth } from "@openai-oauth/ai-sdk";
   import { openaiCredentials } from "@openai-oauth/react/server";
   import { generateText } from "ai";
   
   export async function POST(request: Request) {
   	const openai = createOpenAIOAuth(openaiCredentials(request));
   
   	const result = await generateText({
   		model: openai("gpt-5.4-mini"),
   		prompt: await request.text(),
   	});
   
   	return new Response(result.text);
   }

   复制

6. 6自定义登录界面

   用 useSignInWithChatGPT 钩子自建登录系统，需自行在 needs-extension 状态下展示扩展安装链接。

   import { useSignInWithChatGPT } from "@openai-oauth/react";
   
   const login = useSignInWithChatGPT();
   // login.status: "signed-in" | "needs-extension" 等
   // login.login / login.logout / login.reset / login.installUrl

   复制

关键配置

如何确认成功

页面上出现 Sign in with ChatGPT 按钮；未装扩展时显示安装引导页；登录成功后按钮变为 Disconnect，服务端路由能返回模型文本。

常见问题

注意事项

• 模型请求不能在浏览器直接发起，需经服务端转发（Electron、Tauri 等 WebView 场景同理）。
• Chrome 扩展地址：https://chromewebstore.google.com/detail/sign-in-with-chatgpt/odbgboachaefbbbdiffcefhpkekhfcna
• Firefox 扩展地址：https://addons.mozilla.org/firefox/addon/sign-in-with-chatgpt/
• 自定义登录界面时，需要自己负责在需要时展示扩展安装链接。