Richard Tier
Authenticate using Django
Rest Framework and Angular
In a previous post we went through how to authenticated using a DRF endpoint.
This post will expand on how to achieve persistent login with a one page app
using Angular. Note as there are 2 frameworks in play there will be some need to
workaround integrations problems. It doesn’t get messy, which is a testiment to
the quality of the respective frameworks!
Demo – its a silly microblog tool in which you can create an account and log into
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
it. github here
Note my folder strucure is like so:
project/
urls.py
settings.py
static/
js/
app.js
...[all third party js files]...
apps/
core/
views.py
urls.py
accounts/
urls.py
api/
views.py
serializers.py
authentication.py
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Create the Angular module
In app.js we create a module that will call the DRF endpoints in order to
authenticate:
1 angular.module('authApp', ['ngResource']).
2 config(['$httpProvider', function($httpProvider){
3 // django and angular both support csrf tokens. This tells
4 // angular which cookie to add to what header.
5 $httpProvider.defaults.xsrfCookieName = 'csrftoken';
6 $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
7 }]).
8 factory('api', function($resource){
9 function add_auth_header(data, headersGetter){
10 // as per HTTP authentication spec [1], credentials must be
11 // encoded in base64. Lets use window.btoa [2]
12 var headers = headersGetter();
13 headers['Authorization'] = ('Basic ' + btoa(data.username +
14 ':' + data.password));
15 }
16 // defining the endpoints. Note we escape url trailing dashes: Angular
17 // strips unescaped trailing slashes. Problem as Django redirects urls
18 // not ending in slashes to url that ends in slash for SEO reasons, unless
19 // we tell Django not to [3]. This is a problem as the POST data cannot
20 // be sent with the redirect. So we want Angular to not strip the slashes!
21 return {
22 auth: $resource('/api/auth\\/', {}, {
23 login: {method: 'POST', transformRequest: add_auth_header},
24 logout: {method: 'DELETE'}
25 }),
26 users: $resource('/api/users\\/', {}, {
27 create: {method: 'POST'}
28 })
29 };
30 }).
31 controller('authController', function($scope, api) {
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
31 controller('authController', function($scope, api) {
32 // Angular does not detect auto-fill or auto-complete. If the browser
33 // autofills "username", Angular will be unaware of this and think
34 // the $scope.username is blank. To workaround this we use the
35 // autofill-event polyfill [4][5]
36 $('#id_auth_form input').checkAndTriggerAutoFillEvent();
37
38 $scope.getCredentials = function(){
39 return {username: $scope.username, password: $scope.password};
40 };
41
42 $scope.login = function(){
43 api.auth.login($scope.getCredentials()).
44 $promise.
45 then(function(data){
46 // on good username and password
47 $scope.user = data.username;
48 }).
49 catch(function(data){
50 // on incorrect username and password
51 alert(data.data.detail);
52 });
53 };
54
55 $scope.logout = function(){
56 api.auth.logout(function(){
57 $scope.user = undefined;
58 });
59 };
60 $scope.register = function($event){
61 // prevent login form from firing
62 $event.preventDefault();
63 // create user and immediatly login on success
64 api.users.create($scope.getCredentials()).
65 $promise.
66 then($scope.login).
67 catch(function(data){
68 alert(data.data.username);
69 });
70 };
71 });
72
73 // [1] https://tools.ietf.org/html/rfc2617
74 // [2] https://developer.mozilla.org/en-US/docs/Web/API/Window.btoa
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
74 // [2] https://developer.mozilla.org/en-US/docs/Web/API/Window.btoa
75 // [3] https://docs.djangoproject.com/en/dev/ref/settings/#append-slash
76 // [4] https://github.com/tbosch/autofill-event
77 // [5] http://remysharp.com/2010/10/08/what-is-a-polyfill/
Create the Angular view
Django and Angular both use curly braces to denote variables. Below we want
Django to take care of defining the user (‘{{user.username}}’) based on the value
passed in the Context to the template, while Angular should take care of
everything else. We use verbatim template tag to prevent Django from stealing
Angular’s thunder. In one_page_app.html we do:
1 <html ng-cloak ng-app>
2 <head>
3 <link rel="stylesheet" href="/static/js/angular/angular-csp.css"/>
4 <link rel="stylesheet" href="/static/js/bootstrap/dist/css/bootstrap.min.css"/>
5 </head>
6 <body>
7 <div class="navbar navbar-fixed-bottom" ng-controller="authController"
8 ng-init="user='{{user.username}}'">
9 {% verbatim %}
10 <div ng-show="user" class="navbar-form navbar-right">
11 <input type="submit" class="btn btn-default" ng-click="logout()"
12 value="logout {{user}}"/>
13 </div>
14 <div ng-hide="user">
15 <form id="id_auth_form" class="navbar-form navbar-right"
16 ng-submit="login()">
17 <div class="form-group">
18 <input ng-model="username" required name="username"
19 type="text" placeholder="username" class="form-control">
20 </div>
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
20 </div>
21 <div class="form-group">
22 <input ng-model="password" required name="password" type="password"
23 placeholder="password" class="form-control">
24 </div>
25 <div class="btn-group">
26 <input type="submit" class="btn btn-default" value="login">
27 <input type="submit" class="btn btn-default" value="register"
28 ng-click="register($event)">
29 </div>
30 </form>
31 </div>
32 </div>
33 </body>
34 <script src="/static/js/jquery/jquery.js"></script>
35 <script src="/static/js/bootstrap/dist/js/bootstrap.min.js"></script>
36 <script src="/static/js/angular/angular.min.js"></script>
37 <script src="/static/js/angular-resource/angular-resource.min.js"></script>
38 <script src="/static/js/autofill-event/src/autofill-event.js"></script>
39 <script src="/static/js/app.js"></script>
40 </html>
41 {% endverbatim %}
Requirements
Bower is fantastic tool to manage front-end requirements. Lets define
bower.json like so:
1 {
2 "dependencies": {
3 "angular": "1.3.0-build.2419+sha.fe0e434",
4 "angular-resource": "1.3.0-build.2419+sha.fe0e434",
5 "autofill-event": "1.0.0",
6 "jquery": "1.8.2",
7 "bootstrap": "3.0.0",
8 }
9 }
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
DRF Endpoint
We also need to update the apps.accounts.api.AuthView created in previous post:
we need to call django.contrib.auth.login in order to attach the session id the
request object, and cause the creation a Set-Cookie header on the respons,
which causes the browser to create the defined cookie and so we will achieve
persistent login upon reloading the page:
1 from django.contrib.auth import login, logout
2
3
4 class AuthView(APIView):
5 authentication_classes = (QuietBasicAuthentication,)
6
7 def post(self, request, *args, **kwargs):
8 login(request, request.user)
9 return Response(UserSerializer(request.user).data)
10
11 def delete(self, request, *args, **kwargs):
12 logout(request)
13 return Response({})
django.contrib.auth.logout stops the session, and sends instructions to browser
to make the cookie expire.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Serving the view
We also of course need to serve the one_page_app.html, so in core.views.py we
do
1 from django.views.generic.base import TemplateView
2
3
4 class OnePageAppView(TemplateView):
5 template_name = 'one_page_app.html'
And in core.urls we route a url to the Django view:
1 from django.conf.urls import patterns, include, url
2
3 from . import views
4
5
6 urlpatterns = patterns('',
7 url(r'^$', views.OnePageAppView.as_view(), name='home'),
8 )
With this all plugged in we have a one page app that:
– Shows login form if user isn’t authenticated with their Django session cookie.
– Shows logout if user is authenticated by either session cookie or username and
password.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
– Allows logging in in a RESTful way.
– Allows creating new user and automatically logs after creation.
– Alerts login and registration errors.
– Took only about 150 lines of code to achieve.
Share this:
Twitter 7 Facebook 4 Google
Loading...
March 15, 2014 rikatee
← Check credentials using Django JSON schema validation with Django
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Rest Framework Rest Framework →
4 thoughts on “Authenticate using Django Rest
Framework and Angular”
Pingback: Check credentials using Django Rest Framework | Richard Tier ~
michael snook says:
March 15, 2014 at 5:41 am
Obviously you must call this Djangular.
Reply
rikatee says:
March 15, 2014 at 5:19 pm
Someone beat us to it
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
https://github.com/appliedsec/djangular
Reply
realpython.com says:
March 17, 2014 at 3:16 am
ok how about djugular. Authentication — straight at the neck
Leave a Reply
Enter your comment here...
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Search … Search …
Archives Archives
March 2014 March 2014
February 2014 February 2014
Categories Categories
django django
django-rest-framework django-rest-framework
JSON JSON
REST REST
testing testing
Uncategorized Uncategorized
Meta Meta
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Register Register
Log in Log in
Entries RSS Entries RSS
Comments RSS Comments RSS
WordPress.com WordPress.com
Blog at WordPress.com. ~ The Syntax Theme.
Follow
Follow “Richard
Tier”
Get every new post
delivered to your Inbox.
Enter your email address
Sign me up
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
