Google Login API最初需要两次点击

Question

我们已将我们的Google登录代码移到我们的angularJS控制器中，并且在页面初始加载后，登录需要两次点击。尝试在页面加载后移动init代码但最初仍需要两次单击。知道可能导致这种情况的原因吗？这是代码：

HTML：

<button type="button" id="googleLogin" ng-click="onGoogleLogin()"
        class="btn btn-sm btndefault">
  Login
</button>

AngularJS控制器：

function GoogleLogin($scope) {

  $scope.onGoogleLogin = function() {

    gapi.load('auth2', function() {
        //Retrieve the singleton for the GoogleAuth library and set up the client.
        auth2 = gapi.auth2.init({
            client_id: 'CLIENT_ID.apps.googleusercontent.com',
            //cookiepolicy: 'single_host_origin'
        });

        var element = document.getElementById('googleLogin');

        auth2.attachClickHandler(element, {},
        function(response) {

            //https://developers.google.com/identity/sign-in/web/reference
            var profile = response.getBasicProfile();

            console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
            console.log('Name: ' + profile.getName());
            console.log('Image URL: ' + profile.getImageUrl());
            console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.

            console.log('ID Token: ' + response.getAuthResponse().id_token);
        }, 
        function(error) {
            console.log(JSON.stringify(error, undefined, 2));
        });
    });
  }

}

有什么想法吗？

Answer 1

这可以作为指令更好地实现：

app.directive("googleLoginDirective", function() {
    return {
        link: postLink
    };
    function postLink(scope,elem,attrs) {
        gapi.load('auth2', function() {
            //Retrieve the singleton for the GoogleAuth library and set up the client.
            auth2 = gapi.auth2.init({
                client_id: 'CLIENT_ID.apps.googleusercontent.com',
                //cookiepolicy: 'single_host_origin'
            });

            ̶v̶a̶r̶ ̶e̶l̶e̶m̶e̶n̶t̶ ̶=̶ ̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶'̶g̶o̶o̶g̶l̶e̶L̶o̶g̶i̶n̶'̶)̶;̶
            var element = elem[0];

            auth2.attachClickHandler(element, {},
            function(response) {

                //https://developers.google.com/identity/sign-in/web/reference
                var profile = response.getBasicProfile();

                console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
                console.log('Name: ' + profile.getName());
                console.log('Image URL: ' + profile.getImageUrl());
                console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.

                console.log('ID Token: ' + response.getAuthResponse().id_token);
            }, 
            function(error) {
                console.log(JSON.stringify(error, undefined, 2));
            });
        });
    }
})

用法

<button type="button" google-login-directive
        class="btn btn-sm btndefault">
  Login
</button>

当AngularJS框架实例化该指令时，它会调用gapi.load函数并将Google单击处理程序附加到该元素。

有关更多信息，请参阅

• AngularJS Developer Guide - Creating Custom Directives

Answer 2

您已经设置了在单击按钮时运行的功能，但是您在该功能中调用了attachClickHandler。因此，点击处理程序仅在第一次单击后才会附加，这就是OAuth流在第二次启动时启动的原因。

您需要更改代码，以便它只在页面加载时运行。没有必要把它放在ng-click属性中，因为attachClickHandler会为你处理所有这些。