Client Side

Authentication
By: Max DeAngelis

Overview:
This document is intended to be a tutorial to show how to implement
Client Side Authentication using a JavaScript plugin called JCryption. There
are some required libraries that should be downloaded and extracted first.
In order to complete this tutorial you will need some type of web
server with a PHP interpreter for the server side portion.
The basic idea behind this form of client side authentication is that the
client will ask for a key and then use that key to encrypt all traffic from
client to server. The basic outline of what is accomplished is below:

What You Need To Start:

In order to complete this tutorial you will need to download and
extract the following libraries.

JCryption
o http://www.jcryption.org/
JQuery
o http://jquery.com/download/

Once downloaded move the extracted folders to your project folder on

your web server.

Step One Including Libraries:

In order to use the libraries that you just downloaded you will need to
include them on your sites index.php, main page. Your web sites main page
does not have to be a .php extension but in the interest of expanding the site
in the future it is a good idea. This will also allow for modularizing the site in
the future.
Include the following two lines in the top of your index.php.
NOTE: You will need to update the file locations to reflect where you saved
your files.
<script type="text/javascript" src="../include/JQuery/jquery.js"></script>
<script type="text/javascript" src="../include/jCryption/jquery.jcryption.js"></script>

You should also add one more script include for a JavaScript file for function
to invoke the authentication on the web site.

Step Two Create PHP Back End:

In order to complete the authentication you will need a corresponding
PHP file to accept the Ajax calls from the client and handle the Key
generation.
The job of the PHP files is to create the Public/Private Key pair and
then establish a handshake between the Client and Server. Once the
handshake is completed you have the option to encrypt/decrypt on the Client
and Server.
This ability is what we are trying to achive because then it is easy to
implement a secure form that encrypts all its data and passes it to the server
to be decrypted and stored.
You can find other examples of this process on the JCryption site but
bellow is the basic PHP code you will need.

<?php
// Start the session so we can use PHP sessions
session_start();
// Include the jCryption library
require_once("../jCryption/jcryption.php");
// Set the RSA key length
$keyLength = 1024;
// Create a jCrytion object
$jCryption = new jCryption();
// If the GET parameter "generateKeypair" is set
if(isset($_GET["generateKeypair"])) {
// Include some RSA keys
require_once("../jCryption/100_1024_keys.inc.php");
// Pick a random RSA key from the array
$keys = $arrKeys[mt_rand(0, 100)];
// Save the RSA keypair into the session
$_SESSION["e"] = array("int" => $keys["e"], "hex" => $jCryption->dec2string($keys["e"], 16));
$_SESSION["d"] = array("int" => $keys["d"], "hex" => $jCryption->dec2string($keys["d"], 16));
$_SESSION["n"] = array("int" => $keys["n"], "hex" => $jCryption->dec2string($keys["n"], 16));
// Create an array containing the RSA keypair
$arrOutput = array(
"e" => $_SESSION["e"]["hex"],
"n" => $_SESSION["n"]["hex"],
"maxdigits" => intval($keyLength*2/16+3)
);
// JSON encode the RSA keypair
echo json_encode($arrOutput);
// If the GET parameter "handshake" is set
} elseif (isset($_GET["handshake"])) {
// Decrypt the AES key with the RSA key
$key = $jCryption->decrypt($_POST['key'], $_SESSION["d"]["int"], $_SESSION["n"]["int"]);
// Removed the RSA key from the session
unset($_SESSION["e"]);
unset($_SESSION["d"]);
unset($_SESSION["n"]);
// Save the AES key into the session
$_SESSION["key"] = $key;
// JSON encohe the challenge
echo json_encode(array("challenge" => AesCtr::encrypt($key, $key, 256)));
} else {
// Retrieves the user formt he post array
$User = $_POST['User'];
// Decrypt the request data
$decryptedData = AesCtr::decrypt($_POST['jCryption'], $_SESSION["key"], 256);
// Checks the decrypted value for testing NOTE: Should be hasing the value then comp
if ($Password == "SomeValue) { $result = "Pass"; }else{ $result = "Fail"; }
$encryptedData = AesCtr::encrypt($result, $_SESSION["key"],256);
// JSON encode the response
echo json_encode(array("data" => $encryptedData));
}
?>

Step Three HTML Form:

In this step you will simply need to create a basic form to act as a test.
In this tutorial, to keep with the authentication theme, we will make a
simple login form.
Below is what your index.php file should look like at this point

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="../include/JQuery/jquery.js"></script>
<script type="text/javascript" src="../include/jCryption/jquery.jcryption.js"></script>
<script type="text/javascript" src="../include/Main.js"></script>
</head>
<body>
<form>
<fieldset style="font-size: 80%;">
<table>
<tr>
<td style="text-align: right;">
<label for="username">User Name: </label>
</td><td style="text-align: left;">
<input type="text" name="username"/>
</td>
</tr><tr>
<td>
<label for="password">Password: </label>
</td><td>
<input type="password" name="password" id="password"/>
<td>
</tr><tr>
<td>
<button id=login>Login</button>
<td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

Step Four JavaScript/Ajax:

The final step is to create the JavaScript file that will preform the
Ajax request to the PHP file in order to preform the authentication.
On document load you will need to authorize or preform the
handshake in order to establish trust between the client and server. Once this
trust is established encryption and decryption can be preformed on any or all
communication between client and server.
The code below is an example of how to set up your sites JavaScript
file, in this example the file is called Main.js and you can see it included in
the index.php file.

$( function() {
$("#login").attr("disabled",true);
var temp = Math.round(Math.random() * 1000000);
var hashObj = new jsSHA("Something" + temp, "ASCII");
var password = hashObj.getHash("SHA-512", "HEX");
//Handshake between client and server
//The folowing file names should point to your PHP file
$.jCryption.authenticate(password,
"../include/PHP/encrypt.php?generateKeypair=true",
"../include/PHP/encrypt.php?handshake=true",
function(AESKey) {
$("#login").attr("disabled",false);
}, function() {
// Authentication failed
});
});
//Login Button Click -------------------------------------------$("#login").click(function() {
var User = $("#user").val();
var encryptedString = $.jCryption.encrypt($("#password").val(), password);
$.ajax({
url: "../include/PHP/encrypt.php",
dataType: "json",
type: "POST",
data: {
jCryption: encryptedString,
User: User
},
success: function(response) {
var decryptedString = $.jCryption.decrypt(response.data, password);
//This is where you check the Decrypted Data
//Decrypted Data is the response from the PHP file
}
});
});

Conclusion:
In conclusion this tutorial provides the explanation and code enough to
make a simple website that establishes trust with the server using JCryption
and simple Key Pairs.
On the negative side this handshake takes about 10 seconds to
complete, so this is not the most viable way to secure a site. Other than the
speed this is a free and relatively secure way to secure a site.
The code provided in this tutorial is supposed to be a starting point for
someone interested in client site authentication. You will still need to do
something with the decrypted data on the client and server side. For example
on the server side you could compare the data to a database in order to
authenticate a user. On the client side you would also need to handle the
response from the server and handle showing and hiding the appropriate
information.

Sources:

JCryption - http://www.jcryption.org/
JQuery - http://jquery.com/download/