How to read the Play session from AngularJS

If you happen to work, like me, on a project that makes use of both the Play framework and AngularJS, you may at some point need to read some data from the Play session in your AngularJS application. Play uses a client-side session, which makes sharing the data with client-side applications easy.

In order to access the session data on the client-side, you’ll need the following:

1. Allow the Play session to be read by javascript

2. Enable the $cookies service in AngularJS

You’ll need to use the ngCookies module (provided by angular-cookies.js – make sure you have loaded this file):

3. Decypher the cookie data

The code above makes use of underscore.js, if you don’t use it yet, I can only recommend using it.

That’s it! You now can make the session data available throughout your Angular application, for example by providing a service:

Liked this article? Subscribe to the mailing list to get regular updates on similar topics.

7 Comments

Marius says:

2 August 2013 at 7:22 am

Is there a reason you prefer _.each over angular.forEach?

And when you use the Play session cookie, doesn’t this make you vulnerable to CRSF attacks?

Reply
- Manuel says:
  
  2 August 2013 at 6:46 pm
  
  Good point about CSRF, of course you should use appropriate mechanisms (token generation) – but that holds also true if the cookie is not exposed to javascript, does it not? About _.each against angular.forEach, there’s no particular reason I prefer it other than it being very short (_) and having already made use of underscore.js in the project (so I didn’t need to add it as an extra dependency).
  
  Reply
Phu says:

2 August 2013 at 7:49 pm

We just create a different cookie and set the session id to the cookie’s values, this way the session cookie is still httpOnly and no need for parsing; later you can stamp the new cookie with something other than session id.

Reply
Marius says:

3 August 2013 at 10:15 pm

Small tip, use a cookie called XSRF formyour token, it makes the whole authorization stuff easier, because Angular picks it up automatically.

Reply
- justcofe says:
  
  20 April 2015 at 6:49 am
  
  MariusU do hv example for XSRF ?
  
  Reply
avraham hamu says:

15 June 2015 at 7:46 am

just what i needed – thanks

Reply

Hi… how are you?
Good job about your post.

But, let me ask you somthing.
What could happen if this approach doesn’t work? The console about the cookie is empty – but if I look the cookie on network call, it is there.

my application.conf


Allow the session cookie to be accessed from JavaScript libraries
session.httpOnly=false
my service

define([

"angular",

"angular-cookies",

"app-services",

"app-sessao",

"gumga-class"

],

function(angular, ngCookies, services, sessao, clazz) {

"use strict";





var Service = function($cookies) {
  this.cookies = $cookies;
}

clazz.create({
  constructor : Service,
  prototype : {

    session: function() {
      console.log("this.cookies", this.cookies);
      var rawCookie = this.cookies['PLAY_SESSION'];
      var rawData = rawCookie.substring(rawCookie.indexOf('-') + 1, rawCookie.length -1);
      var session = {};
      angular.forEach(rawData.split("&"), function(rawPair) {
        var pair = rawPair.split('=');
        session[pair[0]] = pair[1];
      });
      return session;
    }
  }
});

services.service("sessaoService", [
  Service
]);





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var Service = function($cookies) {
  this.cookies = $cookies;
}
 
clazz.create({
  constructor : Service,
  prototype : {
 
    session: function() {
      console.log("this.cookies", this.cookies);
      var rawCookie = this.cookies['PLAY_SESSION'];
      var rawData = rawCookie.substring(rawCookie.indexOf('-') + 1, rawCookie.length -1);
      var session = {};
      angular.forEach(rawData.split("&"), function(rawPair) {
        var pair = rawPair.split('=');
        session[pair[0]] = pair[1];
      });
      return session;
    }
  }
});
 
services.service("sessaoService", [
  Service
]);
 






});

manuel bernhardt

How to read the Play session from AngularJS

1. Allow the Play session to be read by javascript

2. Enable the $cookies service in AngularJS

3. Decypher the cookie data

7 Comments

Leave a Reply

Read my book

Featured Articles

Upcoming Talks

Upcoming Trainings