PrimeFaces Captcha Example

Captcha (Completely Automated Public Turing test to tell Computers and Humans Apart) is a type of challenge response test used in computing to determine whether or not the user is a human. PrimeFaces had provided such a component when the first version released. The component tag is <p:captcha/>.

Captcha is implemented as an input component with a built-in validator that is integrated with reCaptcha. reCAPTCHA is a free service to protect your website from spam and abuse provided by Google.

Read : PrimeFaces Tutorials

1. Captcha Tag Info

2. Captcha Tag Attributes

3. Getting Public & Private Key

For getting the public and private key for be able of using Primefaces Captcha component, you have to visit the following link (After login) and follow the below remaining steps:

Press Get reCAPTCHA.
Press Sign Up Now !.
Put your domain inside the input box that follow word Domain.
Press Create.
Copy Public Key & Private Key that have provided dynamically.

4. Configure the web.xml

By copying the public and private keys that listed above, you have to configure the web.xml file, in order for getting working Captcha. In case, you’ve omitted the mentioning of such those keys, you will be getting an exception like below:

Apr 16, 2014 4:09:58 PM org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: Servlet.service() for servlet [Faces Servlet] in context with path [/JavaBeat-Primefaces-V4] threw exception [Cannot find public key for catpcha, use primefaces.PUBLIC_CAPTCHA_KEY context-param to define one] with root cause
javax.faces.FacesException: Cannot find public key for catpcha, use primefaces.PUBLIC_CAPTCHA_KEY context-param to define one

The snippet of code that would be adding for the web.xml is as follow:

    <context-param>
        <param-name>primefaces.PUBLIC_CAPTCHA_KEY</param-name>
        <param-value>YOUR_PUBLIC_KEY</param-value>
    </context-param>

    <context-param>
        <param-name>primefaces.PRIVATE_CAPTCHA_KEY</param-name>
        <param-value>YOUR_PRIVATE_KEY</param-value>
    </context-param>

5. Managed Bean

package net.javabeat.primefaces;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

@ManagedBean
@SessionScoped
public class Captcha {
	public void check(ActionEvent e){
		FacesContext.getCurrentInstance().addMessage(null,
				new FacesMessage(FacesMessage.SEVERITY_INFO, "Your Code Is Correct !",null));
	}
}

6.The View

index.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces - Captcha</h2>
			<p:messages id="msg"/>
			<p:captcha id="captcha"></p:captcha>
			<br/>
			<p:commandButton value="Check" actionListener="#{captcha.check}"
								ajax="false"></p:commandButton>
		</h:form>
	</f:view>
</html>

7. Primefaces Captcha Example Demo

The below snapshots shows you the using of captcha and how could the success code

[wpdm_file id=73]