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!

For a demo check out this a silly microblog tool I made where you can create an account and log into it: github

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

Create the Angular module

In app.js we create a module that will call the DRF endpoints in order to authenticate:

angular.module('authApp', ['ngResource']). config(['$httpProvider', function($httpProvider){ // django and angular both support csrf tokens. This tells // angular which cookie to add to what header. $httpProvider.defaults.xsrfCookieName = 'csrftoken'; $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; }]). factory('api', function($resource){ function add_auth_header(data, headersGetter){ // as per HTTP authentication spec [1], credentials must be // encoded in base64. Lets use window.btoa [2] var headers = headersGetter(); headers['Authorization'] = ('Basic ' + btoa(data.username + ':' + data.password)); } // defining the endpoints. Note we escape url trailing dashes: Angular // strips unescaped trailing slashes. Problem as Django redirects urls // not ending in slashes to url that ends in slash for SEO reasons, unless // we tell Django not to [3]. This is a problem as the POST data cannot // be sent with the redirect. So we want Angular to not strip the slashes! return { auth: $resource('/api/auth\\/', {}, { login: {method: 'POST', transformRequest: add_auth_header}, logout: {method: 'DELETE'} }), users: $resource('/api/users\\/', {}, { create: {method: 'POST'} }) }; }). controller('authController', function($scope, api) { // Angular does not detect auto-fill or auto-complete. If the browser // autofills "username", Angular will be unaware of this and think // the $scope.username is blank. To workaround this we use the // autofill-event polyfill [4][5] $('#id_auth_form input').checkAndTriggerAutoFillEvent(); $scope.getCredentials = function(){ return {username: $scope.username, password: $scope.password}; }; $scope.login = function(){ api.auth.login($scope.getCredentials()). $promise. then(function(data){ // on good username and password $scope.user = data.username; }). catch(function(data){ // on incorrect username and password alert(data.data.detail); }); }; $scope.logout = function(){ api.auth.logout(function(){ $scope.user = undefined; }); }; $scope.register = function($event){ // prevent login form from firing $event.preventDefault(); // create user and immediatly login on success api.users.create($scope.getCredentials()). $promise. then($scope.login). catch(function(data){ alert(data.data.username); }); }; }); // [1] https://tools.ietf.org/html/rfc2617 // [2] https://developer.mozilla.org/en-US/docs/Web/API/Window.btoa // [3] https://docs.djangoproject.com/en/dev/ref/settings/#append-slash // [4] https://github.com/tbosch/autofill-event // [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:

<html ng-cloak ng-app> <head> <link rel="stylesheet" href="/static/js/angular/angular-csp.css"/> <link rel="stylesheet" href="/static/js/bootstrap/dist/css/bootstrap.min.css"/> </head> <body> <div class="navbar navbar-fixed-bottom" ng-controller="authController" ng-init="user='{{user.username}}'"> {% verbatim %} <div ng-show="user" class="navbar-form navbar-right"> <input type="submit" class="btn btn-default" ng-click="logout()" value="logout {{user}}"/> </div> <div ng-hide="user"> <form id="id_auth_form" class="navbar-form navbar-right" ng-submit="login()"> <div class="form-group"> <input ng-model="username" required name="username" type="text" placeholder="username" class="form-control"> </div> <div class="form-group"> <input ng-model="password" required name="password" type="password" placeholder="password" class="form-control"> </div> <div class="btn-group"> <input type="submit" class="btn btn-default" value="login"> <input type="submit" class="btn btn-default" value="register" ng-click="register($event)"> </div> </form> </div> </div> </body> <script src="/static/js/jquery/jquery.js"></script> <script src="/static/js/bootstrap/dist/js/bootstrap.min.js"></script> <script src="/static/js/angular/angular.min.js"></script> <script src="/static/js/angular-resource/angular-resource.min.js"></script> <script src="/static/js/autofill-event/src/autofill-event.js"></script> <script src="/static/js/app.js"></script> </html> {% endverbatim %}

Requirements

Bower is fantastic tool to manage front-end requirements. Lets define bower.json like so:

{ "dependencies": { "angular": "1.3.0-build.2419+sha.fe0e434", "angular-resource": "1.3.0-build.2419+sha.fe0e434", "autofill-event": "1.0.0", "jquery": "1.8.2", "bootstrap": "3.0.0", } }

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:

from django.contrib.auth import login, logout class AuthView(APIView): authentication_classes = (QuietBasicAuthentication,) def post(self, request, *args, **kwargs): login(request, request.user) return Response(UserSerializer(request.user).data) def delete(self, request, *args, **kwargs): logout(request) return Response({})

django.contrib.auth.logout stops the session, and sends instructions to browser to make the cookie expire.

Serving the view

We also of course need to serve the one_page_app.html, so in core.views.py we do

from django.views.generic.base import TemplateView class OnePageAppView(TemplateView): template_name = 'one_page_app.html'

And in core.urls we route a url to the Django view:

from django.conf.urls import patterns, include, url from . import views urlpatterns = patterns('', url(r'^$', views.OnePageAppView.as_view(), name='home'), )

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.

– 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.