Using Kapatcha Library as a Google Captcha on Jsp Form Validation.

kapatcha

Have you seen the picture above? Yes, the picture is an image contains codes. Maybe we’ve ever seen this picture when we register an account to google, yahoo, or maybe we want to submit a comment to someones blog, or etc. This image is used as a validation techniques on a form on a web application. This validation techniques is used by a web application developer to protect their web application against spams attack.

Nowadays, this protection way become a trend on a web application development. It’s called as a Google Captcha. Practically, the code that appears on the image have to be inputed by the user onto a text box on a form, so the user can access the next page. If user did not input the correct code, so the user will be asked again to input the code with different image.

Now we will try to implement this techniques on our try-it-out today. For this try-it-out, we will only make a simple form validation, where user will be asked to write a code that appears on a image onto a text box and then user will click the submit button to go to the next page. And in this next page we will add syntax to check whether the code that given in previous page is correct or not.

We will use a library on this try-it-out, this library called kapatcha, you can download it here. After finish downloading this library, don’t forget to put this library on WEB-INF/lib folder on your web application later. The work flow of this library is very simple. Actually the image that inserted on a form is made by this kapatcha library, so we don’t have to create images containing codes manually, we can say this process as on the fly image creation.

The images that will be created automatically by this kapatcha library, is made by a servlet that exist in this kapatcha library, the servlet name is KaptchaServlet, located on package com.google.code.kaptcha.servlet. This KaptchaServlet will automatically create an image with jpg extention every time when this servlet is called. That’s mean we have to declare this servlet on deployment-descriptor file. And then on our form, we just called this image using html tag img. Please take a look on this codes below:

<body>
<form name="kapatcha_form" action="validate_kaptcha.jsp" method="post">
Enter code shown on the picture <br>
<img src="kapatcha.jpg" width="200" id="kaptchaImage" onclick="document.location.reload()"/>
<br>
<small>if you cannot see the image, just click the image to reload the image</small>
<br>
<input type="text" name="kaptcha"><br>
<input type="submit" value="Submit">
</form>
</body>

On this code above, we can see that image tag (img) containing an image ‘kapatcha.jpg’, which actually this image is not exist on our web application, but this image will be created automatically by KapacthaServlet at the time this kapatcha.jpg called by the form, and then how to call this KapatchaServlet? Let’s take a look the codes that filled up a tomcat deployment-descriptor file or web.xml below:

<servlet>
<servlet-name>kapatcha</servlet-name>
<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>kapatcha</servlet-name>
<url-pattern>/kapatcha.jpg</url-pattern>
</servlet-mapping>

on the codes above we can see that this KaptchaServlet mapped to an url, which this url is kapatcha.jpg, that’s mean when this kapatcha.jpg called by the form, then this KaptchaServlet will create an image and directly allocated as kapatcha.jpg, so our form will be inserted by an image that created by this KaptchaServlet calling. Our form will look like this:

googlecaptchaform

In the image tag which exist on our html form, we also saw a function of a java-script, this function is inserted as onclick=”document.location.reload();”, this function is need to reload the form when user cannot see the code that appear on image, when this image clicked, the form will reload and the KaptchaServlet will create another image, so the user might be able to read the code in this new image created by the servlet.

Now, let’s discuss how to handle the validation of the code, the validation will be handle by the next page which is validate_kaptcha.jsp that we declared on our html form above. So let’s take a look out of this below codes :

<%@ page import="com.google.code.kaptcha.Constants" %>
<%
    String kaptchaExpected = (String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
    String kaptchaReceived = request.getParameter("kaptcha");
    String textResult = "";

    if (kaptchaReceived == null || !kaptchaReceived.equalsIgnoreCase(kaptchaExpected)) {
        textResult = "You're entered invalid code";
    } else
        textResult = "Congratulation you're entered correct code";

%>
<html>
<head>
    <title>Validate Kapatcha</title>
</head>
<body>
<%=textResult%>
</body>
</html>

On this validate_kapatche.jsp file above, we can see there’s two string, both have initialized related with this captcha validation. The first string is kaptchaExpected, this string is catching a session that have been made by this KaptchaServlet when the captha image created, and the 2nd string is kaptchaReceieved which it’s value filled by the taking parameter value of the previous form.

Don’t forget we also inserted statement to import Constants class on the first line of the codes above. And then on the next statement, we can see a check process, this check process is very simple, the codes is only comparing the both string whether they are equals or not, and then filled the textResult string with the appropriate information, and we later use this textResult string as our web page body display string.

I think this Google Captcha implementation on our try-it-out is very simple and very easy to understand, so I hope on the next development you can use it to your own web application.

 

I Hope this will helpful

Menteng, December 22th 2008


josescalia

 

One thought on “Using Kapatcha Library as a Google Captcha on Jsp Form Validation.

  1. Pingback: Using Kapatcha Library as a Google Captcha on Jsp Form Validation. | XML Developer

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s