1.
Copyright © 2016 M/Gateway Developments Ltd
EWD 3 Training Course
Part 10
QEWD Sessions and User
Authentication
Rob Tweed
Director, M/Gateway Developments Ltd
Twitter: @rtweed

2.
Copyright © 2016 M/Gateway Developments Ltd
Sessions and User Authentication
• These are two separate things:
– Application registration creates a Session
• Tied to the browser / client
• Not specifically the user
– Association of the Session with an actual user
/ person involves a process of authentication
• Usually initiated by a username/password
challenge

3.
Copyright © 2016 M/Gateway Developments Ltd
User Authentication
• In an interactive application, you'll have a
login form + Login button
• Clicking the Login button should trigger the
sending of a message that picks up the
username and password form field values

4.
Copyright © 2016 M/Gateway Developments Ltd
User Authentication
var messageObj = {
type: 'login',
params: {
username: $('#username').val(),
password: $('#password').val()
}
};
EWD.send(messageObj, function(responseObj) {
// either the user has provided valid credentials or not
// so do whatever is appropriate in both situations
});

5.
Copyright © 2016 M/Gateway Developments Ltd
User Authentication
• In back-end handler
login: function(messageObj, session, send, finished) {
var username = messageObj.params.username;
if (username === '') {
finished({error: 'You must enter a username');
return;
}
var password = messageObj.params.password;
if (password === '') {
finished({error: 'You must enter a password');
return;
}
// Validate username and password against authentication database records
var status = checkLogin(username, password); // however this works
if (status.ok) {
finished({ok: true});
}
else {
finished({error: status.error}); // return an error message string giving the reason for failed login
}
}

6.
Copyright © 2016 M/Gateway Developments Ltd
User Authentication
• We'll look at handling error responses in
the browser later
• For now, let's assume a successful login
has been achieved at the back-end:
– In the browser we'll want to modify the UI, eg:
• Remove the login form
• Bring up the user landing page & main menu

7.
Copyright © 2016 M/Gateway Developments Ltd
User Authentication
• User can now send messages to interact
with back-end information
– Potentially constrained by their profile / role
• But what's to stop a malicious user trying
to send those messages in the JavaScript
console before logging in?
– Technically nothing

8.
Copyright © 2016 M/Gateway Developments Ltd
User Authentication
• User can now send messages to interact
with back-end information
– Potentially constrained by their profile / role
• But what's to stop a malicious user trying
to send those messages in the JavaScript
console before logging in?
– Technically nothing
– So this is the purpose of authentication
• Special Session boolean property: authenticated

9.
Copyright © 2016 M/Gateway Developments Ltd
User Authentication
• In back-end handler
login: function(messageObj, session, send, finished) {
var username = messageObj.params.username;
if (username === '') {
finished({error: 'You must enter a username');
return;
}
var password = messageObj.params.password;
if (password === '') {
finished({error: 'You must enter a password');
return;
}
// Validate username and password against authentication database records
var status = checkLogin(username, password); // however this works
if (status.ok) {
session.authenticated = true;
finished({ok: true});
}
else {
finished({error: status.error}); // return an error message string giving the reason for failed login
}
}

10.
Copyright © 2016 M/Gateway Developments Ltd
User Authentication
• All other back-end handlers
someType: function(messageObj, session, send, finished) {
if (!session.authenticated) {
finished({error: 'You do not have access to this message type'});
return;
}
// handle the message for authenticated users only….
}

11.
Copyright © 2016 M/Gateway Developments Ltd
User Authentication
• All other back-end handlers
someType: function(messageObj, session, send, finished) {
if (!session.authenticated) {
finished({error: 'You do not have access to this message type'});
return;
}
// handle the message for authenticated users only….
}
Your back-end methods are now protected
from hacking prior to user login

12.
Copyright © 2016 M/Gateway Developments Ltd
User Authentication
• Good idea to also prevent re-authentication
login: function(messageObj, session, send, finished) {
if (session.authenticated) {
finished({error: 'You are already logged in!'});
return;
}
var username = messageObj.params.username;
if (username === '') {
finished({error: 'You must enter a username');
return;
}
var password = messageObj.params.password;
if (password === '') {
finished({error: 'You must enter a password');
return;
}
// Validate username and password against authentication database records
var status = checkLogin(username, password); // however this works
if (status.ok) {
session.authenticated = true;
finished({ok: true});
}
else {
finished({error: status.error}); // return an error message string giving the reason for failed login
}
}

13.
Copyright © 2016 M/Gateway Developments Ltd
Logging Out
• Often no need
– If user stops using the application for long
enough, the QEWD Session will expire
• Error message returned
• WebSocket will be disconnected
• Can add handler for socket disconnection
– ewd-session will eventually and automatically
clear down the QEWD Session global storage
for the user

14.
Copyright © 2016 M/Gateway Developments Ltd
Try it out

15.
Copyright © 2016 M/Gateway Developments Ltd
Edit app.js
$(document).ready(function() {
EWD.log = true;
EWD.on('ewd-registered', function() {
EWD.on('intermediate', function(responseObj) {
$('#content').text(responseObj.message.date);
});
EWD.on('socketDisconnected', function() {
$('#content').text('You have been logged out');
$('#testBtn').hide();
});
$('#testBtn').on('click', function(e) {
var message = {type: 'testButton'};
EWD.send(message, function(messageObj) {
$('#content').append('<br /> ' + messageObj.message.ok);
});
});
});
EWD.start('demo1', $, io);
});
Add a socket disconnected handler

16.
Copyright © 2016 M/Gateway Developments Ltd
Try it out

17.
Copyright © 2016 M/Gateway Developments Ltd
Restart with a clean new session
$(document).ready(function() {
EWD.log = true;
EWD.on('ewd-registered', function() {
EWD.on('intermediate', function(responseObj) {
$('#content').text(responseObj.message.date);
});
EWD.on('socketDisconnected', function() {
$('#content').text('You have been logged out');
$('#testBtn').hide();
setTimeout(function() {
location.reload();
}, 1000);
});
$('#testBtn').on('click', function(e) {
var message = {type: 'testButton'};
EWD.send(message, function(messageObj) {
$('#content').append('<br /> ' + messageObj.message.ok);
});
});
});
EWD.start('demo1', $, io);
});

18.
Copyright © 2016 M/Gateway Developments Ltd
Manually disconnect the socket
• If you want an explicit logout:
– Simplest approach is to disconnect the
WebSocket connection:
• In app.js
• This will also trigger the socketDisconnected Event
EWD.disconnectSocket();