How to implement google + using angularjs

Question

I have an AngularJS application and I want to implement G + input. I went through their samples and they work as standalone applications.

https://developers.google.com/+/web/signin/

In my Angular app, I can display the G + login button. But I'm stuck on a callback. Am I putting a callback function in my controller js file?

If yes, and this controller:

app.controller('myController', function ($scope) {
    function signinCallback(authResult) {

In my data callback, how can I call it so that it falls into signinCallback inside myController?

    <span id="signinButton">
      <span
        class="g-signin"
        data-callback="signinCallback"
        data-clientid="123456789.apps.googleusercontent.com"
        data-cookiepolicy="single_host_origin"
        data-requestvisibleactions="http://schemas.google.com/AddActivity"
        data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read"
      </span>
    </span>

Answer 1

Google+ PhotoHunt Google+ AngularJS. Ruby, Java, Python #/.NET . AngularJS:

, :

<span id="signin" ng-show="immediateFailed">
  <span id="myGsignin"></span>
</span>

JavaScript :

$scope.signIn = function(authResult) {
  $scope.$apply(function() {
    $scope.processAuth(authResult);
  });
}

$scope.processAuth = function(authResult) {
  $scope.immediateFailed = true;
  if ($scope.isSignedIn) {
    return 0;
  }
  if (authResult['access_token']) {
    $scope.immediateFailed = false;
    // Successfully authorized, create session
    PhotoHuntApi.signIn(authResult).then(function(response) {
      $scope.signedIn(response.data);
    });
  } else if (authResult['error']) {
    if (authResult['error'] == 'immediate_failed') {
      $scope.immediateFailed = true;
    } else {
      console.log('Error:' + authResult['error']);
    }
  }
}

$scope.renderSignIn = function() {
  gapi.signin.render('myGsignin', {
    'callback': $scope.signIn,
    'clientid': Conf.clientId,
    'requestvisibleactions': Conf.requestvisibleactions,
    'scope': Conf.scopes,
    'apppackagename': 'your.photohunt.android.package.name',
    'theme': 'dark',
    'cookiepolicy': Conf.cookiepolicy,
    'accesstype': 'offline'
  });
}

processAuth , . JavaScript GitHub.

Answer 2

, , :

module.factory("GPlusAuthService", function ($q, $window) {
    var signIn;
    signIn = function () {
        var defered = $q.defer();
        $window.signinCallback = function (response) {
            $window.signinCallback = undefined;
            defered.resolve(response);
        };

        gapi.auth.signIn({
            clientid: "123456789.apps.googleusercontent.com"
            cookiepolicy: "single_host_origin"
            requestvisibleactions: "http://schemas.google.com/AddActivity"
            scope: "https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read",
            callback: "signinCallback"

        }) 
        return defered.promise;
    };
    return {
        signIn: signIn;
    }


});
module.controller('myController', function ($scope, GPlusAuthService) {
    $scope.signIn = function() {
        GPlusAuthService.signIn().then(function(response) {

        });    
    }
});


<span id="signinButton" ng-controller="myController">
   <span class="g-signin" ng-click="signIn()"></span>
</span>

Answer 3

The function that will be called after the user agrees to the entry is indicated in the data callback, this function should be available worldwide, which is tied to the window object.
Access to the global object from the controller is an anti-template, as an intermediate field you can use the $ window provided by Angular, which you can mock your tests