JCaptcha – Generación de Captchas en Java
Índice de contenidos.
- 1. Introducción
- 2. Entorno
- 3. pom.xml
- 4. Configuración básica de JCaptcha con Spring
- 5. Configuración avanzada de JCaptcha
- 6. Conclusiones
1. Introducción
En este tutorial veremos la librería JCaptcha. Se trata de una librería opensource para generación de captchas en Java. En todo formulario web que pida al usuario introducir datos que posteriormente serán procesados deberíamos introducir una imagen
de tipo Captcha que nos asegure que quién está enviando el formulario es un humano y no una máquina. Si no añadimos esta característica no podríamos evitar que un robot o programa
automatizado pudiera darse de alta repetidas veces en nuestra web, participar en encuestas, etc.
JCaptcha nos aporta las herramientas necesarias para generar las imágenes que utilizaremos para validar nuestros formularios proporcionándonos además la personalización
de la imagen permitiéndonos cambiar su tamaño, apariencia, fuente, colores, etc.
Otra de las grandes ventajas de esta librería es que se encuentra en los repositorios públicos de Maven por lo que con añadir la dependencia en nuestro pom.xml bastaría y por
otro lado se integra con Spring por lo que su configuración es muy sencilla.
2. Entorno.
El tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil Asus G50Vseries (Core Duo P8600 2.4GHz, 4GB RAM, 320 GB HD).
- Sistema operativo: Windows 7
- ICEFaces 1.8.2
- JCaptcha 1.0
- Maven 2.2.1
- Spring 2.5.6
- Framework wuija 1.9
3. pom.xml
Para proyectos con Maven basta con añadir la dependencia en el pom.xml. Suponemos que en el pom.xml ya tenemos configuradas las dependencias a Spring, JSF, ICEFaces, etc.
|
1 2 3 4 5 |
<dependency> <groupId>com.octo.captcha</groupId> <artifactId>jcaptcha</artifactId> <version>1.0</version> </dependency> |
4. Configuración básica de JCaptcha con Spring
Existen varias formas de configurar JCaptcha en un proyecto web. Por un lado podemos desplegar un Servlet (SimpleImageCaptchaServlet) que atiende las peticiones del captcha,
ver documentación aquí. Por otro lado podemos configurar
los servicios necesarios para generación y validación del captcha a través de Spring. En este tutorial seguiremos esta configuración.
En el fichero de configuración de Spring applicationContext.xml añadimos el servicio de generación de las imágenes:
|
1 |
<bean class="com.octo.captcha.service.image.DefaultManageableImageCaptchaService" id="imageCaptchaService"/> |
Con esto ya tenemos disponible este servicio para la generación de la imagen del captcha, pero eso sí con su configuración por defecto que en muchos casos nos puede ser más que
suficiente. En nuestra aplicación debemos crear la lógica de negocio, utilizando el servicio levantado anteriormente, para crear una imagen de captcha, validar la palabra ‘oculta’
del captcha, etc. Para ello crearemos un Managed Bean de JSF gestionado por String mediante la anotación @Controller y una clase Captcha que se encargará de todo lo relacionado
con las operaciones del captcha.
La clase Captcha queda así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
package com.autentia.tutoriales.jsf; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import java.io.IOException; import javax.faces.context.FacesContext; import javax.servlet.http.HttpServletRequest; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import com.octo.captcha.service.image.DefaultManageableImageCaptchaService; import com.octo.captcha.service.image.ImageCaptchaService; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGImageEncoder; public class Captcha { private final Log log = LogFactory.getLog(Captcha.class); private final DefaultManageableImageCaptchaService imageCaptchaService; private String captchaId; private String captchaValue; private byte[] captchaImage; /** * Recibe el servicio de generación de captcha y genera una nueva imagen */ public Captcha(ImageCaptchaService imageCaptchaService) { this.imageCaptchaService = (DefaultManageableImageCaptchaService)imageCaptchaService; try { generateCaptchaImage(); } catch (IOException e) { log.error("Error generando captcha: " + e.getMessage()); } } /** * Devuelve una imagen de captcha * * @return * @throws IOException */ public void generateCaptchaImage() throws IOException { final HttpServletRequest httpServletRequest = (HttpServletRequest)FacesContext.getCurrentInstance() .getExternalContext().getRequest(); // Stream de salida para la imagen del captcha final ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream(); // Guarda el identificador de sesión del usuario para validar el captcha captchaId = httpServletRequest.getSession().getId(); // Creación de la imagen de captchacall the ImageCaptchaService getChallenge method final BufferedImage challenge = imageCaptchaService.getImageChallengeForID(captchaId); // Codificamos la imagen en JPEG final JPEGImageEncoder jpegEncoder = JPEGCodec.createJPEGEncoder(jpegOutputStream); jpegEncoder.encode(challenge); // Guardamos la imagen como un flujo de bytes para pintarla en pantalla captchaImage = jpegOutputStream.toByteArray(); } /** * Validación del captcha. Se recoge el identificador de la sesión del usuario y el texto introducido para validar que ha * reconocido el texto del captcha. * * @return */ public boolean isValidCaptcha() { boolean validate = false; try { validate = imageCaptchaService.validateResponseForID(captchaId, captchaValue); } catch (Exception e) { log.error("Error durante la validación del captcha: " + e.getMessage()); } return validate; } public String getCaptchaValue() { return captchaValue; } public void setCaptchaValue(String captchaValue) { this.captchaValue = captchaValue; } public byte[] getCaptchaImage() { return captchaImage; } } |
El controlador de la vista UserCtrl se encargará de recuperar los datos del formulario y validar el captcha.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
package com.autentia.tutoriales.jsf; import java.io.IOException; import javax.annotation.PostConstruct; import javax.annotation.Resource; import javax.faces.application.FacesMessage; import javax.faces.application.FacesMessage.Severity; import javax.faces.context.FacesContext; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.springframework.context.annotation.Scope; import org.springframework.context.support.MessageSourceAccessor; import org.springframework.stereotype.Controller; import com.octo.captcha.service.image.ImageCaptchaService; @Controller @Scope("request") public class UserCtrl { private static final Log log = LogFactory.getLog(UserCtrl.class); private String userName; private String welcomeMessage; private String welcome; private Captcha captcha; @Resource private MessageSourceAccessor messageSourceAccessor; @Resource private ImageCaptchaService imageCaptchaService; @SuppressWarnings("unused") @PostConstruct private void init() { welcome = messageSourceAccessor.getMessage("home.welcome"); captcha = new Captcha(imageCaptchaService); } /** * Antes de aceptar los datos del formulario se debe pasar la validación del Captcha * * @return */ public String accept() { if (!captcha.isValidCaptcha()) { final String message = messageSourceAccessor.getMessage("message.captcha.error"); addMessage(null, FacesMessage.SEVERITY_ERROR, message, message); newCaptcha(); return ""; } welcomeMessage = welcome + " " + userName; return "home"; } /** * Genera una nueva imagen de Captcha * * @return */ public String newCaptcha() { try { welcomeMessage = null; captcha.generateCaptchaImage(); } catch (IOException e) { log.error("Error generando captcha: " + e.getMessage()); } return "home"; } public static void addMessage(String clientId, Severity severity, String summary, String detail) { final FacesContext context = FacesContext.getCurrentInstance(); if (context != null) { final FacesMessage message = new FacesMessage(severity, summary, detail); context.addMessage(clientId, message); } } public String getUserName() { return userName; } public void setUserName(String userName) { this.userName = userName; } public String getWelcomeMessage() { return welcomeMessage; } public void setWelcomeMessage(String welcomeMessage) { this.welcomeMessage = welcomeMessage; } public Captcha getCaptcha() { return captcha; } } |
Por último la página home.jspx para sacar el formulario queda así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
< ?xml version="1.0" encoding="UTF-8"? > < jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" 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:c="http://java.sun.com/jstl/core" xmlns:ice="http://www.icesoft.com/icefaces/component"> < ui:composition template="/WEB-INF/facelets/template/defaultLayout.jspx" > < ui:define name="content"> <h1><ice:outputText value="#{msg['home.welcome']}"/></h1> <fieldset> <legend>#{msg['home.userData']}</legend> < ice:panelGrid columns="3"> <!-- Nombre --> < ice:outputLabel for="userName" value="#{msg['home.userNameLabel']}: "/> < ice:inputText id="userName" value="#{userCtrl.userName}" required="true"/> < ice:message for="userName" errorClass="error"/> <!-- Captcha --> < ice:outputLabel for="captcha" value="#{msg['home.captcha']}: "/> < ice:inputText id="captchaValue" value="#{userCtrl.captcha.captchaValue}" required="true"/> < ice:message for="captchaValue" errorClass="error"/> < /ice:panelGrid> <!-- Etiqueta que recoge el flujo de bytes de la imagen del captcha y la pinta en pantalla --> < ice:graphicImage id="captcha" value="#{userCtrl.captcha.captchaImage}" /> <br/><br/> < ice:commandButton action="#{userCtrl.newCaptcha}" value="#{msg['button.newCaptcha']}" immediate="true" /> < ice:commandButton value="#{msg['button.accept']}" action="#{userCtrl.accept}"/><br/><br/> < ice:messages globalOnly="true" style="color:red;"/> </fieldset> <br /> < ice:panelGroup rendered="#{not empty userCtrl.welcomeMessage}"> <h2><strong><ice:outputText id="welcomeMessage" value="#{userCtrl.welcomeMessage}" /></strong></h2> </ice:panelGroup> </ui:define> </ui:composition> </jsp:root> |
El resultado del formulario queda así:
Si metemos mal la palabra del captcha no se registrarán los datos del formulario por lo que impedimos acceder a la lógica de negocio:
Es importante regenerar el captcha cada vez que el usuario falla ya que de lo contrario podrían romper nuestra seguridad con un ataque de diccionario. También se le suele dar al usuario la posibilidad de generar un nuevo captcha debido a que algunas veces
resulta complicado averiguar la palabra que se esconde en el captcha.
Una vez que el usuario introduce la palabra correctamente pasamos la validación y llamaríamos a la lógica de negocio, en nuestro caso recogemos el nombre del usuario y le
damos la bienvenida.
5. Configuración avanzada de JCaptcha
Por defecto JCaptcha utiliza un diccionario de palabras en inglés pero podemos configurar esta opción añadiendo nuestro propio diccionario asociado al locale del usuario.
Como dijimos en la introducción JCaptcha nos permite personalizar completamente la generación de la imagen a través de los servicios correspondientes en cada caso. Para
insertar nuestro propio fichero de palabras debemos crear un toodlist_es (para el locale en español). También nos permite configurar los colores del texto, el tamaño de la fuente,
el fondo de la imagen así como los filtros para deformar la imagen. Un ejemplo de esta configuración sería el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
< bean id="imageCaptchaService" class="com.octo.captcha.service.image.DefaultManageableImageCaptchaService"> < property name="captchaEngine" ref="captchaEngine"/> < /bean> < bean id="captchaEngine" class="com.octo.captcha.engine.GenericCaptchaEngine"> < constructor-arg index="0"> < list> < ref bean="CaptchaFactory"/> < /list> < /constructor-arg> < /bean> < bean id="CaptchaFactory" class="com.octo.captcha.image.gimpy.GimpyFactory" > < constructor-arg><ref bean="wordgen"/></constructor-arg> < constructor-arg><ref bean="wordtoimage"/></constructor-arg> < /bean> < bean id="wordgen" class= "com.octo.captcha.component.word.wordgenerator.DictionaryWordGenerator" > < constructor-arg><ref bean="filedict"/></constructor-arg> < /bean> < bean id="filedict" class="com.octo.captcha.component.word.FileDictionary" > < constructor-arg index="0"><value>toddlist</value></constructor-arg> < /bean> < bean id="wordtoimage" class="com.octo.captcha.component.image.wordtoimage.FilteredComposedWordToImage" > < constructor-arg index="0"><ref bean="fontGenRandom"/></constructor-arg> < constructor-arg index="1"><ref bean="backGenUni"/></constructor-arg> < constructor-arg index="2"><ref bean="simpleWhitePaster"/></constructor-arg> < constructor-arg index="3"><ref bean="crystal"/></constructor-arg> < constructor-arg index="4"><ref bean="sphere"/></constructor-arg> < constructor-arg index="5"><ref bean="emboss"/></constructor-arg> < /bean> < bean id="fontGenRandom" class="com.octo.captcha.component.image.fontgenerator.RandomFontGenerator" > < constructor-arg index="0"><value>100</value></constructor-arg> < constructor-arg index="1"><value>100</value></constructor-arg> < constructor-arg index="2"> < list> < ref bean="fontArial"/> < /list> < /constructor-arg> < /bean> < bean id="fontArial" class="java.awt.Font" > < constructor-arg index="0"><value>Arial</value></constructor-arg> < constructor-arg index="1"><value>0</value></constructor-arg> < constructor-arg index="2"><value>8</value></constructor-arg> < /bean> < bean id="backGenUni" class="com.octo.captcha.component.image.backgroundgenerator.UniColorBackgroundGenerator" > < constructor-arg index="0"><value>250</value></constructor-arg> < constructor-arg index="1"><value>100</value></constructor-arg> < /bean> < bean id="simpleWhitePaster" class="com.octo.captcha.component.image.textpaster.SimpleTextPaster" > < constructor-arg type="java.lang.Integer" index="0"><value>3</value></constructor-arg> < constructor-arg type="java.lang.Integer" index="1"><value>5</value></constructor-arg> < constructor-arg type="java.awt.Color" index="2"><ref bean="color"/></constructor-arg> < /bean> < bean id="color" class="java.awt.Color" > < constructor-arg type="int" index="0"><value>100</value></constructor-arg> < constructor-arg type="int" index="1"><value>200</value></constructor-arg> < constructor-arg type="int" index="2"><value>56</value></constructor-arg> < /bean> < bean id="sphere" class="com.jhlabs.image.SphereFilter" > < property name="refractionIndex"><value>1</value></property> < /bean> < bean id="rippleBack" class="com.jhlabs.image.RippleFilter" > < property name="waveType"><value>3</value></property> < property name="XAmplitude"><value>10</value></property> < property name="YAmplitude"><value>3</value></property> < property name="XWavelength"><value>20</value></property> < property name="YWavelength"><value>10</value></property> < property name="edgeAction"><value>1</value></property> < /bean> < bean id="ripple3" class="com.jhlabs.image.RippleFilter" > < property name="waveType"><value>5</value></property> < property name="XAmplitude"><value>5</value></property> < property name="YAmplitude"><value>5</value></property> < property name="XWavelength"><value>10</value></property> < property name="YWavelength"><value>10</value></property> < property name="edgeAction"><value>1</value></property> < /bean> < bean id="emboss" class="com.jhlabs.image.EmbossFilter" > < property name="bumpHeight"><value>1.0</value></property> < /bean> < bean id="smear" class="com.jhlabs.image.SmearFilter" > < property name="shape"><value>0</value></property> < property name="distance"><value>15</value></property> < property name="density"><value>0.4</value></property> < property name="scatter"><value>0.5</value></property> < property name="angle"><value>0.0</value></property> < property name="mix"><value>0.6</value></property> < property name="fadeout"><value>0</value></property> < /bean> < bean id="ripple" class="com.jhlabs.image.RippleFilter" > < property name="waveType"><value>1</value></property> < property name="XAmplitude"><value>2</value></property> < property name="YAmplitude"><value>2</value></property> < property name="XWavelength"><value>10</value></property> < property name="YWavelength"><value>10</value></property> < property name="edgeAction"><value>1</value></property> < /bean> < bean id="ripple2" class="com.jhlabs.image.RippleFilter" > < property name="waveType"><value>2</value></property> < property name="XAmplitude"><value>2</value></property> < property name="YAmplitude"><value>2</value></property> < property name="XWavelength"><value>10</value></property> < property name="YWavelength"><value>10</value></property> < property name="edgeAction"><value>1</value></property> < /bean> < bean id="twirl" class="com.jhlabs.image.TwirlFilter" > < property name="angle"><value>0.8</value></property> < /bean> < bean id="water" class="com.jhlabs.image.WaterFilter" > < property name="amplitude"><value>2</value></property> < property name="antialias"><value>true</value></property> < property name="wavelength"><value>20</value></property> < /bean> < bean id="weaves" class="com.jhlabs.image.WeaveFilter" > < property name="useImageColors"><value>true</value></property> < property name="XGap"><value>2</value></property> < property name="XWidth"><value>10</value></property> < property name="YWidth"><value>16</value></property> < property name="YGap"><value>6</value></property> < /bean> < bean id="crystal" class="com.jhlabs.image.CrystalizeFilter" > < property name="scale"><value>0.5</value></property> < property name="gridType"><value>1</value></property> < property name="fadeEdges"><value>false</value></property> < property name="edgeThickness"><value>0.4</value></property> < property name="randomness"><value>1.0</value></property> < /bean> |
El resultado del captcha con esta configuración cambia totalmente:
6. Conclusiones
El resultado de la utilización de esta herramienta no puede ser más satisfactorio ya que permite de forma muy sencilla configurarla y adecuarla a nuestras necesidades gracias
al soporte de Spring. Siempre es mucho mejor utilizar librerías de terceros para nuestros proyectos que tener que hacer todo nosotros. Imaginaos el esfuerzo que supondría crear algo equivalente a
JCaptcha si lo necesitáramos para nuestros proyectos.
Un saludo. Juan.
Hola, muchas gracias por el post. Me ha sido de gran utilidad.
Quería comentar que para aplicar vuestro ejemplo en mi código, he tenido modificar el fichero de configuración \\\’faces-beans.xml\\\’, en concreto el bean que hace uso del captcha, y modificar la configuración de jCaptcha en application-context.xml ya que las palabras de mi diccionario son todas de cuatro caracteres.
La modificación en faces-beans.xml es:
imageCaptchaService
#{imageCaptchaService}
(y en el bean implementar get y set de la propiedad imageCaptchaService).
La modificación de application-context.xml es en el bean \\\’simpleWhitePaster\\\’, cambiar los argumentos de tipo Integer y darles valor 4.
Saludos.
OK, gracias por la aportación.
Un saludo.