Google登录获取access token遇invalid_grant：授权码格式错误

核心问题：重复解码授权码 #

URLSearchParams.get() 方法会自动对获取到的参数进行URL解码，你额外调用 decodeURIComponent() 会导致授权码被重复解码，从而出现格式错误。

修正后的代码 #

移除多余的解码操作，直接使用 urlParams.get('code') 获取的原始值：

let urlParams = new URLSearchParams(window.location.search);
let code = urlParams.get('code');

axios
  .request({
    method: 'POST',
    url: 'https://oauth2.googleapis.com/token',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    data: {
      code: code, // 直接使用获取到的code，无需额外解码
      client_id: 'XXXXXXX-XXXXXXXXXXXXXXXX.apps.googleusercontent.com',
      client_secret: 'XXXXX-XXXXXXXXXXXXXXXXX',
      redirect_uri: myRedirectUri,
      grant_type: 'authorization_code',
      scope: 'openid',
    },
  })
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

其他排查方向 #

如果修正后仍报错，检查以下几点：

• redirect_uri必须完全匹配：授权请求（用户登录跳转前的请求）中使用的redirect_uri，必须和当前请求token时的redirect_uri完全一致，包括协议（http/https）、域名、端口、路径，不能有任何差异。
• 授权码只能使用一次：每个code是一次性的，重复提交会触发该错误，确保你没有重复使用同一个code。
• client_id/client_secret正确性：确认这两个值和Google Cloud控制台中创建的OAuth客户端信息完全一致。
• scope一致性：请求token时的scope必须和授权时的scope保持一致，不能新增或减少权限范围。

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