这确实是纯前端无后端场景下使用GitHub OAuth的经典痛点——毕竟client_secret一旦明文写在源码里，任何人都能扒下来冒充你的应用发起请求，风险极高。针对你要获取用户Gist创建权限的需求，这里有两个靠谱的解决方案：

方案一：使用GitHub OAuth设备授权流（Device Flow） #

这是GitHub专门为无后端、无浏览器的应用设计的授权流程，全程不需要用到client_secret，完美适配纯前端场景。具体流程如下：

1. 发起设备授权请求
   前端向GitHub的设备授权端点发送POST请求，参数只需要你的OAuth App的client_id（这个可以安全地明文放在前端，因为它本身就是公开信息）和需要的权限scope=gist：

   const response = await fetch('https://github.com/login/device/code', {
     method: 'POST',
     headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/x-www-form-urlencoded'
     },
     body: new URLSearchParams({
       client_id: '你的OAuth App Client ID',
       scope: 'gist'
     })
   });
   const data = await response.json();
   

   你会得到device_code（用于轮询的设备码）、user_code（用户需要输入的验证码）和verification_uri（用户授权的地址）。

2. 引导用户完成授权
   在你的应用里展示提示：让用户打开verification_uri，登录GitHub后输入user_code完成授权。

3. 轮询获取access_token
   前端按照GitHub返回的interval参数（默认5秒），定期向token端点发送请求，直到用户完成授权：

   const pollToken = async () => {
     const response = await fetch('https://github.com/login/oauth/access_token', {
       method: 'POST',
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/x-www-form-urlencoded'
       },
       body: new URLSearchParams({
         client_id: '你的OAuth App Client ID',
         device_code: data.device_code,
         grant_type: 'urn:ietf:params:oauth:grant-type:device_code'
       })
     });
     const tokenData = await response.json();
     if (tokenData.access_token) {
       // 拿到access_token，后续就可以用它调用Gist API创建Gist了
       console.log('授权成功，access_token:', tokenData.access_token);
     } else if (tokenData.error === 'authorization_pending') {
       // 授权还未完成，继续轮询
       setTimeout(pollToken, data.interval * 1000);
     } else {
       // 授权失败，处理错误
       console.error('授权失败:', tokenData.error);
     }
   };
   pollToken();
   

注意事项：

• 严格遵循返回的interval间隔轮询，避免被GitHub限流；
• access_token存在前端时，建议用sessionStorage存储，降低XSS攻击导致的泄露风险。

方案二：用无服务器函数做中间层（授权码流） #

如果你需要更灵活的权限管理（比如获取refresh token），可以用一个轻量的无服务器函数作为中间层，把client_secret存在函数的环境变量里，避免暴露在前端源码中：

1. 部署无服务器函数
   选择Vercel Edge Functions、Cloudflare Workers这类平台，创建一个简单的接口，把你的client_id和client_secret添加到平台的环境变量中。

2. 前端走授权码流
   引导用户跳转到GitHub的授权页面，参数包括client_id、scope=gist、redirect_uri（你的前端页面地址）、response_type=code：

   const authUrl = `https://github.com/login/oauth/authorize?${new URLSearchParams({
     client_id: '你的OAuth App Client ID',
     scope: 'gist',
     redirect_uri: '你的前端页面地址',
     response_type: 'code'
   })}`;
   window.location.href = authUrl;
   

3. 前端把授权码传给中间层
   用户授权后，GitHub会把code作为查询参数带回你的前端页面，你把这个code发送给你的无服务器函数：

   const code = new URLSearchParams(window.location.search).get('code');
   const response = await fetch('你的无服务器函数地址', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify({ code })
   });
   const tokenData = await response.json();
   

4. 中间层换取access_token
   无服务器函数收到code后，用它加上环境变量里的client_id、client_secret和redirect_uri，向GitHub请求access_token，再返回给前端：

   // 以Cloudflare Workers为例
   export default {
     async fetch(request) {
       const { code } = await request.json();
       const response = await fetch('https://github.com/login/oauth/access_token', {
         method: 'POST',
         headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/x-www-form-urlencoded'
         },
         body: new URLSearchParams({
           client_id: ENV.CLIENT_ID,
           client_secret: ENV.CLIENT_SECRET,
           code: code,
           redirect_uri: '你的前端页面地址'
         })
       });
       const tokenData = await response.json();
       return new Response(JSON.stringify(tokenData), {
         headers: { 'Content-Type': 'application/json' }
       });
     }
   };
   

总结：如果不想额外维护任何后端服务，设备授权流是最直接的选择；如果需要长期权限或者更复杂的OAuth流程，无服务器中间层方案更灵活。

内容的提问来源于stack exchange，提问作者Sarcadass