javascript - Google 登录 API 最初需要两次点击

Question

我们已将我们的 Google 登录代码移到我们的 angularJS Controller 中，并且在页面初始加载后，需要两次点击才能登录。尝试在页面加载后移动初始化代码，但最初仍需要两次点击。知道是什么原因造成的吗？这是代码:

HTML:

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

AngularJS Controller :

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