我需要在同一页面上同时使用 "log in with Google" 和 "sign up with Google" 按钮

Question

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

我有两个模态，一个是 "sign up" 模态，另一个是 "log in" 模态。我需要能够通过用户的 Google 帐户执行这两项操作。我通过 Google API.

成功创建并登录了用户

问题在于 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');
})

但是整个设置的行为并不理想。有一个共同的解决办法吗？如果用户已登录（例如，无需任何用户操作），Google 会自动运行 onsuccess 功能，这似乎令人难以置信。如果按钮在没有用户操作的情况下运行，那么它有什么意义？

所以： 我希望能够通过 Google 登录用户，并通过 Google、 注册用户但前提是 用户实际点击了按钮，在这两种情况下。

Answer 1

您可以通过使用命令式方法实现 Google 登录按钮来实现您想要的效果。我的建议是使用自定义按钮。这样你就可以更好地控制 API。查看此文档：
https://developers.google.com/identity/sign-in/web/build-button

这个视频也可能有帮助。
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 组件中使用的代码，这就是为什么我从 window 对象中引用 auth2，但如果你使用 vanilla 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（这只是从上面的文章中复制粘贴并复制，他们有 CSS 和进一步的说明，如果你想让它符合谷歌的品牌指南（这如果您希望他们验证您的应用程序，则必须这样做）https://developers.google.com/identity/branding-guidelines

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

我需要在同一页面上同时使用 "log in with Google" 和 "sign up with Google" 按钮

I need both "log in with Google" and "sign up with Google" buttons on the same page

javascript

jquery

google-api

google-plus

google-signin