Home arrow JavaScript arrow Page 2 - Building a CHAP Login System: Coding Server-Side Random Seeds
JAVASCRIPT

Building a CHAP Login System: Coding Server-Side Random Seeds


Welcome to the second part of “Building a CHAP login system.” In three parts, this series introduces the basics of building a web-based login system that uses the Challenge Handshake Authentication Protocol (hence the CHAP acronyms), explaining its benefits, and exploring its implementation.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 23
September 06, 2005
TABLE OF CONTENTS:
  1. · Building a CHAP Login System: Coding Server-Side Random Seeds
  2. · Stepping back: a quick look at the previous CHAP login system
  3. · Moving forward: Improving the random seed generator
  4. · Refactoring the CHAP login system: Adding functionality to the JavaScript program

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials