Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

EWD 3 Training Course Part 10: QEWD Sessions and User Authentication

644 views

Published on

This presentation is Part 10 of the EWD 3 Training Course. It explains the relationship between QEWD Sessions and User Authentication in a QEWD application, and how to control and manage User Authentication in your applications.

Published in: Software
  • Be the first to comment

  • Be the first to like this

EWD 3 Training Course Part 10: QEWD Sessions and User Authentication

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. Copyright © 2016 M/Gateway Developments Ltd Try it out
  15. 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. 16. Copyright © 2016 M/Gateway Developments Ltd Try it out
  17. 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. 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();

×