基于AWS Amplify配置谷歌登录时点击组件报错缺失client_id参数

当前故障现象 #

• 基于Amplify框架为ZBaduk项目dev环境搭建谷歌登录能力，在业务组件中引入<amplify-google-button>标签后，页面可正常渲染谷歌登录按钮
• 点击按钮触发授权流程时，浏览器控制台抛出Missing required parameter 'client_id'错误，从gapi报错堆栈可定位：谷歌授权实例初始化阶段未获取到必填的client_id参数
• 已完成的前置配置动作：
  • 已在Google Cloud Platform创建对应应用的客户端ID
  • Amplify项目关联的Cognito服务用户池ID，和已配置谷歌身份供应商的AWS User Pool ID完全匹配
  • 对Amplify CLI自动生成的aws-exports.js配置文件中敏感ID做了打码处理

核心排查步骤 #

• 核对Cognito谷歌身份供应商的字段填写完整性
  仅匹配User Pool ID不代表供应商配置完成：进入对应用户池的身份供应商配置页，确认谷歌供应商配置项中，*「Google 客户端 ID」*字段没有留空，填写完成后保存配置。注意Cognito第三方供应商配置存在1-2分钟的同步延迟，不要修改完成后立刻测试。
• 验证实际加载到浏览器的aws-exports.js内容
  禁止直接修改生产/开发环境实际加载的aws-exports.js文件做打码处理：
  • 打开浏览器开发者工具，查看全局变量中实际加载的Amplify配置，确认aws_cognito_region、aws_user_pools_id、aws_user_pools_web_client_id字段和控制台配置完全一致
  • 社交登录的client_id不会硬编码在aws-exports.js中，是Amplify启动Auth模块后从Cognito公开端点动态拉取的，如果手动编辑配置文件时误删了Auth模块的基础字段，会直接导致参数拉取请求失败
• 检查组件渲染和Amplify初始化的执行顺序
  确认项目入口中，Amplify.configure(awsExports)的执行时机早于<amplify-google-button>组件的渲染时机：如果组件先渲染、Amplify配置后加载，按钮的UI样式虽然能正常展示，但初始化谷歌SDK时无法拉取到关联的client_id参数。
• 确认应用客户端的身份供应商关联关系
  进入对应Cognito用户池的「应用客户端」配置页，确认当前Web端关联的应用客户端，已经在允许的身份供应商列表中勾选了「谷歌」选项——哪怕谷歌供应商本身配置完整，如果未在应用客户端层完成关联，Amplify拉取的公开配置中也不会返回对应的谷歌client_id参数。

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