AJAX Login System using XMLHttpRequest

The idea of Asyncronous Javascript and XML (Ajax) has been around indifferent forms for some time now, but only recently is truly takingoff. If you aren't familiar with what I'm talking about, feel free toperuse Adaptive Path's recent article on ajax, but it is not required reading.

In a nutshell, ajax encompasses the idea of using XMLHttpRequestobjects in javascript to avoid needlessly refreshing a web page. Famoususes of it are Google Suggest and Google Maps,as well as many other non-Google websites that I cannot recall offhand.Possibilities are growing that go beyond what an iframe and DHTML couldhandle, let alone pure page refreshes. The Internet is finally trulygoing stateless, and the challenge posed now by the adaptive patharticle is as follows: to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities.

In that regard, I started a project on the weekend that I wasn'tsure was possible: creating a fully secure "ajax"-powered login system,ideal for blogs, forums, and other similar sites. I had a barebonessecure case working within a few hours, and a few more hours gave thefinal result that I will share today.

Before we go on, I suggest you check out the demonstration of the login systemtrying out the username and password combinations "user1 / pass1" and"user2 / pass2". Once you get a grasp for what is going on, we'llcontinue.

So in essence the system does exactly what you just saw, and exactlywhat I described. While I will not go through the code, I'll briefly goover how the system as a whole works:

1. You signal that you intend to log in by focussing on the username or password text box on the page.
2. The server then obtains a random number ("seed" in the code) forthe transaction that will be used only for the current transaction, andonce the transaction is complete, the seed is useless. (Note this meansthat if data is intercepted, it cannot be reconstructed to log in theuser that was intercepted.)
3. Once you enter a username and password, the server md5 hashes yourpassword, and then md5 hashes that hash with the seed, and sends thi tothe server for authentication (along with your username and the id ofthe transaction).
4. The server compares the hash it recieved with the hash of thepassword hash stored in the database concatenated with the seed for thetransaction given by the id from the client.
5. If these two hashes match, the user is logged in. Otherwise, the appropriate error message is sent back to the client.

Notice how I haven't discussed the presentation issues, as inreality they have little to do with the problem. When I moved from mybarebones ugly example to the somewhat more aesthetically pleasing onethat I've linked to today, I didn't change any of the backend, nor thelogin_controller.js file. In designing the system this way, it can beapplied to any number of applications, such as a blog comment, a forum,etc.

Also notice that this is seemingly more secure than a traditional login system since the password is never transmitted in plain text.

In the example I have given, I didn't provide any allowances forolder browsers, however it would be very simple to modify it such thatit degrades gracefully.

Finally, I didn't actually use XML anywhere in my implementation. Itsimply wasn't necessary, plain text served just as well. In morecomplicated situations XML might be the answer, but don'tover-complicate the problem.

It is my hope that this application of ajax and XMLHttpRequest getsyour creativity going for more applications of the technology, andmakes you more aware of just how cool it can be.

The last line of the Adaptive Path article I referenced to at thebeginning of this article says "It's going to be fun." So far it's beengreat fun for me, and I trust it will be for you too.

From: evolt.org