|
rlm@0
|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
rlm@0
|
2 "http://www.w3.org/TR/html4/loose.dtd">
|
|
rlm@0
|
3 <html>
|
|
rlm@0
|
4 <head>
|
|
rlm@0
|
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
rlm@0
|
6 <title>AJAX Login System Demo</title>
|
|
rlm@0
|
7 <script src="md5.js" type="text/javascript">
|
|
rlm@0
|
8 // javascript md5 encoder originated from <http://pajhome.org.uk/crypt/md5/>
|
|
rlm@0
|
9 // used under license as outlined at <http://pajhome.org.uk/site/legal.html>
|
|
rlm@0
|
10 // Copyright (c) 1998 - 2002, Paul Johnston & Contributors
|
|
rlm@0
|
11 // All rights reserved.
|
|
rlm@0
|
12 </script>
|
|
rlm@0
|
13 <script src="xml_http_request.js" type="text/javascript">
|
|
rlm@0
|
14 // xml http request script modified slightly from that found at
|
|
rlm@0
|
15 // <http://www.webpasties.com/xmlHttpRequest/index.html>, which is
|
|
rlm@0
|
16 // Copyright 2005 Bill Bercik.
|
|
rlm@0
|
17 </script>
|
|
rlm@0
|
18 <script src="login_controller.js" type="text/javascript"></script>
|
|
rlm@0
|
19 <script src="login_presentation.js" type="text/javascript"></script>
|
|
rlm@0
|
20 <link rel="stylesheet" href="login.css" type="text/css" />
|
|
rlm@0
|
21 </head>
|
|
rlm@0
|
22
|
|
rlm@0
|
23 <body>
|
|
rlm@0
|
24
|
|
rlm@0
|
25 <h1>AJAX Login System Demo</h1>
|
|
rlm@0
|
26 <strong>Creating a secure login system using XMLHttpRequest</strong>
|
|
rlm@0
|
27
|
|
rlm@0
|
28 <p>This is an example of a login system that does not require page refreshes, but is still very secure. Valid
|
|
rlm@0
|
29 usernames and passwords for this demo are user1/pass1 and user2/pass2. Try these, and also incorrect passwords
|
|
rlm@0
|
30 to see the results.</p>
|
|
rlm@0
|
31
|
|
rlm@0
|
32 <p>Please note that this is not a functional form, your input will not go anywhere. It is solely for demonstrating
|
|
rlm@0
|
33 an XMLHttpRequest login system in javascript.</p>
|
|
rlm@0
|
34
|
|
rlm@0
|
35 <h2>Advantages</h2>
|
|
rlm@0
|
36 <ul>
|
|
rlm@0
|
37 <li>User does not need to refresh the page to login.</li>
|
|
rlm@0
|
38 <li>User is notified <em>instantly</em> on incorrect username/password combination.</li>
|
|
rlm@0
|
39 <li>Overall user experience is more seamless.</li>
|
|
rlm@0
|
40 <li>Password is not sent in plain text <em>ever</em> (more secure than traditional system).</li>
|
|
rlm@0
|
41 <li>Javascript convenience with server-side security (uses PHP/MySQL).</li>
|
|
rlm@0
|
42 <li>Uses one-time use random seed to hash the password before sending (making interceptions useless).</li>
|
|
rlm@0
|
43 </ul>
|
|
rlm@0
|
44
|
|
rlm@0
|
45 <h2>Disadvantages</h2>
|
|
rlm@0
|
46 <ul>
|
|
rlm@0
|
47 <li>System is more prone to brute force attacks.
|
|
rlm@0
|
48 <ul><li>Can be minimized by adding a delay after a certain number of attempts per username or per client.</li></ul></li>
|
|
rlm@0
|
49 <li>User may expect a login button.
|
|
rlm@0
|
50 <ul><li>One could still be added without reloading the page.</li></ul></li>
|
|
rlm@0
|
51 <li>Older versions of Safari cannot disable a password field.</li>
|
|
rlm@0
|
52 <li><strong>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.</strong> For sites were security is not crucial, MD5 should suffice.</li>
|
|
rlm@0
|
53 </ul>
|
|
rlm@0
|
54
|
|
rlm@0
|
55 <h2>Demonstration</h2>
|
|
rlm@0
|
56
|
|
rlm@0
|
57 <div id="post_comment">
|
|
rlm@0
|
58 <form action="post" onSubmit="return false">
|
|
rlm@0
|
59 <div id="login" class="login">
|
|
rlm@0
|
60 <label for="username">Username: </label>
|
|
rlm@0
|
61 <input type="text" name="username" id="username" size=20>
|
|
rlm@0
|
62 <label for="password">Password: </label>
|
|
rlm@0
|
63 <input type="password" name="password" id="password" size=20>
|
|
rlm@0
|
64 <p id="message">Enter your username and password to log in.</p>
|
|
rlm@0
|
65 </div>
|
|
rlm@0
|
66 <label for="comments">Comments:</label>
|
|
rlm@0
|
67 <textarea rows="6" cols="80" id="comments"></textarea>
|
|
rlm@0
|
68 </form>
|
|
rlm@0
|
69 </div>
|
|
rlm@0
|
70
|
|
rlm@0
|
71 <h2>Source</h2>
|
|
rlm@0
|
72 <ul>
|
|
rlm@0
|
73 <li><a href="login.html">login.html</a></li>
|
|
rlm@0
|
74 <li><a href="login.css">login.css</a></li>
|
|
rlm@0
|
75 <li><a href="login_controller.js">login_controller.js</a></li>
|
|
rlm@0
|
76 <li><a href="login_presentation.js">login_presentation.js</a></li>
|
|
rlm@0
|
77 <li><a href="xml_http_request.js">xml_http_request.js</a></li>
|
|
rlm@0
|
78 <li><a href="md5.js">md5.js</a></li>
|
|
rlm@0
|
79 <li><a href="login.phps">login.php</a></li>
|
|
rlm@0
|
80 </ul>
|
|
rlm@0
|
81
|
|
rlm@0
|
82 <h2>Questions</h2>
|
|
rlm@0
|
83 <p><strong>Can I copy your code?</strong><br>
|
|
rlm@0
|
84 Sure, although I'd recommend you rewrite it as you go so you can actually learn
|
|
rlm@0
|
85 something useful. Also, passing someone else's code as your own is just uncool.
|
|
rlm@0
|
86 </p>
|
|
rlm@0
|
87 <p><strong>Why didn't you use [insert technology here]?</strong><br>
|
|
rlm@0
|
88 Basically I haven't done web development in close to a year, so I used what I knew best
|
|
rlm@0
|
89 (PHP/MySQL) and used the Javascript that I remembered, along with a little bit of
|
|
rlm@0
|
90 refreshing my memory. Perhaps I should have used object-oriented PHP or Javascript, but
|
|
rlm@0
|
91 this works. If it is slightly confusing, I apoligise, this is only meant as a proof-of-concept.</p>
|
|
rlm@0
|
92 <hr>
|
|
rlm@0
|
93 <p>Created: 28 Jan 2005.</p>
|
|
rlm@0
|
94 <p>Last updated: 1 Dec 2005. Copyright © 2005.
|
|
rlm@0
|
95 </body>
|
|
rlm@0
|
96 </html>
|
