Skip to content

Instantly share code, notes, and snippets.

@jakemmarsh
Last active May 20, 2019 10:15
Show Gist options
  • Save jakemmarsh/5809963 to your computer and use it in GitHub Desktop.
Save jakemmarsh/5809963 to your computer and use it in GitHub Desktop.
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) 

@anil1712
Copy link

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
Copy link

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
Copy link

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
Copy link

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
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.

@shabin-slr
Copy link

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
Copy link

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

@phedoreanu
Copy link

@abdallahmayuto
Copy link

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

@meenakshireka
Copy link

how to display video in html page

@marcusmotill
Copy link

^lol

@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

@tanzeel291994
Copy link

@glebec is right.

@nitesh-daga
Copy link

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 ?

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