angularjs and googles url shortener

Question

I have an issue at the moment with the google url shortener. I have set up this service:

angular.module('widget.core').service('urlShortener', service);

function service($log, $q, $http) {

    var gapiKey = '<MyApiKey>';
    var gapiUrl = 'https://www.googleapis.com/urlshortener/v1/url';

    return {
        shorten: shorten
    };

    //////////////////////////////////////////////////

    function shorten(url) {
        console.log(url);
        var data = {
            method: 'POST',
            url: gapiUrl + '?key=' + gapiKey,
            headers: {
                'Content-Type': 'application/json',
            },
            data: {
                longUrl: url,
            }
        };

        return $http(data).then(function (response) {
            $log.debug(response);
            return response.data;
        }, function (response) {
            $log.debug(response);
            return response.data;
        });
    };
};

As far as I can tell, this should work. I have put in the correct API key and when I run this method I get this error:

{
    error: {
        code: 401,
        message: 'Invalid credentials'
    }
}

But, if I use postman and set it up exactly like this method:

• Make it post
• Add the content-type header and set it to application/json
• set the url to https://www.googleapis.com/urlshortener/v1/url?key=myapikey

• set the body to:

  { longUrl: 'myreallylogurl.com' }

When I post this, it works with no issues. I have checked my application on the google console and it is definitely set to unrestricted.

Has anyone come across this issue before? Does anyone know how to solve it?

Answer 1

I figured this out, it was nothing to do with the code above, but I thought I would answer my own question because someone else may run into the same issue.

In the project I have an httpInterceptor set up that adds the authetentication token to each request for talking to my API. This was what was causing the issue. It so happened that I already defined a constant for my apiUrl, so I just updated the interceptor to check to make sure that the request url was my api before trying to append the token. Like this:

angular.module('widget.core').factory('authInterceptor', factory);

function factory($q, $location, $localStorage, apiUrl) {

    // The request function
    var request = function (config) {

        // If we are querying our API
        if (config.url.indexOf(apiUrl) > -1) {

            // Get our stored auth data
            var authData = angular.fromJson($localStorage.get('authorizationData'));

            // Set our headers to the request headers or a new object
            config.headers = config.headers || {};

            // If we have any auth data
            if (authData && authData.authenticated) {

                // Set our authorization header
                config.headers.Authorization = 'Bearer ' + authData.token;
            }
        }

        // Return our config
        return config;
    };

    return {
        request: request
    };
};

I hope that helps someone else. Took me hours to figure it out :/