使用Firebase Functions对接Dribbble OAuth持续出现'invalid_grant'错误

我明白你现在卡在Dribbble OAuth对接上的挫败感——12小时的尝试还没解决确实让人头疼，尤其是OAuth这块对新手来说本来就容易踩坑，各种流程细节稍不留神就出问题。结合你的技术栈（Angular 4 + Firebase/Google Cloud Functions），我来帮你理清关键问题和排查方向：

Dribbble OAuth的第一步授权跳转，前端直接触发就可以，但有个绝对不能错的前提：你配置的redirect_uri必须是后端（Firebase/Cloud Functions）的公网地址，绝对不能是前端本地地址。因为后续用授权码换access_token的操作必须在后端完成——client_secret绝对不能暴露在前端代码里，否则会导致安全问题。

第一步：先把Dribbble开发者配置核对一遍 #

这是最容易忽略的基础坑：

• 检查Dribbble开发者后台的回调URL：必须和你后续在授权URL、后端换token时填的redirect_uri完全一致，包括http/https、域名、路径，甚至结尾有没有斜杠都要严格对应。比如你的Cloud Functions回调地址应该是https://your-project-id.cloudfunctions.net/dribbble-oauth-callback
• 确认client_id和client_secret没有复制错误，没有多余空格或者大小写问题

第二步：前端（Angular 4）的正确操作 #

前端只需要负责生成授权URL并触发跳转，不需要碰任何敏感信息：

1. 构造授权URL（可以硬编码，也可以从后端接口获取，推荐后者更灵活）：

// Angular组件里的代码示例
const dribbbleAuthUrl = `https://dribbble.com/oauth/authorize?client_id=${YOUR_PUBLIC_CLIENT_ID}&redirect_uri=${YOUR_BACKEND_CALLBACK_URL}&response_type=code&scope=public`;
// 触发跳转
window.location.href = dribbbleAuthUrl;

这里的scope根据你的业务需求选，Dribbble支持public（基础权限）、write（发布内容）等，多个scope用+分隔。

第三步：后端（Firebase/Cloud Functions）的核心逻辑 #

后端要负责接收Dribbble的回调，用授权码换access_token，再把结果返回给前端：

// Firebase Functions代码示例
exports.dribbbleOAuthCallback = functions.https.onRequest(async (req, res) => {
  // 从回调参数里拿到授权码
  const authCode = req.query.code;
  if (!authCode) {
    return res.status(400).send('授权码缺失，请重新授权');
  }

  try {
    // 用授权码换access_token
    const tokenResponse = await fetch('https://dribbble.com/oauth/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: new URLSearchParams({
        client_id: process.env.DRIBBBLE_CLIENT_ID, // 从环境变量取，不要硬编码！
        client_secret: process.env.DRIBBBLE_CLIENT_SECRET,
        code: authCode,
        redirect_uri: process.env.DRIBBBLE_REDIRECT_URI,
        grant_type: 'authorization_code'
      })
    });

    const tokenData = await tokenResponse.json();
    if (tokenResponse.ok) {
      // 这里可以把access_token存入Firebase Auth用户记录，或者跳转到前端页面传递token（注意安全，推荐用JWT封装）
      return res.redirect(`https://your-frontend-domain.com/auth-success?token=${tokenData.access_token}`);
    } else {
      return res.status(400).send(`获取token失败：${tokenData.error_description}`);
    }
  } catch (error) {
    console.error('OAuth流程出错：', error);
    return res.status(500).send('服务器内部错误');
  }
});

⚠️ 重要提醒：client_secret一定要存在Firebase Functions的环境变量里，用命令firebase functions:config:set dribbble.client_id="你的ID" dribbble.client_secret="你的密钥" dribbble.redirect_uri="你的回调地址"设置，绝对不能写在代码里！

1. 先测试授权跳转是否正常：手动把构造好的授权URL复制到浏览器打开，如果能跳转到Dribbble的授权登录页，说明Dribbble的API和你的client_id配置没问题；如果跳转到错误页，看Dribbble给出的错误提示（比如invalid_client就是client_id错了）。
2. 测试后端回调逻辑：如果用户授权后能跳转到你的后端回调地址，但换token失败，看后端返回的错误信息——Dribbble的token接口会返回明确的错误描述，比如redirect_uri_mismatch就是回调URL不匹配，invalid_grant就是授权码过期或无效，根据提示针对性排查就行。

• CORS问题：绝对不要让前端直接调用Dribbble的token接口，Dribbble不允许前端跨域请求这个接口，必须通过后端代理。
• Firebase Functions部署问题：确保你的函数已经正确部署，并且可以通过公网访问（可以直接在浏览器访问函数地址测试）。
• 授权码过期：Dribbble的授权码有效期很短，用户授权后要尽快用它换token，不要长时间闲置。

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