Trouble Signing Out With Google Sign In (gapi) With Angularjs

So I have tried the following templates trying to integrate this: HTML: CSS:

Solution 1:

I build upon my fiddle from my previous answer on a related question. Basically what I added was a function to the controller scope that would be called when a user clicks on the signout button.

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

I used the code snippet provided by Google documentation and that seemed to work immediately. Do pay attention when changing variables in scope, you have to wrap your scope changes in $scope.$apply for angular to force to check changes in scope.

You can find the full code in this fiddle. (I will be removing this Google api project at some point, so replace the API Key with your own if it doesn't work)

This is demo code, so if you would actually put this in project, I'd recommend hiding some of the complexity behind services and directives.

---

Update: if you want to use a service, you'll have to use angulars promises heavily, see $q docs.

Here's a sample on how you could create a service using promises and callbacks. There's no simple way to get around the callback hell. But I hope wrapping these things into a service will solve that partially.

Here's an updated fiddle taking advantage of the service. This is the js code:

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) {
    varself = 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;
    };

    functionaddAuth2Functions(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;
      };
    }

}]);

Basically, inside the load function you wrap the complexity of loading gapi, and auth2. After the load promise resolved in your controller, you are certain that the signIn, signOut, etc will work because it is loaded.

Solution 2:

I took a slightly different approach. Though, I am not good enough to explain why your code does not work and this works for me. Hopefully, someone else can help on this.

Here is my approach. Let me know if this helps.

login.html

<script>var gapiOnLoadCallback = function() { window.gapiOnLoadCallback(); }</script><scriptsrc="https://apis.google.com/js/platform.js?onload=gapiOnLoadCallback"asyncdefer></script><divid="googleLoginButton"></div><buttonng-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
    });
  };
};

login-directive.js

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