AngularJS Service with Controller for access to Google API with Javascript Client (and RequireJS)

controllers.js

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


        }]);
});

services.js

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;
            };

        }]);
});

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

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

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.

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.

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.

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-

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.

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?

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

Include the email scope. https://developers.google.com/+/web/api/rest/oauth#email-scopes

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

how to display video in html page

^lol

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

@glebec is right.

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 ?