Client Side Authentication By: Max DeAngelis

In

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.

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.

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

User Name: Password: Login

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/