Integrar reCAPTCHA v2 con PHP en formulario

En este post te enseñaré a integrar el servicio llamado reCAPTCHA v2 con PHP, el cual es un simple captcha o checkbox de “no soy un robot” en un formulario HTML.

También te enseñaré a verificarlo con PHP del lado del servidor.

El servicio que vamos a integrar es reCAPTCHA v2, el cual funciona en varios lenguajes de servidor, pues se consume usando HTTP; hoy veremos cómo hacerlo en PHP.

Veremos un ejemplo del formulario y de la comprobación en el lado del servidor.

También dejaré una demostración. Al final tendremos algo como lo del gif:

Requisitos y recomendaciones

En este punto asumo que ya tienes tu par de claves (de sitio y secreta) generadas. Si no las tienes o no sabes cómo obtenerlas, mira este post.

Las peticiones las haremos con file_get_contents y stream_context_create, si no sabes mucho sobre las mismas te recomiendo leer este post.

Nota: a través del post explicaré todo el código, pero si en el futuro hago una actualización la haré en GitHub en su respectivo repositorio. Recomiendo seguirme para estar al tanto 😉

El lado del cliente

1 – Cargar script

Debemos cargar el script de reCAPTCHA v2. El mismo se encarga de inyectar el input en el formulario. Al momento de escribir este post está:

https://www.google.com/recaptcha/api.js

Y la forma de integrarlo es la siguiente:

See the gist on github.

2 – El div

Cuando hayamos cargado el script, debemos indicar al captcha en dónde debe inyectar la casilla de “no soy un robot”. Eso se logra con un div:

See the gist on github.

En el atributo data-sitekey debes colocar tu clave de sitio.

No coloques aquí la secreta, coloca la de sitio.

También asegúrate de dos cosas sobre el div:

• Colocarle la clase g-recaptcha
• Ponerlo dentro del formulario que vas a enviar. Es decir, entre las etiquetas <form> y </form>

En mi caso el formulario completo queda así:

See the gist on github.

Fíjate en la línea 28 que es en donde incluimos el script, y en la línea 51 que es en donde ponemos el div.

Además del captcha, podemos poner otros inputs como en el ejemplo. El action del formulario es procesar.php cuyo código veremos a continuación.

El formulario se ve así hasta ahora:

Lado del servidor – Verificar token de reCAPTCHA v2 con PHP

Como lo dije, el div inyectará un dato en el formulario, cuyo name será g-recaptcha-response y al que podemos acceder en PHP a través de:

$_POST["g-recaptcha-response"]

Ese es un token que debemos comparar en la API que Google ofrece. El endpoint para comparar está en:

https://www.google.com/recaptcha/api/siteverify

Debemos mandar dos argumentos obligatorios:

1. secret – Nuestra clave secreta
2. response – El token de g-recaptcha-response

Aparte de eso se puede enviar la IP del usuario, pero no es obligatorio.

Obviamente debemos comprobar si esa clave existe en $_POST, ya que si no, significa que el usuario no resolvió el captcha. Además de eso, debemos comprobarlo con la API porque que esté presente no significa que sea correcto.

See the gist on github.

He creado la función verificarToken que regresa true o false dependiendo del éxito al completar el captcha.

Solo tienes que remplazar la clave en la línea 25 o invocar al método con tu clave secreta y el token. En este caso debes colocar tu clave secreta.

Lo que se hace es hacer una petición HTTP de tipo POST y esperar un JSON, para más tarde decodificarlo. Ese JSON tiene una estructura así:

See the gist on github.

La propiedad success estará en true o false. Si hay errores también se mostrarán aquí. Por ejemplo:

See the gist on github.

En caso de que no quieras manejar los errores simplemente checa la propiedad success.

Si deseas conocer más información sobre los errores y la verificación del token siempre tienes a tu disposición la documentación oficial.

Demostración y código completo

Si quieres ver la demostración, haz click aquí. En caso de que quieras el código fuente completo, lo encuentras en mi GitHub.

reCAPTCHA v2 con PHP y Bootstrap 4

Este captcha se integra en cualquier formulario. Para hacerlo más bonito visualmente lo colocaré dentro de un formulario de login, basado en un ejemplo anterior de Bootstrap en donde se coloca el correo y la contraseña para iniciar sesión.

Quiero recalcar que los estilos no importan, solo importa que coloquemos el div dentro de la etiqueta form. Dentro del formulario pueden estar todos los campos, pues el script de reCAPTCHA se encarga de inyectar un campo oculto.

See the gist on github.

El action del formulario es igualmente procesar.php así que el lado del servidor no se cambia. Ahora el formulario se ve así:

Demostración con Bootstrap 4

Puedes probarlo en este enlace.

Conclusión

Así de fácil es agregar protección contra bots a nuestros sitios; ya sea para páginas de votaciones, accesos a sistemas, formularios de contacto, etcétera.

reCAPTCHA solo indica si el usuario es un ser humano, es tu responsabilidad manejar todos los datos y hacer validaciones. Si quieres validar con PHP te recomiendo Valitron.

No olvides que cuando acabes de hacer pruebas debes eliminar el dominio localhost de tu panel de administración.

Finalmente te invito a leer más sobre PHP, Seguridad y consumo de APIs en mi blog.