Chrome V8及Firefox隐身模式下Angular中Google One Tap登录UI不显示问题

我在Angular项目中集成Google One Tap登录UI时遇到问题：在已启用所有Cookie的隐身模式下，登录界面完全不显示，也没有任何响应。

我的初始化代码如下：

//@ts-ignore
google.accounts.id.initialize({
    client_id: environment.googleAuthClientId,
    callback: (window as any)['handleCredentialResponse'] =
    (response: any) => this.ngZone.run(() => {
      this.user = response;
      this.loggedIn = response != null;
      localStorage.setItem(LocalStorageKeyEnum.USER, JSON.stringify(response.credential));
      this.checkPermission();
    })
});

我曾尝试以下代码作为Firefox的临时修复方案，该方案在Firefox中有效，但在Chrome或Edge中无效：

google.accounts.id.prompt((notification) => {
     if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
         document.cookie =  "g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT";
             google.accounts.id.prompt()
     }
 });

针对Chrome/Edge隐身模式的解决办法 #

• 调整prompt触发时机
  隐身模式下浏览器对非用户触发的自动UI弹出限制更严格，建议不要在页面初始化后立即调用prompt，而是绑定到用户交互（比如点击登录按钮）后执行：

  // 绑定到按钮点击事件
  onLoginButtonClick() {
    google.accounts.id.prompt();
  }
  

• 清理状态缓存并重新初始化
  除了清除g_state Cookie，还要清理Google会话相关缓存，然后重新初始化One Tap，避免旧状态干扰：

  private clearGoogleAuthCookies(): void {
    const domain = window.location.hostname;
    // 清除Google One Tap相关Cookie
    document.cookie = "g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=" + domain;
    document.cookie = "google-accounts-session=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=" + domain;
  }
  
  private reInitializeGoogleOneTap(): void {
    this.clearGoogleAuthCookies();
    //@ts-ignore
    google.accounts.id.initialize({
      client_id: environment.googleAuthClientId,
      callback: (window as any)['handleCredentialResponse'] =
      (response: any) => this.ngZone.run(() => {
        this.user = response;
        this.loggedIn = response != null;
        localStorage.setItem(LocalStorageKeyEnum.USER, JSON.stringify(response.credential));
        this.checkPermission();
      })
    });
    // 延迟触发prompt，确保初始化完成
    setTimeout(() => {
      google.accounts.id.prompt();
    }, 300);
  }
  
  // 在组件初始化或用户交互时调用
  ngAfterViewInit(): void {
    this.reInitializeGoogleOneTap();
  }
  

• 启用FedCM API支持
  Chrome和Edge已推荐使用FedCM API处理身份验证，在初始化配置中添加use_fedcm_for_prompt: true，可以提升隐身模式下的兼容性：

  google.accounts.id.initialize({
      client_id: environment.googleAuthClientId,
      callback: (window as any)['handleCredentialResponse'] =
      (response: any) => this.ngZone.run(() => {
        this.user = response;
        this.loggedIn = response != null;
        localStorage.setItem(LocalStorageKeyEnum.USER, JSON.stringify(response.credential));
        this.checkPermission();
      }),
      use_fedcm_for_prompt: true // 启用FedCM
  });
  

• 确认浏览器第三方Cookie权限
  即使已启用所有Cookie，隐身模式下Chrome/Edge默认可能阻止第三方Cookie。需在浏览器隐身模式设置中，确认"阻止第三方Cookie"未开启，或将你的站点加入例外列表。

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