SPA端获取的Google离线授权码在Rails后端兑换AccessToken失败如何解决

故障排查&修复方案 #

• 优先核对redirect_uri完全一致：react-google-login生成授权码时自动关联的redirect_uri，必须和兑换token请求里传的redirect_uri完全匹配，包括协议（http/https）、域名、端口、路径、末尾斜杠都不能有差异。你可以先在前端react-google-login初始化配置处打印redirectUri参数值，兑换请求直接复用该值即可，不要随意手动修改为oob、本地端口地址。
• 不要留空scope参数：兑换请求的scope值必须和前端申请授权时传入的scope列表完全一致，不能留空。
• 每次测试使用新生成的授权码：Google OAuth授权码是一次性有效，且有效期仅为5分钟，复用之前使用过、或超时的授权码会直接返回失败，每次测试前需重新从前端获取最新的code。
• 核对OAuth客户端配置匹配：
  1. 确认兑换请求用的client_id、client_secret和前端react-google-login用的是同一份Google Cloud OAuth凭证
  2. 如果你使用urn:ietf:wg:oauth:2.0:oob作为redirect_uri，仅当你的OAuth凭证类型为「桌面应用」时生效，Web类型的OAuth凭证不支持该redirect_uri取值
  3. 确认你前端的访问地址、后端服务地址都已经添加到对应OAuth凭证的「已授权的JavaScript来源」和「已授权的重定向URI」列表中
• 正确的兑换请求curl示例如下：

curl --location --request POST 'https://oauth2.googleapis.com/token' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'code=你前端最新生成的未使用过的code' \
--data-urlencode 'redirect_uri=和前端react-google-login配置完全一致的redirect_uri' \
--data-urlencode 'client_id=你的OAuth客户端ID' \
--data-urlencode 'client_secret=你的OAuth客户端密钥' \
--data-urlencode 'scope=前端授权时申请的scope列表，例如openid email profile' \
--data-urlencode 'grant_type=authorization_code'

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