Why am I Getting a 403 Error with Blogger API and AngularJS?

Question

I am just starting to get to grips with building on top of 3rd Party API and one feature I would like to add to my own site (written in AngularJS) is to build off of Blogger's API to create a blog feed.

I have set everything up and am seeing a 200 status as a request, but the response in the network tab is showing:

// API callback
angular.callbacks._0({
 "error": {
  "errors": [
   {
    "domain": "usageLimits",
    "reason": "dailyLimitExceededUnreg",
    "message": "Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup.",
    "extendedHelp": "https://code.google.com/apis/console"
   }
  ],
  "code": 403,
  "message": "Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup."
 }
}
);

here is my controller:

$http.jsonp('https://www.googleapis.com/blogger/v3/blogs/' + id + '?api_key=' + apiKey).then(function(res) {
    $scope.blogData = res.data;
    console.log($scope.blogData, res);
}, function(error) {
    console.log(error);
});

so the request is successful by the looks of things, but the response is showing authentication issues. I have read the docs and the blog will be public, so there shouldn't be any issue with secrets etc.

any ideas?

Answer 1

the problem is the parameter in the url api_key . it should be only key . like this it work.

$http.jsonp('https://www.googleapis.com/blogger/v3/blogs/' + id + '?key=' + apiKey).then(function(res) {
    ...
}, function(error) {
    console.log(error);
});  

Here an example from the documentation https://developers.google.com/blogger/docs/3.0/using#RetrievingABlog