Accessing Django server from AngularJs App: Easy authentication solution?

Question

I've been looking everywhere but can't seem to find an answer that has been helpful.

I have written an angular app that is trying to pull data from a django RESTful backend that was written by my company. I have a username and password, but I'm not sure how to write the get request to provide the authentication credentials to the backend. I'm also confused about what exactly I'm supposed to provide in the header.

Eventually, we will be communicating using nginx.

What I want

I'm looking for a fix to write in the angular app itself. I'm trying to write the angular app as separate as possible from the django backend. I have already enabled cross origin resource sharing.

This will be a band aid fix just to display data from the backend. It does not need to be permanent by any means.

So far I have tried:

app.factory('mySamples', ['$http', function($http) {
    return $http.get('website/api/foo', {
    headers: {'username':"foo", 'password': 'bar'}
  }).success(function(data) {
    return data;
  }).error(function(err) {
    return err;
  }); 
};

app.factory('mySamples', ['$http', function($http) {
    return $http({method: 'GET', url: 'website/api/samples/', headers: {
        'user': 'foo', 'auth':'bar'}
    });
};

The second factory I wrote returns METHOD: OPTIONS in the networks inspector under returned header. Does anybody have a quick fix just to get data from my api?

EDIT: My django backend doesn't support basic authentication, only session based. How would I edit my get request?

Amyth · Accepted Answer · 2016-11-23 06:39:59Z

1

You first need to know what kind of Authentication and Authorization is implemented on the server side i.e. What headers the server looks for authentication/authorization credentials in and what format is expected by the server, then send the credentials under that header key. For example if the sever checks for Authentication credentials in the Authorization header in format username::password then you need to add the headers like

headers: {'Authorization': 'johndoe::password'}

answered Nov 23, 2016 at 6:39

Amyth

33k28 gold badges97 silver badges137 bronze badges

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

1 Comment

Sneaky Toes Over a year ago

Is there a way to check what the server is asking for?

2ps · Accepted Answer · 2016-11-23 17:33:34Z

1

(1) If you are using basic authentication, you can add a basic authentication like so:

app.factory('mySamples', ['$http', function($http) {
    var credentials = btoa(username + ':' + authtoken);
    var authorization = {
        'Authorization': 'Basic ' + credentials
    };        
    return $http({method: 'GET', url: 'website/api/samples/', headers: authorization });
};

If all of your $http calls use this same auth, you can use $http.defaults.headers.common.Authorization

(2) I’m pretty sure nginx does not provide session handling—you’ll have to do that in django.

(3) I don’t typically use sessions with REST since REST is usually done stateless.

OP asked how to enable CORS. Enabling CORS is usually done on the server-side. You can do it in nginx by adding:

 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

To the appropriate location block. You can also do this on the django side with middleware pacakges like django-cors-middleware (https://pypi.python.org/pypi/django-cors-middleware) or django-cors-headers (https://pypi.python.org/pypi/django-cors-headers).

edited Nov 23, 2016 at 17:33

answered Nov 23, 2016 at 1:34

2ps

16k2 gold badges34 silver badges53 bronze badges

3 Comments

Sneaky Toes Over a year ago

I've tried above but now I'm getting an error related to cross origin referencing. I'm getting:

XMLHttpRequest cannot load https://www.thiswebsideexample/api/thing. Response for preflight has invalid HTTP status code 403

Currently I'm using the chrome exention CORS to enable CORS. Would I need to put this inside of a configuration for the application? What things would I need to change?

2ps Over a year ago

Edited my response regarding how to address the CORS issue.

Sneaky Toes Over a year ago

I figured out that our website doesn't include basic authentication, only session based authentication. Do you know of a way to access the api using session based authentication from just the angular application? At the moment I can't change the django backend settings, so I can't add a basic authentication option.

Collectives™ on Stack Overflow

Accessing Django server from AngularJs App: Easy authentication solution?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related