我需要同一页上的“登录谷歌”和“与谷歌注册”按钮。

Question

很难理解如何做到这一点，尽管这在整个网络上是非常普遍的。

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

麻烦在于谷歌的下线按钮自动登录用户。

在我的页面上：

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

后来：

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

显然，这两个按钮具有不同的onsuccess函数，但是当用户登录时都会被调用。实际上，我只需要点击一个按钮就可以得到Google脚本，从而缓解了这个问题：

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

但是这个整体的行为并不理想。这有什么常见的解决办法吗？这似乎令人难以置信的沮丧，谷歌自动运行的onsuccess功能，如果用户是登录(如没有任何用户的行动)。如果一个按钮在没有用户操作的情况下运行，有什么意义呢？

So:我希望能够通过Google登录用户，也可以通过Google注册用户，但只有当用户实际单击一个按钮时，这两种情况都是如此。

Answer 1

您可以通过使用命令式方法实现Google登录按钮来实现您想要的结果。我的建议是使用自定义按钮。这样，您将获得对API的更多控制。看看这个医生：

https://developers.google.com/identity/sign-in/web/build-button

这段视频可能也有帮助。

https://www.youtube.com/watch?v=Oy5F9h5JqEU](https://www.youtube.com/watch?v=Oy5F9h5JqEU])

这是一个示例代码

https://github.com/GoogleChrome/google-sign-in

Answer 2

正如@agektmr所说，我使用了自定义按钮，如这里所述，https://developers.google.com/identity/sign-in/web/build-button

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

这是我在react组件中使用的代码，这就是为什么我从窗口对象中引用auth2的原因，但您可能不需要使用普通的JS，这也包含一些ES6 --非常抱歉，如果您不使用ES6，您只需将() => {}转换为function () { }，将let转换为var。

// 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))
    }

  })
}

对于html (这仅仅是从上面的文章中复制和复制的)，如果您想让它符合googles品牌指南(如果您想让它们验证您的应用程序，这是必须的)，那么它们有CSS和进一步的说明。

<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>