如何识别新版Google Identity Services认证流程启动时机

新版Google Identity Services默认渲染的Sign in with Google按钮以跨域iframe形式注入页面，受同源策略限制，主页面无法直接为iframe内部元素绑定点击事件，旧版直接重写按钮onClick的方案自然失效。以下是三种可落地的实现方案，可根据业务场景选择：

方案1：自定义登录按钮（最稳定，优先推荐） #

GIS原生支持自定义渲染登录按钮，不需要依赖官方自动注入的iframe按钮，可完全掌控点击触发时机：

• 初始化GIS时，不在页面放置带g_id_signin类的自动渲染节点，也不调用google.accounts.id.renderButton方法生成默认按钮
• 自行实现按钮组件（原生DOM、React/Vue组件均可），样式遵循Google登录按钮的品牌规范即可
• 为自定义按钮绑定点击事件，事件触发后先执行组件状态重置、历史错误清理等自定义逻辑，再调用google.accounts.id.prompt()拉起认证流程即可。

注意：自定义按钮不能随意修改Google官方要求的标识、文案、配色规则，避免违反服务使用条款。

方案2：事件监听捕获默认按钮点击（兼容默认按钮场景） #

如果业务必须使用官方自动渲染的默认按钮，可以通过页面焦点变化+DOM监听的方式识别点击时机，不需要改动现有按钮渲染逻辑：
核心原理是用户点击iframe内的登录按钮拉起认证流程时，主页面窗口会触发失焦，结合DOM检测过滤掉其他场景的失焦，就能精准识别认证启动时机，参考实现：

let gsiButtonLoaded = false;
// 监听GIS按钮iframe渲染完成
const domObserver = new MutationObserver((records) => {
  records.forEach(record => {
    record.addedNodes.forEach(node => {
      if (node.tagName === 'IFRAME' && node.src?.includes('accounts.google.com/gsi')) {
        gsiButtonLoaded = true;
      }
    })
  })
});
domObserver.observe(document.body, { childList: true, subtree: true });

// 监听窗口失焦，识别认证启动
window.addEventListener('blur', () => {
  if (!gsiButtonLoaded) return;
  // 校验失焦前焦点是否在GIS按钮容器范围内，减少误判
  const activeInGsiArea = document.activeElement?.closest('.g_id_signin');
  if (activeInGsiArea) {
    // 此处执行状态重置等自定义逻辑
    console.log('Google认证流程已启动');
  }
});

这个方案存在极少量误判可能（比如用户点击GIS按钮的瞬间刚好切换浏览器窗口），适合无法替换默认按钮的场景。

方案3：请求拦截识别认证发起（不推荐） #

可以通过重写全局fetch/XMLHttpRequest对象的方式，拦截页面发往Google身份服务的认证请求，请求发起时即代表用户点击按钮、认证流程启动。但该方案依赖Google的接口路径规则，后续GIS版本迭代如果修改接口地址会直接失效，仅作为备选方案。

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