Ajax Login System Using Xmlhttprequest

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

In a nutshell, ajax encompasses the idea of using XMLHttpRequest objects in javascript to avoid needlessly refreshing a web page. Famous uses 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 could handle, let alone pure page refreshes. The Internet is finally truly going stateless, and the challenge posed now by the adaptive path article 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't sure was possible: creating a fully secure "ajax"-powered login system, ideal for blogs, forums, and other similar sites. I had a barebones secure case working within a few hours, and a few more hours gave the final result that I will share today.

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

So in essence the system does exactly what you just saw, and exactly what I described. While I will not go through the code, I'll briefly go over 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) for the transaction that will be used only for the current transaction, and once the transaction is complete, the seed is useless. (Note this means that if data is intercepted, it cannot be reconstructed to log in the user that was intercepted.)
3. Once you enter a username and password, the server md5 hashes your password, and then md5 hashes that hash with the seed, and sends thi to the server for authentication (along with your username and the id of the transaction).
4. The server compares the hash it recieved with the hash of the password hash stored in the database concatenated with the seed for the transaction 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 in reality they have little to do with the problem. When I moved from my barebones ugly example to the somewhat more aesthetically pleasing one that I've linked to today, I didn't change any of the backend, nor the login_controller.js file. In designing the system this way, it can be applied 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 for older browsers, however it would be very simple to modify it such that it degrades gracefully.

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

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

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