仅在用户单击按钮时触发Google登录功能

Question

单击下面用于Google登录按钮的代码。但是，当用户单击“登录”按钮时，此功能每次都会触发加载而不是触发器。它通过在窗口中显示标志甚至用户不感兴趣来影响用户体验。

除了onload函数之外，上面的代码工作正常。是否可以仅在用户触发Google登录按钮时加载此功能？在此之前不要加载此功能。

我不知道如何以及从上面的Javascript更改哪行代码。

JS：

//Google Sign in    
var googleUser = {};
window.startApp = function() {
  gapi.load('auth2', function(){
    // Retrieve the singleton for the GoogleAuth library and set up the client.
    window.auth2 = gapi.auth2.init({
      client_id: 'xxxxxxxxxxxxxxx.apps.googleusercontent.com',
      cookiepolicy: 'single_host_origin',
      // Request scopes in addition to 'profile' and 'email'
      scope: 'profile email'
    });
    attachSignin(document.getElementById('googleLink'));
  });
};

window.onbeforeunload = function(e){
  gapi.auth2.getAuthInstance().signOut();
};

window.attachSignin= function attachSignin(element) {

  window.auth2.attachClickHandler(element, {},
    function(googleUser) {
      console.log('Signed in: ' +
          googleUser.getBasicProfile().getName());
    }, function(error) {

  });

  // Listen for sign-in state changes.user
  window.auth2.isSignedIn.listen(function(user){
    googleUser = auth2.currentUser.get();
    var profile = googleUser.getBasicProfile();
    that.vue.onGoogleLoginProcess();
  });
}

window.onload=(function(){
  startApp();
}).bind(this);

HTML：

<div id="googleLink" class="customGPlusSignIn">
    <span>Sign in with Google</span>
</div>

Answer 1

只需删除下面的代码段即可。

window.onload=(function(){
  startApp();
}).bind(this);

并在onclick="startApp();"添加div如下。

<div id="googleLink" class="customGPlusSignIn" onclick="startApp();">
    <span>Sign in with Google</span>
</div>

Answer 2

你必须删除功能

window.onload

并在onclick="startApp();"添加div。