how to implement google+ sign-in with angularjs

Question

I have an AngularJS app, and I want to implement G+ sign-in. I've gone through their samples, and they work as standalone apps.

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

In my Angular app, I am able to display the G+ sign-in button. But I'm stuck on the callback. Do I put the callback function in my controller js file?

If so, and given this controller:

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

On my data-callback, how do I name it so that it goes to 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>

class · Accepted Answer · 2015-01-13 17:32:38Z

7

The Google+ PhotoHunt sample app demonstrates an AngularJS integration with Google+. The sample is available in Ruby, Java, Python, and C#/.NET for web. Of note should be the following code in the AngularJS front-end:

Markup to render the button in:

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

JavaScript to glue the markup to code:

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

Within processAuth, you should see an access token and can update your UI to reflect this. You can also see the full controller's JavaScript code on GitHub.

edited Jan 13, 2015 at 17:32

answered Dec 30, 2013 at 23:57

class

8,69131 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

guy mograbi Over a year ago

The "full controllers javascript code on github" link leads to 404. can you please update it?

class Over a year ago

Got it, PhotoHunt was pulled, you can try one of the older forks such as this: github.com/gguuss/gplus-photohunt-server-csharp/tree/master/… - updated answer.

kfis · Accepted Answer · 2013-12-28 02:25:05Z

I am not sure if this works, but I would try it like this:

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>

TheRusskiy · Accepted Answer · 2013-12-28 00:40:20Z

0

Function that is going to be called after user agrees to sign in is specified in data-callback, this function needs to be globally accessible, that is bound to window object.
Accessing global object from controller is an anti-pattern, as a middle ground you can use $window provided by Angular, which you can mock in your tests

answered Dec 28, 2013 at 0:40

TheRusskiy

1,10112 silver badges15 bronze badges

1 Comment

citizenslave Over a year ago

Even better, and to actually address that criticism, you can use the gapi.auth.authorize method instead. It takes almost all of the same parameters in the parameter object, but instead of passing in the callback there, you pass it in as its own parameter and you can directly reference the function, allowing you to send in other controller methods, local functions, or anonymous functions as you see fit. You might even be able to do that with the gapi.auth.signIn method, but I'm using authorize in my application.

Collectives™ on Stack Overflow

how to implement google+ sign-in with angularjs

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related