Question

所以我尝试了以下模板来尝试集成this：

HTML ：

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

CSS ：

.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());
       }
    };
})

-

我也尝试在标题中使用常规登录按钮：

HTML ：

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

在标题中：

<script>
    window.onLoadCallback = function(){
      gapi.auth2.init({
          client_id: '123.apps.googleusercontent.com'
        });
    }
</script>

无论我做什么，我都无法弄清楚如何记录用户。在我的控制器中，当我尝试gapi.auth.signOut();时，它说 gapi未定义

修改：

我也尝试过这个让人在运行中登录，但理想情况下我想在任何地方进行注销，而不仅仅是在页面加载时。我只是不知道该把它放在哪里或正确的方法来实现它：

.run(function ($rootScope, $state) {
    gapi.load('auth2', function() {
        auth2 = gapi.auth2.init();
        auth2.then(function(){
            auth2.signOut();
        });
    });
})

编辑＃2：

我还试图在我的ui-router上创建这个工厂，但它没有及时获取数据

.factory('Auth', function($http, $state, $q, $rootScope) {
    var factory = { loggedIn: loggedIn };
    return factory;

    function loggedIn() {
        gapi.load('auth2', function() {
            auth2 = gapi.auth2.init();
            auth2.then(function(){
                return auth2.isSignedIn.get();
            });
        });
    }

})

编辑＃3：

我尝试创建服务但是由于某种原因我不断收到以下错误甚至测试它：

错误：undefined不是对象（评估'gapi.auth2.init'）

.service('googleService', ['$http', '$rootScope', '$q', function ($http, $rootScope, $q) {

    var self = this;

    this.signedIn = function() {
        auth2 = gapi.auth2.init();
        auth2.then(function(){
            return auth2.isSignedIn.get();
        });
    }

    this.signOut = function(){
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
            console.log('User signed out.');
        });
    }

}])

.controller('login', ['$rootScope', '$scope', '$q', 'googleService', function ($rootScope, $scope, $q, googleService) {
    console.log(googleService.signedIn());

}])

Answer 1

我建立在我之前answer on a related question的小提琴上。基本上我添加的是控制器范围的一个函数，当用户点击注销按钮时会调用该函数。

angular.module('app', [])
  .controller('MainController', ['$scope',
    function($scope) {
      $scope.isSignedIn = false;
      ...
      $scope.signOut = function(){
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
          $scope.$apply(function(){
            $scope.isSignedIn = false;
            console.log('User signed out.');
          });
        });
      }
    }
  ])

我使用了Google文档提供的代码段，这似乎立即起作用 在范围内更改变量时请注意，您必须将范围更改包含在$scope.$apply中，以强制检查范围内的更改。

您可以在此fiddle中找到完整的代码（我将在某个时候删除此Google api项目，因此如果它不起作用，请用您自己的API密钥替换它）

这是演示代码，所以如果你真的将它放在项目中，我建议隐藏服务和指令背后的一些复杂性。

更新：如果您想使用某项服务，您必须大量使用违规行为承诺，请参阅$q docs。

这里有一个关于如何使用promises和callback创建服务的示例。没有简单的方法来绕过回调地狱。但我希望将这些东西包装成服务将部分地解决这个问题。

这里有一个updated fiddle利用这项服务。这是js代码：

angular.module('app', [])
  .controller('MainController', ['$scope','googleService',
    function($scope, googleService) {
      $scope.isSignedIn = false;
      googleService.load().then(function(){
        $scope.signIn = function(){
          googleService.signIn().then(function(){
            $scope.isSignedIn = googleService.isSignedIn();
          });
        };

        $scope.signOut = function(){
          googleService.signOut().then(function(){
            $scope.isSignedIn = googleService.isSignedIn();
          });
        };
      });
    }
  ])
  .service('googleService', ['$q', function ($q) {
    var self = this;
    this.load = function(){
      var deferred = $q.defer();
      gapi.load('auth2', function(){
        var auth2 = gapi.auth2.init();
        //normally I'd just pass resolve and reject, but page keeps crashing (probably gapi bug)
        auth2.then(function(){
          deferred.resolve();
        });
        addAuth2Functions(auth2);
      });
      return deferred.promise;
    };

    function addAuth2Functions(auth2){
      self.signIn = function() {
        var deferred = $q.defer();
        auth2.signIn().then(deferred.resolve, deferred.reject);
        return deferred.promise;
      };

      self.isSignedIn = function(){
        return auth2.isSignedIn.get();
      }

      self.signOut = function(){
        var deferred = $q.defer();
        auth2.signOut().then(deferred.resolve, deferred.reject);
        return deferred.promise;
      };
    }

}]);

基本上，在load函数中你可以包含加载gapi和auth2的复杂性。在控制器中解决了加载承诺后，您确定signIn，signOut等可以正常工作，因为它已加载。

Answer 2

我采取了略微不同的方法。虽然，我不能很好地解释为什么你的代码不起作用，这对我有用。希望其他人可以帮助解决这个问题。

这是我的方法。如果这有帮助，请告诉我。

的login.html

<script>var gapiOnLoadCallback = function() { window.gapiOnLoadCallback(); }</script>
<script src="https://apis.google.com/js/platform.js?onload=gapiOnLoadCallback" async defer></script>

<div id="googleLoginButton"></div>

<button ng-show="signedIn" ng-click="signOut()">Sign Out</button>

login.js

angular.module('app', [])
.controller('LoginController', ['$window','$scope', function($window, $scope) {

  $window.gapiOnLoadCallback = function() {

    gapi.signin2.render('googleLoginButton', {
      'onsuccess': onSuccess,
      'onfailure': onFailure
    });
  }

  var onSuccess = function(googleUser) {
    // Success handling here
  };

  var onFailure = function() {
    // Failure handling here
  };

  $scope.signOut = function() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      // Some UI update
    });
  };
};

登录-directive.js

angular.module('app', []).directive("loginButton", function() {
  return {
    restrict: 'E',
    scope: {},
    templateUrl: 'login/login.html',
    controller: 'LoginController'
  }
});

使用angularjs

2 个答案: