Channels ▼

Web Development

Implementing Secure Login, Part 2

The Client-Side Implementation

Moving on to the client side, there's one main file (loginPanel.html, see Listing Four) that does all the real work. Two additional small files (loginMeditiator.html, Listing Five, and loginRequestMediator.html, Listing Six) handle the inter-frame communication tasks. There's a fourth file (ajax.js) that's included in the source code distribution, that handles the actual AJAX request to the server.


Half of the loginPanel.html file (Listing Four) is UI code, which I'm not going to look at in depth. The UI is defined by a bunch of <div> elements at the end of the file, which are displayed or hidden depending on what state the system is in. The various displayXXX methods towards the middle of the file do the hiding and displaying.

The more interesting code handles cookie management and server communication. The Cookie at about line 120 handles general cookie management. It has three methods:

  1. flush(lifetime): This is the method that actually writes the cookie out to the browser's persistent store. You pass it the lifetime of the cookie in milliseconds. If the user choses "remain logged in," the lifetime is forever; otherwise it's very short (a maximum of 10 minutes). If the cookie exists at all, an automatic login is attempted when the file is loaded. The cookie contents is a bit of JSON that holds the login-session ID, the user name, and the value of the remain-logged-in flag.
    The flushCookie() method (just beneath the class definition we're looking at) is called to actually flush the cookie to the disk. When you chose to remain logged in, the cookie never expires, but it will be removed when you log out. More interesting code is the else clause, which handles the don't-remain-logged-in case:

    	loginCookie.flush( cookieLifeTime );
    	setTimeout( 'flushCookie()', cookieRenewalInterval );

    The flushCookie() method flushes the cookie to the disk with the default 10-minute lifetime. Then, a timer is created that wakes up every 5 minutes (cookieRenewalInterval). When the timer expires, it calls flushCookie() again, effectively renewing the life of the cookie for another 10 minutes. Note that this call isn't recursive. The timer calls flushCookie(), but flushCookie() doesn't call itself.
    When you navigate away from the current page, the timer ceases to exist, and the cookie just expires after 10 minutes. With no cookie, automatic login attempts will fail. If you return to the page while the cookie still exists, however, the login object will log you in automatically.
  2. load(): Loads the cookie from the disk when you load the page and transfers the fields in the JSON to local varibles where they're easier to get at.
  3. remove(): Removes the cookie. Used by logout.

The other methods of interest are the ones that make the AJAX calls (towards the end of the file). Taking doLogin() as characteristic, two methods work in concert. First, doLogin() itself, modifies the login cookie, and then makes an AJAX call to the server:

function doLogin( userName, password, remainLoggedIn )
    loginCookie.loginSessionID = "";
    loginCookie.userName = userName;
    loginCookie.remainLoggedIn = remainLoggedIn;

    AJAXRequest( 'GET', 'loginManager?action=login'
                + '&username='      + userName
                + '&password='      + password
                , '', loginCallback );

The last argument to AJAXRequest is a callback method that's executed when the server returns a value to us:

function loginCallback( json )
    eval( 'response = ' + json + ";" ) ;
    if( response.status == 'OK' )
        if( redirectURL )
   = redirectURL;
        loginCookie.loginSessionID = response.loginSessionID;
        sendLoginNotification( response.userData );
        window.alert( "We didn't recognize your user name or password (or both)." );

The callback method is passed the JSON string that the Servlet returned to us, and the eval submits this JSON to the JavaScript interpreter, effectively creating a JavaScript object referenced by the variable response. The fields from the response can then be accessed using code like response.status.

AJAXRequest() is defined in the ajax.js file that I mentioned earlier. It is available in the source code distribution.

You can download Listing Four here.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.