Question

我们已经将Google登录代码移到了angularJS控制器中，并且在页面初始加载后，需要单击两次以进行登录。尝试在页面加载后移动初始化代码，但最初仍然需要单击两次。知道是什么原因造成的吗？这是代码：

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会为您处理所有这些事情。

Google Login API最初需要单击两次

2 个答案:

用法