Envía por AJAX el nuevo reCAPTCHA de Google y valídalo con PHP

El nuevo reCAPTCHA de Google mola un montón. ¿Todavía no lo has probado? El primer paso de todos es ir a la página oficial y pinchar en el botón que dice Get reCAPTCHA. Ahí, claro, tienes que poner tus credenciales de Google.

To be or not to be

Una vez dentro, hay que rellenar el siguiente cuadro; tienes que poner un nombre a tu nuevo reCAPTCHA y asociarlo a un dominio.

Figura 1. Registrar un nuevo sitio

Figura 1. Registrar un nuevo sitio

Esto creará las credenciales de tu nuevo CAPTCHA, una clave de sitio y una clave secreta, que sirven para poder integrarlo en tus aplicaciones web. En el mismo panel donde lo creas verás que hay unas instrucciones muy concisas acerca de cómo puedes integrarlo en tu website.

Básicamente hay que poner este script justo antes del cierre de la etiqueta head.

Y este div justo antes del formulario donde quieres que salga tu CAPTCHA:

Finalmente, en el lado del servidor, tienes que hacer una llamada a este servicio de Google para validar el CAPTCHA:

Hay más información en la documentación oficial. Sin embargo, si estás dando tus primeros pasos en el mundo del desarrollo de apps es posible te encuentres con algunas dificultades al comienzo de tu andadura, como nos ha pasado a todos.

Así pues, con el objetivo de echaros una mano a los que estéis estancados con AJAX y reCAPTCHA, hoy voy a explicaros cómo…

Enviar por AJAX un reCAPTCHA con jQuery y procesarlo en PHP

Concretamente, el código es este:

Si conoces jQuery seguro que no encontrarás especialmente complicado este código. Pero eso sí, debes saber que al insertar el script de Google entonces tienes a tu disposición el objeto grecaptcha, y tienes que llamar al método grecaptcha.getResponse() para enviar al servidor la respuesta del usuario.

Yes

Ya en el servidor, puedes validar el reCAPTCHA con PHP de la siguiente manera:

RECAPTCHA_SECRET es una constante que yo tengo declarada en algún lugar de mi aplicación, pero tú ahí tienes que poner tu secreto, o bien declarar la constante previamente.

5 comentarios

¿Me dejas un comentario? ¡Gracias!

Deja un comentario

Los campos obligatorios están marcados con *