Home arrow JavaScript arrow Page 4 - 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 - Refactoring the CHAP login system: Adding functionality to the JavaScript program
(Page 4 of 4 )

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!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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