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

Did you ever get anywhere with this issue? I'm trying to move a project that uses allauth over to angular and this is my biggest sticking point. — Fergal Moran
– Fergal Moran, Commented Sep 10, 2014 at 21:22
@FergalMoran No, I gave up for now. I've switched to Python Social Auth + Django Rest Framework. I've used this blog post as starting point, good luck! — Leonardo
– Leonardo, Commented Sep 11, 2014 at 10:44
Thanks Leonardo, guess that's the way I'll have to go too. That blog post looks great, thanks! — Fergal Moran
– Fergal Moran, Commented Sep 11, 2014 at 11:35

gabn88 · Accepted Answer · 2014-08-29 17:12:42Z

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.

answered Aug 29, 2014 at 17:12

gabn88

8119 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Django + Angular + Django-allauth

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related