Javascript 我需要两个“登录谷歌”和“注册谷歌”按钮在同一页上

努力理解如何实现这一点，尽管这在网络上非常普遍

我有两个模态，一个是注册模态，另一个是登录模态。我需要能够执行这两个行动通过用户的谷歌帐户。我正在通过谷歌API成功创建和登录用户

问题在于谷歌的“登录”按钮会自动让用户登录

在这一页上，我有：

<div class="g-signin2" data-onsuccess="googleSignUp"></div>

但整个设置的行为并不理想。这有一个共同的解决办法吗？如果用户在没有任何用户操作的情况下登录，Google会自动运行onsuccess函数，这似乎令人非常沮丧。如果按钮在没有用户操作的情况下运行，那么有什么意义呢

---

所以：我希望用户能够通过谷歌登录，也可以通过谷歌注册，但前提是用户在这两种情况下都实际单击了一个按钮。

通过使用命令式方法实现谷歌登录按钮，您可以实现您想要的。我的建议是使用自定义按钮。这样，您将获得对API的更多控制。查看此文档：

这段视频可能也会有所帮助。

下面是一个示例代码

---

正如@agektmr所说，我使用了此处所述的自定义按钮

之后，您可以创建2个按钮，并对每个按钮使用不同的回调

这是我在react组件中使用的代码，这就是我从窗口对象引用auth2的原因，但是如果您使用vanilla JS，您可能不需要它，这也包含一些ES6。很抱歉，如果您不使用ES6，您可以将=>{}转换为函数{}，并将let转换为var

对于html，这只是从上面的文章中复制和粘贴并复制，如果你想让它符合谷歌的品牌指南，他们有CSS和进一步的说明，如果你想让他们验证你的应用程序，这是必须的

---

你是谷歌视频里的那个人

<div class="g-signin2" data-onsuccess="googleLogIn"></div>

$('a#google-login').click(function() {
    $.getScript('https://apis.google.com/js/platform.js');
})

// This method is from the above cited article, I have just altered it slightly so 
// that you can input a success  callback as a parameter rather than hard coding just one
function attachElementToCallback(element, success) {         
  window.auth2.attachClickHandler(element, {}, success    
    , (error) => {
      var message = JSON.stringify(error, undefined, 2);
      alert(message)
    });
}

function initializeGoogleStuff() {
  window.gapi.load('auth2', () => {
    window.auth2 = window.gapi.auth2.init({
      prompt: "select_account",
    })

    let signInElement = window.document.getElementById("signInButton")
    if (signInElement) {
      attachElementToCallback(signInElement, handleLogin)
    }

    let signUpElement = window.document.getElementById("signUpButton")
    if (signUpElement) {
      attachElementToCallback(signUpElement, (response) => console.log(response))
    }

  })
}

<div id="signInButton" class="customGPlusSignIn">
  <span class="icon"></span>
  <span class="buttonText">Sign In</span>
</div>
<div id="signUpButton" class="customGPlusSignIn">
  <span class="icon"></span>
  <span class="buttonText">Sign Up</span>
</div>