Google reCAPTCHA in websphere portal server

Google reCAPTCHA lets you embed a CAPTCHA in your web pages in order to protect them against spam and other types of automated abuse

reCAPTCHA is a Web service, meaning that the CAPTCHA images are served directly from our servers to the end users. Below is the basic lifecycle of a reCAPTCHA challenge:

1. The user loads the web page with the reCAPTCHA challenge JavaScript embedded.
2. The user's browser requests a challenge (an image with distorted text) from reCAPTCHA. reCAPTCHA gives the user a challenge and a token that identifies the challenge.
3. The user fills out the web page form, and submits the result to your application server, along with the challenge token.
4. reCAPTCHA checks the user's answer, and gives you back a response.
5. If true, generally you will allow the user access to some service or information. E.g. allow them to comment on a forum, register for a wiki, or get access to an email address. If false, you can allow the user to try again.

Similarly to Google maps, you need to register with google reCAPTCHA.

1. http://www.google.com/recaptcha/whyrecaptcha  and Click “SIGN UP”
2. Enter your Google Credentials
3. In the screen below,enter your wesite or give any dummy website

4.It Gives two keys –Public and Private Key.

 

These keys are important for doing reCAPTCHA.

Once you've signed up for API keys, adding reCAPTCHA to your site consists of two steps and optionally a third step where you customize the widget:

   1. Client Side: Displaying the reCAPTCHA Widget (Required)

   2. Server Side: Verifying the solution (Required)

   3. Customizations (Optional)

you can download the reCAPTCHA require jars.

http://code.google.com/p/recaptcha/downloads/list?q=label:java-Latest

Client Side:

<%@page session="false" contentType="text/html" pageEncoding="ISO-8859-1" import="java.util.*,javax.portlet.*,com.ibm.googlerecaptcha.*" %>

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>   

<%@ page import="net.tanesha.recaptcha.ReCaptcha" %>

<%@ page import="net.tanesha.recaptcha.ReCaptchaFactory" %>         

<portlet:defineObjects/>

  <form action="<portlet:actionURL/>" method="post">

        <%

          ReCaptcha c = ReCaptchaFactory.newReCaptcha(GoogleUtil.PUBLIC_KEY, GoogleUtil.PRIVATE_KEY, false);

          out.print(c.createRecaptchaHtml(null, null));

        %>

        <input type="submit" value="submit" />

 </form>

ServerSide:

public class GoogleUtil {

      public final static String PUBLIC_KEY="6LfKEsgSAAAAAIogZMdpPrGzO6st98s3kIRfiu3M";

      public final static String PRIVATE_KEY="6LfKEsgSAAAAAJEIeqhyOT2Nh8QIKUuDcWY_ze57";

     

}

  public void processAction(ActionRequest request, ActionResponse response) throws PortletException, java.io.IOException {

                ActionRequestImpl req=(ActionRequestImpl)request;

                String remoteAddr=req.getRequest().getRemoteAddr();

                System.out.println("RemoteAddress"+remoteAddr);

                ReCaptchaImpl reCaptcha = new ReCaptchaImpl();

              reCaptcha.setPrivateKey(GoogleUtil.PRIVATE_KEY);

              String challenge = request.getParameter("recaptcha_challenge_field");

              String uresponse = request.getParameter("recaptcha_response_field");

              ReCaptchaResponse reCaptchaResponse = reCaptcha.checkAnswer(remoteAddr, challenge, uresponse);

              if (reCaptchaResponse.isValid()) {

                  System.out.println("Answer was entered correctly!");

              } else {

                  System.out.println("Answer is wrong");

              }

            

      }

 

For Corret reCAPTCHA,”Answer was entered correctly” is printed

 Download the files

Customizing the Look and Feel of reCAPTCHA(Optional)

By Default, ”red” is default standard  theme for reCAPTCHA.Other standard theme are white,blackglass,white.

To change default standard theme to any other  standard theme,need to have following code before <form> tag.

<script type="text/javascript">

 var RecaptchaOptions = {

    theme : 'theme_name'

 };

 </script>

To have our own custom theme, need to follow the steps.

1. Add the code before <form> tag

<script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };

</script>

2. Inside  <form> tag

  <div id="recaptcha_widget" style="display:none">
   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>
   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>
   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>
 </div>
 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key" height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
 </noscript>