使用按钮进行身份验证时，一键不会关闭

Question

我目前正在按照本指南将 GSI 迁移到 FedCM https://developers.google.com/identity/gsi/web/guides/fedcm-migration。

我的用例在同一页面上显示了一次点击和“使用 Google 登录”按钮。当 use_fedcm_for_prompt

 为 true 并且我使用按钮进行身份验证时，轻轻一按似乎不会自行消失。它需要重新加载新页面才能关闭。如果没有 FedCM，当我使用按钮进行身份验证时，一按总是会因旧的体验而被忽略。

我通过以下方式初始化了谷歌身份：

google.accounts.id.initialize({
  client_id: 'MOCK_CLIENT_ID',
  auto_select: true,
  cancel_on_tap_outside: false,
  callback: () => {
    // Perform auth
  },
  prompt_parent_id: 'MOCK_PARENT_ID',
  itp_support: true,
  use_fedcm_for_prompt: true
});

// Show one tap
google.accounts.id.prompt();

// Render Google button
// buttonElement is the HTML element of the parent rendering the Google button
google.accounts.id.renderButton(buttonElement, {
  theme: 'outline',
  size: 'large',
  logo_alignment: 'left',
  locale: 'en_US',
  text: 'continue_with',
  width: '400',
});

我尝试通过回调使用

google.accounts.id.cancel()

 手动关闭一次点击，并单击按钮上的侦听器，但是当启用 FedCM 时 

google.accounts.id.cancel()

 不再关闭提示。

google.accounts.id.renderButton(buttonElement, {
  theme: 'outline',
  size: 'large',
  logo_alignment: 'left',
  locale: 'en_US',
  text: 'continue_with',
  width: '400',
  click_listener: () => {
    google.accounts.id.cancel()
  },
});

是否有任何解决办法可以确保当我使用按钮进行身份验证时，轻轻一按就会自行消失？在使用按钮或一键进行身份验证后，我不需要手动关闭一键。

Answer 1

我遇到了同样的问题，对我来说，这与我如何在 React 组件中构建逻辑有关。具体来说，我在一个 useEffect 挂钩中完成了 Google 登录初始化、一键提示显示和登录按钮渲染。一旦我将逻辑分成每个部分的单独 useEffect 挂钩，“一键点击”模式就开始按预期关闭，无需任何手动干预。

有趣的是，我发现模态不关闭的问题只存在于 Chrome 中。该模式在其他浏览器中可以正确关闭，但在 Chrome 中则不然。将逻辑拆分为单独的钩子也解决了 Chrome 中的问题。