有时不显示AngularJS中的Google登录按钮

Emma 发表于 Dev

艾玛

我点击了此链接https://developers.google.com/identity/sign-in/web/sign-in，以在基于Angular的网站上获取Google登录。

我已经看到一些奇怪的行为。登录按钮有时会显示，但并不总是显示。当我刷新页面时，只有五分之一的刷新，该按钮出现。

我在Chrome和Safari中尝试过，两者的行为相同。

码：

index.html

<script src="https://apis.google.com/js/platform.js" async defer></script>

<meta name="google-signin-client_id" content="my_client_id">

<div class="g-signin2" data-onsuccess="onSignIn"></div>

angular.module('app').controller('LoginCtrl', function($scope) {
    window.onSignIn = function(googleUser) {
        // Get some info
    }
});

游泳汉堡

我的猜测是platform.js脚本等待DOM就绪事件，然后使用“ g-signin2”类查找div。但是，在Angularjs中，工作原理有所不同。之所以有时起作用，是因为有时div已由Angular渲染，有时未在Dom-ready事件之前渲染。有关如何使用您自己的javascript获得相同结果的文档。我做了一个遵循您的路由的示例。

<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-view></div>

<script src="https://apis.google.com/js/platform.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.6/angular-route.min.js"></script>
<script>
    angular.module('app',['ngRoute'])
            .config(['$routeProvider',function($routeProvider){
                $routeProvider
                        .when('/log-in', {
                            template: '<button ng-click="logInCtrl.onLogInButtonClick()">Log In</button>',
                            controller: 'LogInController',
                            controllerAs: 'logInCtrl'
                        }).otherwise({
                            redirectTo:'/log-in'
                        });
            }])
            .controller('LogInController',function(){
                var self = this; //to be able to reference to it in a callback, you could use $scope instead
                gapi.load('auth2', function() {//load in the auth2 api's, without it gapi.auth2 will be undefined
                    gapi.auth2.init(
                            {
                                client_id: 'CLIENT_ID.apps.googleusercontent.com'
                            }
                    );
                    var GoogleAuth  = gapi.auth2.getAuthInstance();//get's a GoogleAuth instance with your client-id, needs to be called after gapi.auth2.init
                    self.onLogInButtonClick=function(){//add a function to the controller so ng-click can bind to it
                        GoogleAuth.signIn().then(function(response){//request to sign in
                            console.log(response);
                        });
                    };
                });
            });
</script>
</body>
</html>

或作为指令：

<!doctype html>
<html lang="en" ng-app="app" ng-controller="MainController">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <google-sign-in-button on-sign-in="onSignIn(response)" g-client-id="CLIENTID.apps.googleusercontent.com"></google-sign-in-button>

<script src="https://apis.google.com/js/platform.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script>
    angular.module('app',[])
            .controller('MainController',['$scope', function ($scope) {
                $scope.onSignIn=function(response){
                    console.log(response);
                }
            }])
            .directive('googleSignInButton',function(){
                return {
                    scope:{
                        gClientId:'@',
                        callback: '&onSignIn'
                    },
                    template: '<button ng-click="onSignInButtonClick()">Sign in</button>',
                    controller: ['$scope','$attrs',function($scope, $attrs){
                        gapi.load('auth2', function() {//load in the auth2 api's, without it gapi.auth2 will be undefined
                            gapi.auth2.init(
                                    {
                                        client_id: $attrs.gClientId
                                    }
                            );
                            var GoogleAuth  = gapi.auth2.getAuthInstance();//get's a GoogleAuth instance with your client-id, needs to be called after gapi.auth2.init
                            $scope.onSignInButtonClick=function(){//add a function to the controller so ng-click can bind to it
                                GoogleAuth.signIn().then(function(response){//request to sign in
                                    $scope.callback({response:response});
                                });
                            };
                        });
                    }]
                };
            });
</script>
</body>
</html>

写完前面的示例后，我发现了一种更好，更轻松的方法来实现它。使用此代码，您可以像平常一样继承相同的按钮。

<!doctype html>
<html lang="en" ng-app="app" ng-controller="MainController">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="google-signin-client_id" content="CLIENTID.apps.googleusercontent.com">
</head>

<body>
  <google-sign-in-button button-id="uniqueid" options="options"></google-sign-in-button>

  <script src="https://apis.google.com/js/platform.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
  <script>
    angular.module('app', [])
      .controller('MainController', ['$scope',
        function($scope) {
          //for more options visit https://developers.google.com/identity/sign-in/web/reference#gapisignin2renderwzxhzdk114idwzxhzdk115_wzxhzdk116optionswzxhzdk117
          $scope.options = {
            'onsuccess': function(response) {
              console.log(response);
            }
          }
        }
      ])
      .directive('googleSignInButton', function() {
        return {
          scope: {
            buttonId: '@',
            options: '&'
          },
          template: '<div></div>',
          link: function(scope, element, attrs) {
            var div = element.find('div')[0];
            div.id = attrs.buttonId;
            gapi.signin2.render(div.id, scope.options()); //render a google button, first argument is an id, second options
          }
        };
      });
  </script>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。