Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
Copy link

mpgn commented Jul 29, 2014

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

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

Loading

@anil1712
Copy link

anil1712 commented Aug 26, 2014

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.

Loading

@anil1712
Copy link

anil1712 commented Aug 26, 2014

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.

Loading

@anil1712
Copy link

anil1712 commented Aug 26, 2014

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.

Loading

@davidkaneda
Copy link

davidkaneda commented Oct 2, 2014

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-

Loading

@glebec
Copy link

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.

Loading

@shabin-slr
Copy link

shabin-slr commented Nov 3, 2014

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?

Loading

@sakshigargit15
Copy link

sakshigargit15 commented Oct 20, 2015

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

Loading

@phedoreanu
Copy link

phedoreanu commented Oct 22, 2015

Loading

@abdallahmayuto
Copy link

abdallahmayuto commented Nov 29, 2015

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

Loading

@meenakshireka
Copy link

meenakshireka commented Mar 23, 2016

how to display video in html page

Loading

@marcusmotill
Copy link

marcusmotill commented Apr 20, 2016

^lol

Loading

@tanzeel291994
Copy link

tanzeel291994 commented Sep 30, 2017

the data object from the callback function of login is coming only in console and cant be accessed in script on line no:8 of controller.js

Loading

@tanzeel291994
Copy link

tanzeel291994 commented Sep 30, 2017

@glebec is right.

Loading

@nitesh-daga
Copy link

nitesh-daga commented May 20, 2019

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-

Hey i was looking for the same . Did you got to know how is it handled ?

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment