Django + Angular + Django-allauth

Question

I'm creating a web application using Django as the backend and Angular for the front.

Angular is running on a Yeoman stack on localhost:9000 while Django is running on localhost:8000 and I'm using grunt-contrib-proxy to redirect all the $http calls from angular at /api to the django port. So for example, if Angular asks for localhost:9000/api/hello this will be redirect to localhost:8000/api/helloand django will serve it.

I'm planning to setup Django Rest Framework for serving all the Angular request to the /api path.

So far so good.

Now, I have an already configured and working installation of Django-allauth for making Oauth authentication to third party services. It does work using plain old Django but I have no idea how to make this work in conjunction with Angular.

The only thing that came into mind was serving the allauth views through django rest framework, but what about redirection after authentication? I can't wrap my mind around it.

Is it better to drop this approach and make the Oauth authentication straight from the front (Angular)?

EDIT:
I managed to call the login view from Angular

• In grunt-contrib-proxy I've added the account context and rewrite rule:

  context:  ['/api', '/accounts'],
  rewrite: {
    '^/api': '/api',
    '^/account': '/accounts'
  }
  

• I've made an ajax call from angular, asking for the allaluth login view (for example for github): $http.get('/accounts/github/login/?process=login')

The problem is that I get back:

XMLHttpRequest cannot load https://github.com/login/oauth/authorize?scope=&state=BlaBla&redirect…ub%2Flogin%2Fcallback%2F&response_type=code&client_id=BlaBlaBla. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. (index):1

(The BlaBla was added by me). I think I'm doing something totally wrong

Answer 1

You need to add an

Origin: http://localhost:9000 

to the header in the request that angular sends to Django.

Also make sure the server running Django returns an

Access-Control-Allow-Origin: * 

see here for more information.