AngularJS ngResrouce REST Authentication

Question

I'm trying to learn AngularJS. I'm try to make a simple authenticated get request to a REST api. At this point, i'm just trying to get a response back. I keep getting invalid key because I can't seem to send the headers properly.

angular.module('App', ['ngResource']);

function AppCtrl($scope, $resource){
$scope.app = $resource('https://theapiurl.com/parameter=:action',
    {action:'My Parameter works fine!'}, 
    {method: 'GET'},
    {headers: 'auth-key' : 'key'});
$scope.app.get();
}

I just can't seem to get the header to send. Thanks for reading.

Im really not sure how to answer that. The api and key are provided by mashape.com. This doc describes how they authenticate. mashape.com/docs/consume/rest#authorization — WordPress Mike
– WordPress Mike, Commented Nov 1, 2013 at 23:56

Daniel Tabuenca · Accepted Answer · 2013-11-02 05:45:28Z

4

If you are using angular-resource 1.1.x+ the following should work:

angular.module('App', ['ngResource']);

function AppCtrl($scope, $resource){
    $scope.app = $resource('https://theapiurl.com/parameter=:action',
      {
        action:'My Parameter works fine!'
      }, 
      {
        get: {
          method: 'GET',
          headers : { 'auth-key' : 'key' }
        }
      });
     $scope.app.get();
}

If you are using 1.0.x branch this won't work. I believe the only alternative is to set global default headers in $httpProvider, or to user $http directly (not using $resource). Here's how you would set the headers globally:

$httpProvider.defaults.headers.get['auth-key'] = 'key';

edited Nov 2, 2013 at 5:45

answered Nov 2, 2013 at 1:40

Daniel Tabuenca

13.7k3 gold badges40 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Tabuenca Over a year ago

I had missed one thing in my answer. I updated it to show the correct way. Note this will only work in 1.1.x and above.

WordPress Mike Over a year ago

Excellent. I switched to version 1.1.5 from 1.0.7 and added the get action and it works as intended! Though, You have an extra curly brace I believe. Thanks so much for your help.

Steve Davis · Accepted Answer · 2013-11-02 04:28:49Z

1

To avoid setting the header in every resource you could use an interceptor:

app.config(function($httpProvider) {
    $httpProvider.interceptors.push(function($q) {
        return {
            'request': function(config) {
            config.headers['auth-key'] = 'key';
                return $q.when(config);
            }
        };
    });
});

answered Nov 2, 2013 at 4:28

Steve Davis

7165 silver badges13 bronze badges

2 Comments

Daniel Tabuenca Over a year ago

You don't need interceptors just to set default headers. there is an $httpProvider.defaults.header property just for that purpose.

Fardin K. Over a year ago

This is a better approach if you're using third-party resources as well since you can define conditions.

Collectives™ on Stack Overflow

AngularJS ngResrouce REST Authentication

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related