Skip to content
Create a gist now

Instantly share code, notes, and snippets.

AngularJS Service with Controller for access to Google API with Javascript Client (and RequireJS)
define(['angular', 'services'], function (angular) {
'use strict';
return angular.module('myApp.controllers', ['myApp.services'])
.controller('IndexCtrl', ['$scope', 'googleService', function ($scope, googleService) {
$scope.login = function () {
googleService.login().then(function (data) {
// do something with returned data
console.log(data.email);
}, function (err) {
console.log('Failed: ' + err);
});
};
}]);
});
define(['angular'], function (angular) {
'use strict';
angular.module('myApp.services', [])
.service('googleService', ['$http', '$rootScope', '$q', function ($http, $rootScope, $q) {
var clientId = '{CLIENT_ID}',
apiKey = '{API_KEY}',
scopes = '{SCOPES}',
domain = '{OPTIONAL DOMAIN}',
deferred = $q.defer();
this.login = function () {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: false,
hd: domain
}, this.handleAuthResult);
return deferred.promise;
}
this.handleClientLoad = function () {
gapi.client.setApiKey(apiKey);
gapi.auth.init(function () { });
window.setTimeout(checkAuth, 1);
};
this.checkAuth = function() {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: true,
hd: domain
}, this.handleAuthResult);
};
this.handleAuthResult = function(authResult) {
if (authResult && !authResult.error) {
var data = {};
gapi.client.load('oauth2', 'v2', function () {
var request = gapi.client.oauth2.userinfo.get();
request.execute(function (resp) {
data.email = resp.email;
});
});
deferred.resolve(data);
} else {
deferred.reject('error');
}
};
this.handleAuthClick = function(event) {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: false,
hd: domain
}, this.handleAuthResult);
return false;
};
}]);
});
@mpgn
mpgn commented Jul 29, 2014

You miss a comma ligne 5 controllers.js after googleService , new ligne :

.controller('IndexCtrl', ['$scope', 'googleService', function ($scope, googleService) 
@anil1712

I am getting this error ReferenceError: gapi is not defined in my chrome console while calling login function, can you please tell me is there any other library which I need to include.

@anil1712

I added this <script type="text/javascript" src="https://apis.google.com/js/platform.js"> in my file but getting the error but this time error is different, it is TypeError: Cannot read property 'authorize' of undefined

Please give me some solution on the same.

@anil1712

Hey now its working when adding the <script src="https://apis.google.com/js/client.js"></script> but getting console.log(data.email); as empty object, I also need accessToken/profileToken and name inside data object.

@davidkaneda

Sorry, new to Angular but any help would be appreciated... How do you call your service's handleClientLoad from the script load (which takes a global function name for callback)? Thanks-

@glebec
glebec commented Oct 8, 2014

I think your data resolution needs to be inside the request execution, no? Otherwise the first time this runs it will return undefined. In services.js, move deferred.resolve(data); from line 47 to after line 44.

@shabin-slr

I need to prompt user to select a google account even if there is only one logged-in account. How can i set the 'prompt' parameter in this approach?

@sakshigargit15

I need to get the data of the google account how can I do this because in data.email I am getting the empty array. if anyone know the answer please add it.

Thanks in advance

@AbdallahMyuto

What about displaying multiple youtube channel, what need to be added?

@meenakshireka

how to display video in html page

@marcusmotill

^lol

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.