JSF Facelets CAPTCHA Code Example

The JSF Facelets Captcha code example shows how to protect a JSF form with Facelets presentation technology using BotDetect CAPTCHA and validate the user input.

This example is very similar to JSF Basic Captcha Example in the context of integrating BotDetect Captcha into your form(s).

Download the BotDetect Java CAPTCHA Generator archive to run this example

JavaServer Faces 2.0+
JavaServer Faces 1.2

JSF 2.0+

Within this page, the root folder of the extracted archive is referred as the <BDC-DIR>.

This example is in the <BDC-DIR>/examples/t_api-captcha-jsf2.0-api_basics-facelets/ folder; and contains the following files:

index.xhtml
WEB-INF/src/com/captcha/botdetect/examples/jsf/facelets_captcha/view
/FaceletsCaptcha.java
WEB-INF/web.xml

Running Example

This example's war file (in BotDetect download package) already embeds all dependencies.

In case you are making this example from scratch in your IDE, you need to ensure botdetect.jar, botdetect-servlet.jar, botdetect-jsp20.jar, and botdetect-jsf20.jar are in the classpath.

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:botDetect="https://captcha.com/java/jsf">
  <h:head>
    <title>BotDetect Java CAPTCHA Validation: Facelets JSF CAPTCHA Code Example</title>
    <h:outputStylesheet name="stylesheet.css" library="css"/>
  </h:head>
  <h:body>
    <h:form prependId="false" styleClass="column">
      <h1>BotDetect Java CAPTCHA Validation:<br/> Facelets JSF CAPTCHA Code Example</h1>
      <fieldset>
        <legend>Java CAPTCHA Validation</legend>
        <h:outputLabel for="captchaCode" value="Retype the characters from the picture:"/>
        
        <!-- Adding BotDetect Captcha to the page -->
        <botDetect:jsfCaptcha id="faceletsExampleCaptcha"
                   userInputID="captchaCode"
                   binding="#{jsfFaceletsCaptchaExample.captcha}"/>
        
        <div class="validationDiv">
          <h:inputText id="captchaCode"
                 value="#{jsfFaceletsCaptchaExample.captchaCode}"/>
          <h:commandButton action="#{jsfFaceletsCaptchaExample.validate}" value="Validate"/>
          <h:outputText value="Correct code" styleClass="correct"
                 rendered="#{jsfFaceletsCaptchaExample.correctLabelVisible}"/>
          <h:outputText value="Incorrect code" styleClass="incorrect"
                 rendered="#{jsfFaceletsCaptchaExample.incorrectLabelVisible}"/>
        </div>
      </fieldset>
    </h:form>
  </h:body>
</html>

Instead of a taglib declaration, when using Facelets we have to declare the appropriate xmlns attribute of the opening <html> tag at the top of form source.

[back to the top of the page]

FaceletsCaptcha.java

package com.captcha.botdetect.examples.jsf.facelets_captcha.view;

import com.captcha.botdetect.web.jsf.JsfCaptcha;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name="jsfFaceletsCaptchaExample")
@RequestScoped
public class FaceletsCaptcha {

  private String captchaCode;
  private JsfCaptcha captcha;
  private boolean correctLabelVisible, incorrectLabelVisible;

  public FaceletsCaptcha() {
  }

  public String getCaptchaCode() {
    return captchaCode;
  }

  public void setCaptchaCode(String captchaCode) {
    this.captchaCode = captchaCode;
  }

  public JsfCaptcha getCaptcha() {
    return captcha;
  }

  public void setCaptcha(JsfCaptcha captcha) {
    this.captcha = captcha;
  }

  public boolean isCorrectLabelVisible() {
    return correctLabelVisible;
  }

  public boolean isIncorrectLabelVisible() {
    return incorrectLabelVisible;
  }

  public void validate(){
    // validate the Captcha to check we're not dealing with a bot
    boolean isHuman = captcha.validate(captchaCode);
    if (isHuman) {
      correctLabelVisible = true;
      incorrectLabelVisible = false;
    } else {
      correctLabelVisible = false;
      incorrectLabelVisible = true;
    }
    this.captchaCode = "";
  }
}

As you can see the backing bean code is exactly the same as in JSF Basic Captcha Example.

[back to the top of the page]

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
  http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  id="WebApp_ID" version="2.5">

  <display-name>JavaServerFaces</display-name>

  <context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>
    <param-value>Development</param-value>
  </context-param>
  
  <context-param>
    <param-name>javax.faces.VALIDATE_EMPTY_FIELDS</param-name> 
    <param-value>true</param-value>
  </context-param>    

  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>
  
  
  <servlet>
    <servlet-name>BotDetect Captcha</servlet-name>
    <servlet-class>com.captcha.botdetect.web.servlet.CaptchaServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>BotDetect Captcha</servlet-name>
    <url-pattern>/botdetectcaptcha</url-pattern>
  </servlet-mapping> 
  
  <welcome-file-list>
    <welcome-file>faces/index.xhtml</welcome-file>
  </welcome-file-list>
  
  <session-config>
    <session-timeout>
      30
    </session-timeout>
  </session-config>
  
</web-app>

In WEB-INF/web.xml file we register CaptchaServlet used for BotDetect Captcha requests.

[back to the top of the page]

JSF 1.2

The JSF 1.2 Facelets CAPTCHA code example is included in the
examples/traditional-api/bdc4-traditional-api-jsf12-facelets-captcha-example.war file of the download package.

[back to the top of the page]

Please Note

BotDetect Java Captcha Library v4.0.Beta3.7 is an in-progress port of BotDetect 4 Captcha, and we need you to guide our efforts towards a polished product. Please let us know if you encounter any bugs, implementation issues, or a usage scenario you would like to discuss.