Google One Tap跨域iframe问题咨询：无法添加属性且功能失效

• 修正allowedParentOrigin参数值
  这个参数必须精确匹配当前页面的完整源（协议+域名+端口），不能用通配符或不完整地址。比如你的页面是https://your-domain.com，就设置allowedParentOrigin: "https://your-domain.com"；本地开发环境是http://localhost:3000，就设为"http://localhost:3000"。参数值错误是导致弹窗完全不显示的常见原因。

• 给动态生成的谷歌iframe添加allow属性
  Google One Tap会自动创建登录相关的iframe，你可以通过DOM监听来给这个动态生成的iframe补上allow="identity-credentials-get"属性：

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length) {
        const gsiIframe = document.querySelector('iframe[src*="accounts.google.com/gsi"]');
        if (gsiIframe && !gsiIframe.getAttribute('allow')) {
          gsiIframe.setAttribute('allow', 'identity-credentials-get');
          observer.disconnect();
        }
      }
    });
  });
  observer.observe(document.body, { childList: true, subtree: true });
  

  把这段代码放在Google One Tap初始化代码之前执行，确保能捕获到动态插入的iframe。

• 检查基础配置合规性

  • 确保站点使用HTTPS（localhost开发环境除外），FedCM对非HTTPS站点会限制功能；
  • 验证谷歌云控制台中，你的client_id已将当前域名添加到授权来源列表；
  • 清除浏览器中谷歌相关的Cookie和缓存，旧的身份验证缓存可能干扰FedCM逻辑。

内容的提问来源于stack exchange，提问作者Эрик Поуль