Google 不刷新页面就不会出现身份服务登录按钮

Question

我在使用 React 实现 Google Identity Service 登录按钮时遇到了一个奇怪的行为。当我第一次访问登录页面时，Google 登录按钮没有出现，但点击 window 出现。如果我刷新页面，那么两者都会出现。在那之后，如果我导航到其他页面并返回登录页面按钮再次消失但点击 window 出现。

页面首次加载

浏览器刷新后的页面

我使用了以下代码作为登录按钮

renderGoogleSignInButton = () => {
return (
  <>
    <div
      id="g_id_onload"
      data-client_id="MY_CLIENT_ID"
      data-auto_prompt="false"
      data-auto_select="true"
      data-callback="handleCredentialResponse"
    ></div>
    <div
      className="g_id_signin mt-4 flex justify-center"
      data-type="standard"
      data-size="large"
      data-theme="outline"
      data-text="sign_in_with"
      data-shape="rectangular"
      data-logo_alignment="left"
    ></div>
  </>
)

}

和以下代码一键 window

componentDidMount() {
google.accounts.id.initialize({
  client_id: MY_CLIENT_ID,
  callback: this.handleCredentialResponse,
})
google.accounts.id.prompt()

}

我使用 google 搜索没有找到任何线索，甚至在文档中也没有。预先感谢您的帮助。

Answer 1

听起来One Tap 提示正在按预期显示，但有点不清楚。如果您在使用 One Tap 时遇到问题，请查看 PromptMomentNotification and getNotDisplayedReason values, they should help you to understand the reason why the One Tap prompt may not be displayed. You might also consider One Tap in an iframe React 是否存在难以调试的问题。

对于按钮，如果您没有发现预渲染、缓存或加载包含 g_id_signin 的 div 标记时有任何可疑之处，您可以尝试使用 JS 在浏览器端渲染按钮和 renderButton.

Answer 2

对于那些以后使用 React 会遇到这个问题的人。

constructor(props) {
super(props)
window.handleCredentialResponse = this.handleCredentialResponse
this.myRef = React.createRef()
}
componentDidMount() {
if (window.google) {
  window.google.accounts.id.initialize({
    client_id:MY_CLIENT_ID
    callback: this.handleCredentialResponse,
  })
  window.google.accounts.id.prompt()
  window.google.accounts.id.renderButton(this.myRef.current, {
    theme: 'outline',
    size: 'large',
  })
 }
}
......
}

Google 不刷新页面就不会出现身份服务登录按钮

Google identity service Signin Button don't appear without page refresh

google-signin

google-identity