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

Having defined the server-based random string generator, what I’ll do next is to introduce some minor changes to the original CHAP script, so it will be able to work with the brand new PHP functions. Also, the script will be provided with a slightly more elegant validation routine, by using some DOM methods. Thus, here is the improved version of the CHAP script:

/*

 * validate form fields &

 * implement the Challenge Handshaking Authentication Protocol

 */

function doCHAP(){

  valid=true;

  // get 'userid' field

  var usrid=document.getElementById('userid');

  if(!usrid){return};

  if(!usrid.value){showError(usrid,'Enter your ID')};

  // get 'password' field

  var psw=document.getElementById('passwd');

  if(!psw){return};

  if(!psw.value){showError(psw,'Enter your password')};

  // 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 getChallengeVar()?>');

  // clear password field

  psw.value='';

  return valid;

}

/*

 * display error messages

 */

function showError(obj,message){

  if(!obj.errorNode){

    obj.onchange=hideError;

    var p=document.createElement('p');

    p.appendChild(document.createTextNode(message));

    obj.parentNode.appendChild(p);

   obj.errorNode=p;

 }

  valid=false;

  return

}

/*

 * hide error messages

 */

function hideError(){

  this.parentNode.removeChild(this.errorNode);

  this.errorNode=null;

  this.onchange=null;

}

As you can see, I’ve kept the same core structure for the JavaScript program. The logic for transmitting hashed strings is completely maintained, so the main difference rests on the use of the “getChallengeVar()” function to obtain the challenge string sent by the server. The following line of code illustrates what I just said:

chlng.value=MD5(MD5(psw.value)+'<?php echo getChallengeVar()?>');

Regarding the JavaScript code, I’ve also added a couple of functions, “showError()” and “hideError()” respectively, which are useful for implementing a more elegant method to display error messages when the offending fields hasn’t been filled in, instead of triggering ugly alerts. In short, the “showError()” function appends a new paragraph to the document tree, which shows a custom error message according to the field currently validated. Its counterpart, “hideError()” removes the paragraph when the user changes the value of the offending field.

Of course, you can write your own client-side validation mechanism, or even omit it entirely. Since JavaScript-based validation isn’t the primary goal of the series, I’ll skip over the topic, before you get bored with irrelevant details.

With the improved version of the “doCHAP()” function already defined, all I have to do is attach it to an “onsubmit” event handler, as follows:

/*

 * 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();

    }

  }

}

Once the client has transmitted the corresponding hashed value to the server, a simple procedural script for authenticating the client might be defined in the following way:

// connect to MySQL

if(!$db=mysql_connect('host','user','password')){

  trigger_error('Error connecting to the server '.mysql_error());

  exit();

}

// select database

if(!mysql_select_db('database',$db)){

 trigger_error('Error selecting database '.mysql_error());

 exit();

}

// run query

$sql="SELECT userid,password FROM users WHERE userid='".$_POST
['userid']."'";

if(!$result=mysql_query($sql,$db)){

  trigger_error('Error running query '.$sql.mysql_error());

  exit();

}

// check if user ID is valid

if(mysql_num_rows($result)<1){

  trigger_error('User not found into database');

  exit();

}

// get user data

if(!$row=mysql_fetch_assoc($result)){

  trigger_error('Error retrieving user data');

  exit();

}

session_start();

$challenge=$_SESSION['challenge'];

// check to see if user credentials are valid

if(md5($row['password'].$challenge)==$_POST['challenge']&&$row
['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 you can see, above I’ve coded a simple script that authenticates the client by obtaining the user ID value directly from a database table. Then, the same MD5 calculation is performed on the server and compared to the value transmitted by the client. If the hashed string along with the user ID match the values obtained by the server, then the login is considered successful. Otherwise, the client is simply rejected.

Notice that I’ve purposely kept the code as clear as possible, by paying attention only to the authentication process. Of course, you might want to introduce some changes, such as redirecting the user to another page in case the login fails, or whatever mechanism you wish to implement within your web programs. For exemplifying a CHAP login system, the code is indeed very explanatory.

Summary

By this point, you’ve been provided with some clear examples of how a CHAP login system can be developed for straight inclusion in web-based applications. Besides, I’ve illustrated some relevant aspects related to client-side data encryption, enough to get you started on developing a login system, either expanding the one described above or building your own version.

In the last part of this series, I’ll be developing a PHP object-oriented solution on the server side, instead of working with a procedural method, while maintaining the overall structure for JavaScript program that you just saw. See you in the last part!