Google oAuth Angular service

Question

I wrote a module with 3 services that execute the oauth (and set the api key) for the google api and return the token object if the promise is positive.

Here is the whole working module:

angular.module('gapiOAuth', [])
.controller('gapiOAuthController', ['$scope', function($scope){     
}])

.factory('gapiCredentialsSrvc', function(){             
    return {
        gapiClientId: 'xxx',
        gapiScopeUrl: ['https://www.googleapis.com/auth/userinfo.email','https://www.googleapis.com/auth/blogger'],
        gapiKey: 'xxx'
    }
})

.factory('gapiGetTokenSrvc', ['$q','gapiCredentialsSrvc', function($q, gapiCredentialsSrvc){                
    return function (){
        var q = $q.defer();
        angular.element(document).ready(function(){
            gapi.auth.authorize({client_id: gapiCredentialsSrvc.gapiClientId, scope: gapiCredentialsSrvc.gapiScopeUrl, immediate: true}, function(response){
                if(response && !response.error){
                    q.resolve(response);                
                } else {
                    q.reject({});                       
                }
            });
        });
        return q.promise;
    };
}])

.factory('gapiLogInSrvc',['$q','gapiCredentialsSrvc', function($q, gapiCredentialsSrvc){            
    return function(){
        var q = $q.defer();
        angular.element(document).ready(function(){
            gapi.auth.authorize({client_id: gapiCredentialsSrvc.gapiClientId, scope: gapiCredentialsSrvc.gapiScopeUrl, immediate: false}, function(response){
                if(response && !response.error){
                    q.resolve(response);
                }else{
                    q.reject(response.error);
                }
            });
        });
        return q.promise;
    };
}])

.factory('gapiSetApiKeySrvc',['gapiCredentialsSrvc', function(gapiCredentialsSrvc){         
    return function(){  
        angular.element(document).ready(function(){
            gapi.client.setApiKey(gapiCredentialsSrvc.gapiKey);
            return true;
        });
    };
}])

Do you think there will be security issues if I put this code I made onto the client side?

How can I improve it?

Answer 1

Do you think there will be security issues if I put this code I made onto the client side?

Yes. You should not expose your Google API key to other users - it should be hidden away on your server. You should expose an end point on an API server that will run the Google OAuth actions. This is known as the three-legged or server-side OAuth flow.

The security reasons mainly come down to the fact that if someone knows your API key then they can masquerade as you. This is usually solved by a shared secret (or just a private key), but the Google OAuth flow doesn't appear to provide this.

You can see here for Google's own resource on best practises for API keys.