AngularJS中的Google Signin按钮有时不显示

发布时间：2020-12-17 07:40:24 所属栏目：安全来源：网络整理

导读：我按照这个链接 https://developers.google.com/identity/sign-in/web/sign-in在Google角色网站上获得了Google登录. 我看到一些奇怪的行为.登录按钮有时显示但不总是.刷新页面时,仅刷新1到5,该按钮出现. 我在Chrome和Safari中尝试过,并且都有相同的行为. 码

我按照这个链接 https://developers.google.com/identity/sign-in/web/sign-in在Google角色网站上获得了Google登录.

我看到一些奇怪的行为.登录按钮有时显示但不总是.刷新页面时,仅刷新1到5,该按钮出现.

我在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">

的login.html

<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已经被角色渲染了,有时候还没有在Dom-ready事件之前呈现.
有 documentation如何获得与您自己的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',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',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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!