React自定义按钮触发Google登录弹窗取消后无法再次唤起问题

这个现象不是代码bug，是Google Identity Services（GIS）One Tap登录的原生防骚扰冷却机制：

• 用户主动点击取消、点右上角X关闭One Tap浮层后，SDK会自动写入g_state cookie记录状态，其中i_l:1标记用户曾主动关闭弹窗，i_p对应的值是冷却期结束的时间戳，冷却期内直接调用prompt()会被SDK静默拦截，不弹窗也不抛错
• 用户完成登录流程后cookie会被置为i_l:0，即无冷却的正常状态，所以登录流程走通时不会出现无法唤起的问题
• 手动删除g_state cookie属于绕过SDK内部逻辑的hack写法，后续SDK迭代调整字段规则很容易失效，不推荐使用。

首先先修正你现有代码的不规范点：google.accounts.id.initialize() 不需要每次点击按钮都调用，只需要在GIS SDK加载完成、组件挂载阶段全局初始化一次即可，重复初始化会覆盖配置、触发状态异常。
针对自定义按钮触发登录的场景，官方提供两种完全不需要操作cookie的标准实现，可根据自己的产品形态选择： #

方案1：保留One Tap浮层，通过prompt回调重置状态（适合需要浮层提示的场景） #

google.accounts.id.prompt() 支持传入状态回调，会返回弹窗的展示结果，当检测到是冷却导致的无法展示时，调用SDK原生提供的cancel()方法重置流程即可重新唤起弹窗，完全不需要修改cookie。
React下的修正代码示例：

import { useEffect, useCallback } from 'react';

const GoogleLoginButton = () => {
  // 组件挂载时全局初始化一次即可
  useEffect(() => {
    /* global google */
    // 注意：CRA创建的React项目中，自定义环境变量必须以REACT_APP_为前缀，原代码直接读取GOOGLE_CLIENT_ID在生产环境会返回undefined
    google.accounts.id.initialize({
      client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
      callback: handleGoogleCredentialResponse,
      cancel_on_tap_outside: false, // 可选配置：点击弹窗外部不自动关闭，减少非必要的冷却触发
    });
  }, []);

  const handleGoogleCredentialResponse = (response) => {
    const token = response.credential;
    console.log('登录凭证:', token);
    // 此处编写后续登录逻辑，比如将token发送到后端校验、存储登录态等
  };

  const handleLoginBtnClick = useCallback(() => {
    google.accounts.id.prompt((notification) => {
      // 判断是否因为之前用户关闭弹窗导致无法展示
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // 调用官方原生方法重置当前One Tap流程
        google.accounts.id.cancel();
        // 重新触发即可正常唤起弹窗
        google.accounts.id.prompt();
      }
    });
  }, []);

  return <button onClick={handleLoginBtnClick}>使用Google账号登录</button>;
};

export default GoogleLoginButton;

提示：cancel()方法是GIS官方暴露的公共API，作用是重置当前One Tap流程的内部状态，和手动删cookie的hack操作有本质区别，不存在兼容风险。

方案2：直接使用弹窗模式，完全绕过One Tap冷却逻辑（最适合自定义按钮场景） #

如果你的产品不需要One Tap那种自动弹出的浮层，就是要用户点击按钮后才弹出账号选择框，可以直接在初始化时配置ux_mode: 'popup'，这种模式下SDK不会触发One Tap的冷却规则，不管用户之前有没有关闭过弹窗，点击按钮都会正常唤起账号选择弹窗。
只需要修改初始化配置即可：

google.accounts.id.initialize({
  client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
  callback: handleGoogleCredentialResponse,
  ux_mode: 'popup', // 切换为点击触发的弹窗模式，不走One Tap浮层逻辑，无冷却限制
});

按钮点击逻辑保持不变，直接调用google.accounts.id.prompt()即可，代码更简洁，稳定性更高。 #

• 不要重复调用initialize方法，全局初始化一次即可，React 18严格模式下useEffect会执行两次，建议加个全局标记位判断SDK是否已经初始化，避免重复执行
• 不要手动修改、删除g_state相关cookie，这类字段是SDK内部维护的状态值，字段结构、命名随时可能调整，依赖cookie操作的代码稳定性没有保障
• 本地调试时如果遇到SDK加载失败的问题，记得检查网络环境，确保可以正常访问Google相关服务

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