Refine框架配置Google Auth时自定义Client ID弹窗空白问题

以下是针对替换自定义Google Client ID后弹窗空白的排查和解决步骤：

1. 核对Google OAuth控制台配置 #

• 确认客户端ID类型为Web应用：不要选择iOS、Android等其他类型，Web应用才适配网页端的popup登录模式。
• 检查授权重定向URI：即使使用popup模式，也需要在控制台添加对应的重定向地址（比如http://localhost:3000），不要只添加JavaScript来源。
• 验证Client ID复制准确性：确保没有多余空格、缺失字符，完整格式应为xxx.apps.googleusercontent.com。

2. 确认Google登录脚本加载 #

在项目的public/index.html中确保已添加Google登录脚本：

<script src="https://accounts.google.com/gsi/client" async defer></script>

缺失脚本会导致window.google对象未初始化，进而无法渲染登录按钮和弹窗。

3. 修正代码中的初始化逻辑 #

• 将GOOGLE_CLIENT_ID加入useEffect的依赖数组，确保ID变更时重新执行初始化：

  useEffect(() => {
    if (typeof window === "undefined" || !window.google || !divRef.current) {
      return;
    }
  
    try {
      window.google.accounts.id.initialize({
        ux_mode: "popup",
        client_id: GOOGLE_CLIENT_ID,
        callback: async (res: CredentialResponse) => {
          if (res.credential) {
            login(res);
          }
        },
      });
      window.google.accounts.id.renderButton(divRef.current, {
        theme: "filled_blue",
        size: "medium",
        type: "standard",
      });
    } catch (error) {
      console.log(error);
    }
  }, [GOOGLE_CLIENT_ID, login]); // 添加GOOGLE_CLIENT_ID和login到依赖
  

• 将GoogleButton组件提取到Login组件外部，避免每次渲染重复创建组件：

  const GoogleButton = ({ login }: { login: any }) => {
    const divRef = useRef<HTMLDivElement>(null);
  
    useEffect(() => {
      // 初始化逻辑不变
    }, [GOOGLE_CLIENT_ID, login]);
  
    return <div ref={divRef} />;
  };
  
  export const Login: React.FC = () => {
    const { mutate: login } = useLogin<CredentialResponse>();
  
    return (
      // ... 现有JSX代码，调用<GoogleButton login={login} />
    );
  };
  

4. 排查浏览器隐藏错误 #

打开浏览器开发者工具：

• 查看「Console」标签：是否有CORS、未授权相关的警告或错误。
• 查看「Network」标签：检查accounts.google.com相关请求的状态码，若出现400/403错误，说明Client ID或控制台配置存在问题。

5. 检查OAuth consent screen状态 #

确认Google Cloud项目的OAuth consent screen已发布（即使是测试版）：

• 若处于未发布状态，仅添加的测试用户可登录，使用非测试用户账号会导致弹窗空白。
• 确保当前登录的Google账号已添加到测试用户列表中（若为测试版）。

内容的提问来源于stack exchange，提问作者Denis S Maheshwari