Example app showing how to use Django for authentication of an Angular app.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
apps
static
.gitignore
README.md

README.md

django-angular-auth

This is based on HTTP Auth Interceptor Module Demo and uses Tastypie to provide the JSON API for the AngularJS front-end.

Django is used to provide the API and for its admin.

Setup

It's assumed you have Python and Postgres already installed.

  • Clone django-angular-auth locally.
  • Create a VirtualEnv and install the requirements via pip install -r requirements.txt
  • Create a database in Postgres. Whatever database settings used needs to be added to apps/ch/settings.py ~ line 12. You could also make a settings_local file using your machine name and put that in settings_local/MACHINE_NAME.py
  • Run python manage.py syncdb --migrate
  • Go into static directory and run python -m SimpleHTTPServer. You should create a serve.bat file for this. This is the Angular app.
  • Start Django. python managae runserver 0.0.0.0:8001 I created a batch file for this called r.bat. This is your API and admin.
  • Go to http://localhost:8000/. This is the Angular app. It's being served directly via SimpleHTTPServer. It can be served from anywhere, even Amazon. There might be cross domain issues if you're hosting on a different domain.

Use it

Now we have the admin and front-end client both running. Let's test.

  • With your browser pointed to http://localhost:8000/, enter some data in the field and click "submit". You will get a login prompt.
  • Login.

You will get a "missing key" error message. This is because your user does not have API access. To add access, go to http://localhost:8001/admin/tastypie/apikey/add/ and add a key. Any key will do. You can have this key added automatically for new users by uncommenting out the signal at the bottom of myproperty/models.py.

Go back and try to login again. This time, your login worked! Find your just added data at http://localhost:8001/admin/myproperty/paymenttype/.

What's Happening

If you take a look at js/controllers.js, you'll find the ContentController. When you submit the form, it's trying to post to [http://localhost:8001/api/myproperty/paymenttype/]. However, it gets a 401 status code back because you're not logged in.

Tastypie is requiring authentication for this resource in ch/api.py by using the ApiKeyAuthentication class in PaymentTypeResource.

This TastyPie class looks for the API key in the GET/POST or header. We are using headers. On login, we set the header within Angular.js. See js/controllers.js ~ line 27

$http.defaults.headers.common['Authorization'] = 'ApiKey ' + data.username + ':' + data.key;

Because Django returns a status code 401, Angular intercepts this (lib/http-auth-interceptor.js ~line 61) and instead displays the login screen. Once you have a valid API key, it replays your API call and continues where it left off.

Future

This is a very basic demo. I hope it helps shortcut getting you started with AngularJS and Django. You might want to add additional checking in your TastyPie authentication so that the API key expires after a certain amount of time, or even if the IP changes.

License

MIT

Version

0.1