Mercurial > boosterpack

diff logintets/login.html @ 0:477258d09353 boosterpack
[svn r1] initial import
author: robert
date: Sun, 30 Aug 2009 02:19:26 -0400
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/logintets/login.html	Sun Aug 30 02:19:26 2009 -0400
     1.3 @@ -0,0 +1,96 @@
     1.4 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     1.5 +"http://www.w3.org/TR/html4/loose.dtd">
     1.6 +<html>
     1.7 +<head>
     1.8 +<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     1.9 +<title>AJAX Login System Demo</title>
    1.10 +<script src="md5.js" type="text/javascript">
    1.11 +// javascript md5 encoder originated from <http://pajhome.org.uk/crypt/md5/>
    1.12 +// used under license as outlined at <http://pajhome.org.uk/site/legal.html>
    1.13 +// Copyright (c) 1998 - 2002, Paul Johnston & Contributors
    1.14 +// All rights reserved.
    1.15 +</script>
    1.16 +<script src="xml_http_request.js" type="text/javascript">
    1.17 +// xml http request script modified slightly from that found at
    1.18 +// <http://www.webpasties.com/xmlHttpRequest/index.html>, which is
    1.19 +// Copyright 2005 Bill Bercik.
    1.20 +</script>
    1.21 +<script src="login_controller.js" type="text/javascript"></script>
    1.22 +<script src="login_presentation.js" type="text/javascript"></script>
    1.23 +<link rel="stylesheet" href="login.css" type="text/css" />
    1.24 +</head>
    1.25 +
    1.26 +<body>
    1.27 +
    1.28 +<h1>AJAX Login System Demo</h1>
    1.29 +<strong>Creating a secure login system using XMLHttpRequest</strong>
    1.30 +
    1.31 +<p>This is an example of a login system that does not require page refreshes, but is still very secure.  Valid
    1.32 +usernames and passwords for this demo are user1/pass1 and user2/pass2.  Try these, and also incorrect passwords
    1.33 +to see the results.</p>
    1.34 +
    1.35 +<p>Please note that this is not a functional form, your input will not go anywhere.  It is solely for demonstrating
    1.36 +an XMLHttpRequest login system in javascript.</p>
    1.37 +
    1.38 +<h2>Advantages</h2>
    1.39 +<ul>
    1.40 +<li>User does not need to refresh the page to login.</li>
    1.41 +<li>User is notified <em>instantly</em> on incorrect username/password combination.</li>
    1.42 +<li>Overall user experience is more seamless.</li>
    1.43 +<li>Password is not sent in plain text <em>ever</em> (more secure than traditional system).</li>
    1.44 +<li>Javascript convenience with server-side security (uses PHP/MySQL).</li>
    1.45 +<li>Uses one-time use random seed to hash the password before sending (making interceptions useless).</li>
    1.46 +</ul>
    1.47 +
    1.48 +<h2>Disadvantages</h2>
    1.49 +<ul>
    1.50 +<li>System is more prone to brute force attacks.
    1.51 +<ul><li>Can be minimized by adding a delay after a certain number of attempts per username or per client.</li></ul></li>
    1.52 +<li>User may expect a login button.
    1.53 +<ul><li>One could still be added without reloading the page.</li></ul></li>
    1.54 +<li>Older versions of Safari cannot disable a password field.</li>
    1.55 +<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>
    1.56 +</ul>
    1.57 +
    1.58 +<h2>Demonstration</h2>
    1.59 +
    1.60 +<div id="post_comment">
    1.61 +<form action="post" onSubmit="return false">
    1.62 +<div id="login" class="login">
    1.63 +<label for="username">Username: </label>
    1.64 +<input type="text" name="username" id="username" size=20>
    1.65 +<label for="password">Password: </label>
    1.66 +<input type="password" name="password" id="password" size=20>
    1.67 +<p id="message">Enter your username and password to log in.</p>
    1.68 +</div>
    1.69 +<label for="comments">Comments:</label>
    1.70 +<textarea rows="6" cols="80" id="comments"></textarea>
    1.71 +</form>
    1.72 +</div>
    1.73 +
    1.74 +<h2>Source</h2>
    1.75 +<ul>
    1.76 +<li><a href="login.html">login.html</a></li>
    1.77 +<li><a href="login.css">login.css</a></li>
    1.78 +<li><a href="login_controller.js">login_controller.js</a></li>
    1.79 +<li><a href="login_presentation.js">login_presentation.js</a></li>
    1.80 +<li><a href="xml_http_request.js">xml_http_request.js</a></li>
    1.81 +<li><a href="md5.js">md5.js</a></li>
    1.82 +<li><a href="login.phps">login.php</a></li>
    1.83 +</ul>
    1.84 +
    1.85 +<h2>Questions</h2>
    1.86 +<p><strong>Can I copy your code?</strong><br>
    1.87 +Sure, although I'd recommend you rewrite it as you go so you can actually learn
    1.88 +something useful.  Also, passing someone else's code as your own is just uncool.
    1.89 +</p>
    1.90 +<p><strong>Why didn't you use [insert technology here]?</strong><br>
    1.91 +Basically I haven't done web development in close to a year, so I used what I knew best
    1.92 +(PHP/MySQL) and used the Javascript that I remembered, along with a little bit of
    1.93 +refreshing my memory.  Perhaps I should have used object-oriented PHP or Javascript, but
    1.94 +this works.  If it is slightly confusing, I apoligise, this is only meant as a proof-of-concept.</p>
    1.95 +<hr>
    1.96 +<p>Created: 28 Jan 2005.</p>
    1.97 +<p>Last updated: 1 Dec 2005.  Copyright &copy; 2005.
    1.98 +</body>
    1.99 +</html>
author	robert
date	Sun, 30 Aug 2009 02:19:26 -0400
parents
children