本地主机测试Google One Tap遇报错：无法继续及网络错误求助

问题场景 #

我在Next.js应用中使用以下代码实现Google One Tap认证：

"use client";

import React, { useEffect, useState } from "react";
import { signIn } from "next-auth/react";

export default function GoogleOneTap() {
  const [isInitialized, setIsInitialized] = useState(false);

  useEffect(() => {
    const initializeGoogleOneTap = () => {
      const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;

      if (!clientId) {
        console.error("Missing Google Client ID");
        return;
      }

      if (window.google && window.google.accounts && window.google.accounts.id) {
        google.accounts.id.initialize({
          client_id: clientId,
          callback: async (response) => {
            if (!response || !response.credential) {
              console.error("No credential received from Google.");
              return;
            }

            try {
              await signIn("googleonetap", {
                credential: response.credential,
                redirect: true,
                callbackUrl: "/",
              });
            } catch (error) {
              console.error("Error during sign-in:", error);
            }
          },
        });

        google.accounts.id.prompt((notification) => {
          if (notification.isSkippedMoment()) {
            console.warn("Google One Tap skipped:", notification.getSkippedReason());
          } else if (notification.isNotDisplayed()) {
            console.error("Google One Tap not displayed:", notification.getNotDisplayedReason());
          }
        });

        setIsInitialized(true);
      } else {
        console.error("Google One Tap library not loaded.");
      }
    };

    if (
      typeof window !== "undefined" &&
      !document.getElementById("google-one-tap-script")
    ) {
      const script = document.createElement("script");
      script.id = "google-one-tap-script";
      script.src = "https://accounts.google.com/gsi/client";
      script.async = true;
      script.defer = true;
      script.onload = initializeGoogleOneTap;
      document.body.appendChild(script);
    } else {
      initializeGoogleOneTap();
    }
  }, []);

  return <div id="oneTap"></div>;
}

本地测试遇到的错误 #

1. 错误弹窗：

"Can't continue with google.com. Something went wrong."

2. 控制台日志：

• The fetch of the id assertion endpoint resulted in a network error: ERR_FAILED.
• client:72 [GSI_LOGGER]: FedCM get() rejects with IdentityCredentialError: Error retrieving a token.

已完成的排查操作 #

• 验证NEXT_PUBLIC_GOOGLE_CLIENT_ID与Google Cloud Console中的客户端ID完全一致。
• 在Google Cloud Console中添加http://localhost:3000为Authorized JavaScript Origin。
• 确认https://accounts.google.com/gsi/client脚本加载无错误。

环境详情 #

• 框架：Next.js
• 认证库：next-auth
• 浏览器：Chrome

问题原因与解决方案 #

核心原因分析 #

报错主要和Chrome默认启用的FedCM（Federated Credential Management API）有关，该API对本地开发环境有严格的权限限制，同时Next-Auth回调地址配置缺失、浏览器缓存冲突也可能触发该问题。

分步解决方法： #

1. 强制禁用FedCM，切换传统认证模式

在Google One Tap初始化配置中添加use_fedcm_for_prompt: false参数，绕过FedCM限制：

google.accounts.id.initialize({
  client_id: clientId,
  callback: async (response) => {
    // 原有回调逻辑保持不变
  },
  use_fedcm_for_prompt: false // 新增该配置
});

2. 补全Google Cloud Console的重定向URI配置

在Google Cloud Console的OAuth 2.0客户端设置中，添加Next-Auth的回调地址：
http://localhost:3000/api/auth/callback/googleonetap
（如果你的Next-Auth路由有自定义修改，替换为对应回调路径）

3. 清除浏览器缓存与账号会话

• 打开Chrome的chrome://settings/siteData，搜索google.com并删除所有相关数据。
• 退出当前登录的Google账号，重新登录后再测试认证流程。

4. 检查Next.js开发服务器配置

如果自定义了next.config.js，确保没有添加限制跨域请求的CORS规则，临时简化配置排除干扰。

5. 跨浏览器验证

切换到Firefox或Edge浏览器测试，确认是否是Chrome特定的隐私设置或FedCM兼容性问题。

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