Google 登录按钮无法正常工作

Question

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

我在我的反应应用程序中使用这个脚本，但面临两个问题 1.有时重新加载后，登录按钮会消失，然后我需要将网址粘贴到不同的选项卡上才能将其恢复 2. 如果我先用一个帐户登录，然后用另一个帐户登录，虽然我得到了第二个帐户的所有信息，但 google 按钮显示的是第一个登录的用户电子邮件地址

useEffect(() => {
    /* global google */
    console.log(window.google,process.env.REACT_APP_GOOGLE_CLIENT_ID)
    if (window.google) {
      google.accounts.id.initialize({
        client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
        callback: handleGoogle,
      });
      console.log(google.accounts.id," odddddddddd")
      google.accounts.id.renderButton(document.getElementById("signUpDiv"), {
        // type: "standard",
        theme: "filled_black", 
        // size: "small",
        text: "continue_with",
        shape: "pill",
      });

      // google.accounts.id.prompt()
    }
  }, [handleGoogle]);

Answer 1

我没有清楚地了解您的上下文，但我有一些建议，您应该在 console.cloud.google.com 上检查您的配置。检查您的客户端 ID 是否正确，同时检查“授权 JavaScript 来源”，您应该添加您的本地主机 URL 和您正在使用的端口。

您的第二个问题可能是因为之前登录的用户的电子邮件可能会导致按钮无法正确更新其状态。要解决此问题，请务必确认在显示新用户的详细信息之前清除了先前用户的数据。确保handleGoogle函数有效地管理用户信息并根据需要调整组件的状态。

如果您仍然遇到按钮显示不正确的用户电子邮件的问题，那么检查您的handleGoogle函数以确保它正确处理用户信息的清除和更新可能会很有帮助。