Get it on Google Play

Poner el captcha de Google en tus portlets Liferay

16-11-2017
 
Google reCaptcha 1

Google reCaptcha 1

El captcha de Google tiene grandes ventajas, las tres principales que me vienen ahora a la cabeza son que, en la mayoría de sesiones, los usuarios solo deberán marcar un checkbox mejorando mucho la experiencia de usar un captcha. La segunda, nos aporta datos analíticos importantes, muy útiles para los gestores de la seguridad, ya que pueden delatar algún tipo de trafico peligroso. Y finalmente la tercera, el reconocimiento de imágenes esta haciendo grandes progresos y los captchas tradicionales ya no son efectivos.

Para los que no lo sepan ya, un captcha, es un campo que se añade a los formularios para comprobar que los datos introducidos los ha puesto un humano(Y no un robot, por ejemplo). La problemática está en que introduce mucha complejidad en la entrada de datos: Las imágenes con números y letras cada vez son muy complejas de entender incluso para humanos, los formularios normalmente dejan de ser accesibles, etc.

Por eso es importante introducir captchas que permitan una buena UX(User eXperience) y mantengan la accesibilidad. Para que os hagáis una idea, en la foto de arriba tenemos el captcha de Google y aquí abajo tenemos algunos ejemplos de captchas:

Google reCaptcha 2

Google reCaptcha 2

Bien, ahora que ya sabemos que es un captcha(Obvio para la mayoría de lectores de este blog) y que ventajas tiene el de Google vamos al tajo…

Obtener las claves para usar el Captcha de Google

Lo primero que deberemos hacer es visitar https://www.google.com/recaptcha. Una vez aquí pincharemos en ‘Get reCaptcha’:

Google reCaptcha 3

Google reCaptcha 3

Aquí rellenaremos el formulario ‘Register a new site’, en mi caso le pongo un ‘label'(Texto descriptivo, por ejemplo el nombre de la web) y de tipo de captcha selecciono ‘reCAPTCHA v2’, que es el que te obliga a marcar un checkbox. También hay que poner el listado de dominios en el que pondrás el captcha(Si usáis subdominios con el padre vale):

Google reCaptcha 4

Google reCaptcha 4

Una vez que ya lo tenemos necesitaremos la ‘site key'(Que pondremos en el código HTML) y la ‘secret key'(Que serà nuestra clave secreta para comunicarnos con Google Captcha):

Google reCaptcha 5

Google reCaptcha 5

Con esto ya lo tenemos todo para pasar al siguiente paso.

Incrustar el captcha de Google en nuestros formularios

Para incrustar el captcha de Google en nuestros formularios necesitaremos la ‘site key’. Tenemos varias maneras de hacerlos, la mas sencilla es incrustar el siguiente código dentro del formulario:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="Aquí la site key"></div>

Esto nos incrustará el captcha y cuando se envie el formulario nos llegará el parámetro ‘g-recaptcha-response’.

Tratar los datos del formulario y comunicación con Google

Bién, ya tenemos las llaves y el captcha en el formulario. Ahora ya solo nos queda procesar los datos que nos llegan del formulario. La función de mas abajo(Comentada) lee el parámetro del formulario y devuelve ‘true’ si el captcha es correcto.

La principal complicación aquí es que el parámetro ‘g-recaptcha-response’ no lleva el ‘namespace’ y, por lo tanto, Liferay no nos lo va a dejar leer fácilmente. Para esto, deberemos obtener el HttpServletRequest original(Con todos los parámetros, no solo los marcados para nuestro portlet).

La comunicación con Google reCaptcha se hace mediante un API rest estándar. Si el objeto JSON que nos devuelve tiene el atributo “success” a “true” quiere decir que el usuario a pasado la validación del captcha. Se debe hacer una petición post a la URL con dos parámetros: la ‘secret key’ y el valor del parametro ‘g-recaptcha-response’.

private boolean checkCaptcha(PortletRequest request) throws Exception {
	/* Obtenemos el HttpServletRequest original */
	HttpServletRequest req=PortalUtil.getOriginalServletRequest( PortalUtil.getHttpServletRequest( request ) );
			
	/* Hacemos la petición POS con los dos parámetros */
	HttpClient client = new HttpClient();
	PostMethod post = new PostMethod("https://www.google.com/recaptcha/api/siteverify");
	NameValuePair[] data = {
			new NameValuePair("secret", "Aquí la secret key"),
			new NameValuePair("response", req.getParameter("g-recaptcha-response"))
			};
	post.setRequestBody(data);
	client.executeMethod(post);
	String s = post.getResponseBodyAsString();
	
	/* Parseamos la respuesta de Google */		
	JSONObject resp=JSONFactoryUtil.createJSONObject(s);
	
	/* Si tiene el parámetro 'success' devolvemos el resultado */
	if ( resp.has("success") )
		return resp.getBoolean("success");

	/* Po defecto, false siempre */
	return false;	
	}

En fin, esto es todo amigos. No os olvidéis de comentar, compartir y darle a ‘me gusta’ a todos mis artículos y vídeos de Youtube que os gustes. Muchas gracias y hasta la próxima.

Interesado en formación Liferay?

 

Leave a Reply