Monday, November 19, 2012

Adding CAPTCHA to WebCenter/ ADF web application

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is type of challenge-response test used in computing as attempt to ensure that response is generated by human being. This is requirement for several web sites, especially on registration forms

Sample CAPTCHA is shown below
Figure 1

1. Download Simplecaptcha-1.2.1.jar. This is available for download for free on Internet. This is also available under MyWebApplicationWithCaptcha\Portal\public_html\WEB-INF\lib in application provided for download

2. Create new WebCenter Portal - Framework Application at C:\JDeveloper\mywork

3.  Create lib folder as follows

4. Paste Simplecaptcha-1.2.1.jar under lib folder

5. In JDeveloper, select View → Application Navigator, add Simplecaptcha-1.2.1.jar by right clicking Portal, Project Properties… → Libraries and Classpath → Add JAR/ Directory… Browse to

6. Add following to web.xml of application between <web-app></web-app>



7. Add following code in MyRegistrationForm.jspx file that needs to have CAPTCHA

<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="" version="2.1"
  < contentType="text/html;charset=windows-1252"/>
    <af:document id="d1" title="My Registration Form">
      <af:form id="f1">
        <af:panelFormLayout id="pfl1">
          <af:panelGroupLayout id="pgl" layout="vertical">
            <af:image source="/captchaservlet" id="i1" clientComponent="true"
                      inlineStyle="width:251px; height:76.0px;"/>
            <af:commandButton text="Refresh CAPTCHA" id="cb2" immediate="true">
              <af:clientListener method="refreshCaptcha" type="action"/>
          <af:panelGroupLayout id="pgl1" layout="horizontal" halign="left">
            <af:inputText id="it1" label="Enter text as seen in above image: "
            <af:commandButton text="Go" id="cb1"
          <af:message id="m1" messageType="info" for="it1"/>
      <af:resource type="javascript">
        function refreshCaptcha(evt) {
            try {
                var component = evt.getSource();
                var i1 = component.findComponent("i1");
                i1.setSource(i1.getSource() + "?force=" + new Date().getMilliseconds());
                return false;
            catch (err) {
            return false;

8. Open pages.xml. Drag drop MyRegistrationForm.jspx under Root. Select Delegate Security radio button. Ensure anonymous-role has View permission check box checked

9. Add a package mypackage under Portal and MyRegistrationFormBean in 
request scope as follows. Open MyCapthcaPage.jspx in Design mode. Double click Go button. Enter values as shown below
Figure 2
Click New...

Figure 3
Click OK

Figure 4
Click OK

10. Implementation of class is as follows

package myPackage;


import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

import javax.servlet.http.HttpServletRequest;

import nl.captcha.Captcha;


public class MyRegistrationFormClass {
    public MyRegistrationFormClass() {

    public void verifyAnswer(ActionEvent actionEvent) {
        FacesContext fctx = FacesContext.getCurrentInstance();
        ExternalContext ectx = fctx.getExternalContext();
        HttpServletRequest request = (HttpServletRequest)ectx.getRequest();
        Captcha captcha = (Captcha)ectx.getSessionMap().get(Captcha.NAME);
        try {
        } catch (UnsupportedEncodingException e) {
            System.out.println("UTF not supported!");
        String myAnswer = (String)ectx.getRequestMap().get("bestGuess");
        if (myAnswer != null && captcha.isCorrect(myAnswer)) {
            getMessage("Congratulations! You are human");
        } else {
            getMessage("Sorry! You could be a computer!");
            UIComponent panelLabelAndMessage =
            UIComponent panelFormlayout = panelLabelAndMessage.getParent();

    private void getMessage(String myMessage) {
        FacesContext fctx = FacesContext.getCurrentInstance();
                        new FacesMessage(FacesMessage.SEVERITY_INFO, null,

11. To test application, download it by clicking on 'Download Application' below, unzip it, right click MyRegistrationForm.jspx in Application Navigator and click Run
Download application


  1. Thank you so much for this review! I found it very helpful, this seem like a program that would be of great use to me. Keep it up!

    Ahman Adam - Web Design Dubai

  2. hi
    i use this recommendation and it's work for me but i change the design of page and move the registration form to the popup and unfortunately it doesn't work in popup
    and when user click the refresh button captcha dot'n changed and show it's last text(image)
    can you help me ??!
    i add the refresh button to the captcha image partial target but noting change!!

  3. Softage is one indicated supplement that has expertized in the ground of refreshment designing and effortlessly gives convoluted and propelled dissolvable to your programming

  4. I feel pleasure to read the content that you are posting.web design tips

  5. Enjoyed every detail of this impressive blog. Specially how the writer has instilled life to it.
    wordpress website