Google Sign-In集成Node.js站点时Heroku报audience不匹配错误排查

这个Wrong recipient, payload audience != requiredAudience错误的本质非常直接：Google签发的ID Token中携带的aud（受众）字段值，和后端校验时传入的期望受众值完全不匹配。本地环境运行正常、线上环境报错的核心差异，几乎都来自「本地调试阶段前后端使用的CLIENT_ID是完全一致的，线上环境某一侧的CLIENT_ID值和另一侧对不上」的场景。

• Heroku端环境变量配置/读取异常
  本地调试时，你一般会在项目本地的环境配置文件里写入准确的CLIENT_ID，所以代码读取的值没有偏差。但线上环境很容易出现以下问题导致值错位：
  • 变量名拼错：代码中读取的是process.env.CLIENT_ID，但在Heroku配置项里把变量名拼成了CLINET_ID、GOOGLE_CLIENT_ID，导致代码实际拿到的CLIENT_ID是空值
  • 配置值带多余字符：复制CLIENT_ID到Heroku配置项时，不小心在值的前后加了空格、换行，字符串逐字符对比时自然和Token里的aud字段不相等
  • 配置值本身有误：把其他项目的CLIENT_ID、旧版本的废弃CLIENT_ID填到了Heroku配置项里
• 前端硬编码了本地调试用的CLIENT_ID
  调试阶段很多人会直接把CLIENT_ID硬写在前端的Google Sign-In组件配置里，本地运行时这个写死的值和后端本地读取的CLIENT_ID匹配，不会触发报错。但如果前端打包部署到Heroku时，没有通过构建工具的环境变量区分开发/生产环境，线上页面加载的Google Sign-In组件还是会使用写死的本地CLIENT_ID签发Token，这个Token里的aud字段自然就是本地调试用的CLIENT_ID，和线上后端读取的生产环境CLIENT_ID不匹配。
• 跨客户端ID的配置混淆
  如果你在Google开发者后台创建了多个OAuth客户端（比如专门用于本地调试的客户端、用于线上生产的客户端），本地环境前后端都使用同一个调试客户端的ID，自然能正常匹配。但线上环境如果没有全链路切换到生产客户端ID——比如前端还是用调试客户端的ID发请求、获取Token，后端却配置了生产客户端的ID做校验，就会触发audience不匹配的错误。
• 浏览器缓存的旧Token干扰
  本地调试结束后，浏览器会缓存之前登录时拿到的ID Token。当你直接打开Heroku线上站点时，如果前端没有触发强制重新登录，会直接把缓存的旧Token（对应的aud字段是本地调试用的CLIENT_ID）发送给线上后端，后端用线上的CLIENT_ID校验时自然匹配失败。

• 在线上后端的verify方法执行前，加打印语句输出实际使用的CLIENT_ID值，同时把前端发送的ID Token解码出payload中的aud字段值，逐字符对比两个值是否完全一致（重点检查有没有空格、大小写、后缀的差异）
• 在Heroku线上页面打开浏览器开发者工具，检查Google Sign-In组件实际绑定的client_id值，和后端校验用的CLIENT_ID是否为同一个值
• 用无痕窗口打开Heroku线上站点重新登录，排除旧Token缓存的干扰
• 通过Heroku CLI查看线上配置的CLIENT_ID实际值，确认没有多余的空格、拼写错误

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