调用google.accounts.id.prompt触发AbortError的问题排查

可能原因 #

• Chrome浏览器在2024年3月后对**FedCM（联合凭证管理API）**的触发规则进行了更新，要求FedCM相关请求必须由用户的显式同步交互直接触发，不允许在异步上下文或间接调用中触发。你的代码中虽绑定了点击事件，但GSI库的版本更新后，google.accounts.id.prompt()的调用不再满足Chrome的新规则。
• 你使用的是GSI最新在线库（https://accounts.google.com/gsi/client），该库在2024年3月后适配了FedCM新规则，旧的自定义按钮调用prompt的方式不再兼容Chrome的限制。

解决方案 #

方案1：使用官方渲染按钮替代自定义触发 #

放弃手动调用prompt，改用google.accounts.id.renderButton渲染符合规范的按钮，它会自动适配Chrome的FedCM规则，同时支持自定义样式：

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "XXXXXXXXX.apps.googleusercontent.com",
          callback: handleCredentialResponse
        });
        // 渲染官方按钮，可通过参数自定义样式
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "outline", size: "large" }
        );
      }
    </script>
    <div id="buttonDiv"></div>
  </body>
</html>

方案2：调整自定义按钮的触发逻辑 #

若必须保留自定义按钮，需确保prompt在用户点击的同步回调中调用，同时添加ux_mode: "popup"明确指定弹窗模式：

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "XXXXXXXXX.apps.googleusercontent.com",
          callback: handleCredentialResponse,
          ux_mode: "popup"
        });
        // 绑定同步点击事件，确保prompt在同步上下文执行
        document.getElementById("buttonDiv").addEventListener('click', () => {
          google.accounts.id.prompt();
        });
      }
    </script>
    <div id="buttonDiv">test</div>
  </body>
</html>

方案3：检查Chrome隐私设置 #

部分用户开启的"阻止第三方Cookie"或"增强型隐私保护"会拦截FedCM请求，可引导用户调整：

• 进入Chrome的设置 > 隐私和安全 > Cookie及其他网站数据
• 关闭"阻止第三方Cookie"，或将你的网站添加到例外列表

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