Building a CHAP Login System: Encrypting Data in the Client - Completing the client code: defining the remaining JavaScript functions
(Page 4 of 4 )
To finish writing the required JavaScript code, the next thing to be done is define the “doCHAP()” function, which will perform the MD5 hash of the given password, then append to it the challenge string sent by the server, and finally apply again the MD5 algorithm on both concatenated values. Additionally, rough data validation will be performed trough the “showError()” function. With reference to this, here is the list of relevant functions:
/*
* 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};
// calculate 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();
}
As you can see, the above code speaks for itself. The “doCHAP()” function simply obtains the values of “user ID” and “password” fields that usually compose a regular login form, and applies basic validation on the data by displaying silly alerts through the “showError()” function. Then, as I described before, the challenge string is appended to the hashed password, and next the MD5 function is again applied to the combined strings. The resulting value of this operation is assigned to a “challenge” hidden field for being transmitted to the server. The following line of code performs those operations:
chlng.value=MD5(MD5(psw.value)+'<?php echo $_SESSION['challenge']?>');
Of course the code would be rather incomplete without showing the corresponding login form:
<form method="post" action="chap.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>
Now hopefully you have a clear idea of how a simple CHAP login system can be implemented. Notice that whenever the form is submitted, the password is never transmitted in plain text to the server. Instead, a hashed value is sent out. Quite good, huh?
Wrapping up
That’s about it for now. Despite the easiness of the given example, I provided you with enough code to play with and start building your own CHAP system. However, there is a long road ahead of us. In the next part of the series, I’ll be showing the code that runs on the server, in order to carry out client authentication, as well as setting up the basis for implementing a more efficient login system. Meet you in the next 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. |
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
