Cypress实现Google SSO自动登录报redirect_uri_mismatch错误

Google OAuth 2.0 对redirect_uri参数执行逐字符精确匹配校验，「生成授权码时传入的redirect_uri」「后端持授权码兑换token时传入的redirect_uri」「Google OAuth后台配置的已授权重定向URI」三者只要存在任意字符差异，就会抛出redirect_uri_mismatch错误。该校验和授权码有效性、账号权限、回调地址携带的query参数无关。

你已经可以正常通过refresh_token换取id_token、拉取用户信息，说明client_id、client_secret、授权凭证本身均有效，问题完全出在redirect_uri的匹配环节，常见触发场景如下：

• 自有API后端收到授权码后，调用Google token端点换票时传入的redirect_uri参数，和生成该授权码时使用的参数不一致
• 实际请求使用的redirect_uri字符串和后台配置存在细微差异：比如漏写http://协议头、路径末尾多余斜杠、端口号不匹配、路径大小写不一致
• 重定向URI配置位置错误：比如误加到「已授权JavaScript来源」栏，或者配置到了其他client_id的规则下

按优先级逐一排查即可：

• 对齐三个环节的redirect_uri值
  逐字符核对三个位置的字符串完全一致，不允许存在任何差别：
  • Cypress脚本发起授权请求、获取code时请求参数携带的redirect_uri
  • 自有API后端收到code后，调用https://oauth2.googleapis.com/token时请求体携带的redirect_uri
  • Google Cloud Console中对应OAuth客户端「已授权重定向URI」列表内的配置项

  注：回调地址?后的query参数（包括state、code、scope等）不参与匹配校验，仅需对齐?之前的完整地址部分

• 排查高频字符串差异问题
  重点核对几个容易忽略的细节：
  • 必须携带协议头：不能使用裸地址localhost:3000/foo/auth/callback，需和配置一致写全http://localhost:3000/foo/auth/callback
  • 路径末尾不能多余斜杠：配置路径为/callback时，传入值不能为/callback/
  • 端口号必须完全匹配：配置为3000端口时，不能传入3001端口或漏写端口
  • 路径大小写敏感：/Foo/Auth/Callback和/foo/auth/callback会被判定为不同地址
• Cypress自动化场景优化
  既然你已经可以通过refresh_token直接换取合法的id_token和access_token，完全可以跳过「传递授权码给自有API」的易出错环节：直接将拿到的合法id_token按自有API的登录规则构造请求，触发后端JWT签发流程即可，既绕开了redirect_uri匹配问题，也比模拟前端跳转的流程稳定性更高。
• 核对配置位置
  确认重定向URI配置在当前测试使用的client_id对应的「已授权重定向URI」板块下，不要错配到同项目下其他OAuth客户端的配置中，也不要和「已授权JavaScript来源」配置混淆。

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