JavaServer Faces Basic CAPTCHA Code Example

First Time Here?

Check the BotDetect JSP Captcha Quickstart for key integration steps.

The JSF Basic Captcha code example shows the most basic source code required to protect a JavaServer Faces form with BotDetect CAPTCHA and validate the user input.

It can be used as a starting point when you are first learning how to use BotDetect.

Download the BotDetect Java library and run this example

JavaServer Faces 2.0+

Downloaded Location

The JSF 2.0+ Basic CAPTCHA code example is included in the
examples/simple-api/bdc4-simple-api-jsf20-basic-captcha-example.war file of the download package. Deploying (unpacking) the file will create a standard JSP directory tree.

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, botdetect-jsf20.jar, and hsqldb.jar (HyperSQL DB library) are in the classpath.

index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="botDetect" uri="https://captcha.com/java/jsf/simple-api"%>
<!DOCTYPE HTML>
<f:view>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <title>BotDetect Java CAPTCHA Validation: JSF Basic CAPTCHA Code Example</title>
      <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
    </head>
    <body>
      <h:form prependId="false" styleClass="column">
        <h1>BotDetect Java CAPTCHA Validation:<br> JSF Basic 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:simpleJsfCaptcha id="basicExampleCaptcha"
              binding="#{jsfBasicCaptchaExample.captcha}" />
          
          <div class="validationDiv">
            <h:inputText id="captchaCode" value="#{jsfBasicCaptchaExample.captchaCode}"/>
            <h:commandButton action="#{jsfBasicCaptchaExample.validate}" value="Validate"/>
            <h:outputText value="Correct code" styleClass="correct" rendered="#{jsfBasicCaptchaExample.correctLabelVisible}"/>
            <h:outputText value="Incorrect code" styleClass="incorrect" rendered="#{jsfBasicCaptchaExample.incorrectLabelVisible}"/>
          </div>
        </fieldset>
      </h:form>
    </body>
  </html>
</f:view>

BotDetect custom simpleJsfCaptcha tag generates the Html markup required to show the Captcha image and the Captcha sound / reload buttons.

BasicCaptcha.java

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

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

@ManagedBean(name="jsfBasicCaptchaExample")
@RequestScoped
public class BasicCaptcha {

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

  public BasicCaptcha() {
  }

  public String getCaptchaCode() {
    return captchaCode;
  }

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

  public SimpleJsfCaptcha getCaptcha() {
    return captcha;
  }

  public void setCaptcha(SimpleJsfCaptcha 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 = "";
  }

}

Binding JsfCaptcha tag from JSF form with backing bean property allows us to dynamically set Captcha properties and to perform Captcha validation in backing bean's form action method.

botdetect.xml

<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/java" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="https://captcha.com/schema/java 
      https://captcha.com/schema/java/botdetect-4.0.beta3.4.xsd">

  <captchaStyles>
    <captchaStyle>
      <name>basicExampleCaptcha</name>
      <userInputID>captchaCode</userInputID>
      <codeLength>3-5</codeLength>
    </captchaStyle>
  </captchaStyles>

</botdetect>

In WEB-INF/botdetect.xml, we configure captcha options for the basicExampleCaptcha captcha style name. You can find a full list of available Captcha configuration options and related instructions at the Captcha configuration options 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.DEFAULT_SUFFIX</param-name>
    <param-value>.jsp</param-value>
  </context-param>

  <context-param>
    <param-name>facelets.VIEW_MAPPINGS</param-name>
    <param-value>*.xhtml</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>
    <servlet-name>BotDetect Captcha</servlet-name>
    <servlet-class>com.captcha.botdetect.web.servlet.SimpleCaptchaServlet</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.jsp</welcome-file>
  </welcome-file-list>
  
  
  <session-config>
    <session-timeout>
      30
    </session-timeout>
  </session-config>
</web-app>

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

JavaServer Faces 1.2

The JSF 1.2 Basic CAPTCHA code example is included in the
examples/simple-api/bdc4-simple-api-jsf12-basic-captcha-example.war file of the download package.


Please Note

BotDetect Java Captcha Library v4.0.Beta3.4 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.