robert@0: robert@0: robert@0: robert@0: robert@0: AJAX Login System Demo robert@0: robert@0: robert@0: robert@0: robert@0: robert@0: robert@0: robert@0: robert@0: robert@0:

AJAX Login System Demo

robert@0: Creating a secure login system using XMLHttpRequest robert@0: robert@0:

This is an example of a login system that does not require page refreshes, but is still very secure. Valid robert@0: usernames and passwords for this demo are user1/pass1 and user2/pass2. Try these, and also incorrect passwords robert@0: to see the results.

robert@0: robert@0:

Please note that this is not a functional form, your input will not go anywhere. It is solely for demonstrating robert@0: an XMLHttpRequest login system in javascript.

robert@0: robert@0:

Advantages

robert@0:

User does not need to refresh the page to login.
User is notified instantly on incorrect username/password combination.
Overall user experience is more seamless.
Password is not sent in plain text ever (more secure than traditional system).
Javascript convenience with server-side security (uses PHP/MySQL).
Uses one-time use random seed to hash the password before sending (making interceptions useless).

robert@0: robert@0:

Disadvantages

robert@0:

System is more prone to brute force attacks. robert@0:
- Can be minimized by adding a delay after a certain number of attempts per username or per client.
User may expect a login button. robert@0:
- One could still be added without reloading the page.
Older versions of Safari cannot disable a password field.
This code uses the MD5 encryption algorithm, which has since been proven to be less secure than previously thought. If you use this code, I strongly recommend you switch to a more secure encryption algorithm, such as SHA-1. For sites were security is not crucial, MD5 should suffice.

robert@0: robert@0:

Demonstration

robert@0: robert@0:

Source

robert@0:

login.html
login.css
login_controller.js
login_presentation.js
xml_http_request.js
md5.js
login.php

robert@0: robert@0:

Questions

robert@0:

Can I copy your code?
robert@0: Sure, although I'd recommend you rewrite it as you go so you can actually learn robert@0: something useful. Also, passing someone else's code as your own is just uncool. robert@0:

robert@0:

Why didn't you use [insert technology here]?
robert@0: Basically I haven't done web development in close to a year, so I used what I knew best robert@0: (PHP/MySQL) and used the Javascript that I remembered, along with a little bit of robert@0: refreshing my memory. Perhaps I should have used object-oriented PHP or Javascript, but robert@0: this works. If it is slightly confusing, I apoligise, this is only meant as a proof-of-concept.

robert@0:

Created: 28 Jan 2005.

robert@0: