Building a CHAP Login System: Coding Server-Side Random Seeds - Stepping back: a quick look at the previous CHAP login system
(Page 2 of 4 )
In order to see how client authentication is carried out, let’s step back for a while to the CHAP login system developed in the first part of the series. In addition to refreshing previously deployed concepts, it will be useful for retaking the development flow and building an improved login mechanism.
Therefore, I’ll show the list of the whole CHAP script, including both server and client sections. Before you start reading the source code, a short note is in order here: for the sake of brevity, the JavaScript MD5 library has been moved to an external .js file, so the code is easier to read. In case you’re interested in seeing how it looks, please visit my previous article, where the MD5 library was properly listed.
Having clarified that, here is the pertinent example:
<?php
/*
* Begin of server-side processing
*/
// start or resume a session
session_start();
// store random value in session variable
$_SESSION['challenge']=md5(rand(1,100000));
/*
* End of server-side processing
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CHAP LOGIN SYSTEM EXAMPLE</title>
<script language="javascript" src="md5.js"></script>
<script language="javascript">
/*
* verify form values &
* implement the Challenge Handshaking Authentication Protocol
*/
function doCHAP(){
// get 'userid' field
var usrid=document.getElementById('userid');
if(!usrid){return};
if(!usrid.value){showError(usrid,'Enter your ID');return false};
// get 'password' field
var psw=document.getElementById('passwd');
if(!psw){return};
if(!psw.value){showError(psw,'Enter your password');return false};
// get 'challenge' field
var chlng=document.getElementById('challenge');
if(!chlng){return};
// make MD5 hash of password and concatenate challenge value
// next calculate MD5 hash of combined values
chlng.value=MD5(MD5(psw.value)+'<?php echo $_SESSION
['challenge']?>');
// clear password field
psw.value='';
return true;
}
/*
* display error messages
*/
function showError(obj,message){
alert(message);
obj.focus();
}
/*
* execute 'doCHAP()' function when page is loaded
*/
window.onload=function(){
var W3CDOM=document.getElementById&&document.
getElementsByTagName&&document.createElement;
// check if browser is W3CDOM compatible
if(W3CDOM){
document.getElementsByTagName('form')[0].onsubmit=function(){
return doCHAP();
}
}
}
</script>
</head>
<body>
<!-- login form -->
<form method="post" action="processform.php">
User ID <input type="text" name="userid" id="userid"/><br />
Password <input type="password" name="passwd" id="passwd"/><br />
<input type="hidden" name="challenge" id="challenge" />
<input type="submit" name="login" value="Log In" />
</form>
</body>
</html>
As you can see with the above script, the server generates a semi-random challenge string, which is “sent” to the client by simply setting up a “challenge” session variable. Then, the client uses this value to append to the MD5 hashed password and builds a new string, which is hashed again and finally transmitted to the server. As you’ve seen, the “doCHAP()” function is responsible for performing the encryption of data, by utilizing the “MD5()” function included within the corresponding “md5.js” library. Also, data validation is basically applied through the “showError()” function. To finish, the “doCHAP()” function is attached to the “onsubmit()” event handler, when the page finishes loading, as you can appreciate in the portion of code below:
/*
* execute 'doCHAP()' function when page is loaded
*/
window.onload=function(){
var W3CDOM=document.getElementById&&document.
getElementsByTagName&&document.createElement;
// check if browser is W3CDOM compatible
if(W3CDOM){
document.getElementsByTagName('form')[0].onsubmit=function(){
return doCHAP();
}
}
}
With the CHAP login program doing the hard work for encrypting the password along with the challenge value, a hard-coded server authentication PHP script might be written down that is as simple as this:
// start or resume a session
session_start();
$userid='user';
$password=md5('password');
$challenge=$_SESSION['challenge'];
// check to see if user credentials are valid
if(md5($password.$challenge)==$_POST['challenge']
&&$userid==$_POST['userid']){
echo '<html><head><title>Login Successful</title><h1>Thank you
for logging in!</h1></body></html>';
}
else{
echo '<html><head><title>Access denied!</title><body><h1>Access
denied!</h1></body></html>';
}
As I explained before, the server performs the same MD5 calculations on its side, in order to authenticate the credentials the client is passing on. If the calculated value matches the hashed string sent by the client along with its ID, then the user has logged in successfully. Otherwise, the client is simply refused.
Of course, I’ve purposely hard-coded the values corresponding to the user ID and password respectively, but as you might guess, they should be obtained directly from a database table. Also, an important thing to note here is that the authentication script is easily modifiable to work with browsers with scripting enabled or disabled. Indeed, there are many options for solving this issue, which mostly involve using the pair of <noscript></noscript> tags, but at times it’s best to implement a JavaScript-based solution.
Although this may sound like a paradox, the approach is often based on creating on the fly the “challenge” field, instead of hard-coding it within the markup itself, and next making the server check its existence. With reference to this method, the logic of the server script might be reprogrammed to handle either scripting-enabled or disabled user agents with the same ease. It’s up to you to implement the method that best suits your needs.
Now that I’ve configured a basic yet functional CHAP login system, I’ll move forward to the implementation of a slightly more complex script, in order to provide both client and server code with an efficient random seed generator, as well as using some DOM constructs to update the verification process applied to form data. Thus, join me in the next explanation to find out how this is done.
Next: Moving forward: Improving the random seed generator >>
More JavaScript Articles
More By Alejandro Gervasio
