Instalar reCAPTCHA de google en un formulario

Este artículo vamos a ver como instalar el reCAPTCHA de google. Lo instalaremos en un formulario de contacto creado en Wordpress sin plugins. Este sistema es el que google proporciona hoy día para evitar que se nos inunde el correo electrónico con spam.

El formulario de contacto que utilizo en este mismo blog está creado mediante php, sin necesidad de plugins. Con este lo que buscaba era deshacerme del plugin que utilizaba para esta clase de formularios. Utilizar demasiados plugin sobrecarga un poco de más la instalación de Wordpress. Posiblemente en un futuro artículo exponga como lo he creado, aun que la verdad no tiene ciencia ninguna.

Instalar reCAPTCHA de google

Obtener nuestros datos para el reCAPTCHA

Para empezar tendremos que obtener los datos necesarios que google nos va a proporcionar. Estos los obtendremos iniciando sesión con nuestra cuenta de gmail en la siguiente página:

El enlace de la página de recaptcha nos llevará a la página que se muestra en la captura, y tendremos que hacer clic en el botón que se indica. Lo siguiente que veremos será la página de creación de reCAPTCHAS.

Aquí tendremos que rellenar los datos que se nos piden. En el apartado de elegir el tipo de reCAPTCHA, al buscar una para página web me decidí por utilizar la versión V2.  Después aceptamos los términos de uso y no tendremos más que pulsar el botón «Register» que veremos en la parte de abajo.

Ahora si hacemos clic sobre el nombre que le hemos dado al reCAPTCHA ya podremos obtener los datos que vamos a necesitar para nuestro formularios.

Aquí vamos a obtener todos los datos necesarios. Es recomendable mantener esta página abierta mientras implementamos nuestro formulario.

Implementado el reCAPTCHA al formulario

En el caso sobre el que apliqué este filtro anti-spam tengo que decir que el formulario está dividido en dos partes. La primera parte es en la que incluyo el código HTML del formulario y los mensajes que se verán cuando se envía correctamente o falla. En este archivo es poco el código que tendremos que añadir. Para empezar tendremos que añadir la sitekey como código php.

$sitekey = "Aquí va la site key";

Después, dependerá un poco de dónde quieras que se muestre el reCAPTCHA. En mi caso opté por colocar el siguiente código encima del botón de enviar del formulario:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="<?=$sitekey?>"></div>

Validar el reCAPTCHA

Terminada la parte del formulario, es hora de validar el reCAPTCHA. Como he dicho, mi formulario se divide en dos partes, por lo que la validación la hago en mi plugin de funciones. Dentro de la función que se encarga de enviar el formulario de contacto, tendremos que introducir el siguiente código:

$recaptcha = $_POST["g-recaptcha-response"];
$url = 'https://www.google.com/recaptcha/api/siteverify';

$data = array(
    'secret' => 'aquí va la secretkey que obtuvimos antes en la página reCAPTCHA',
    'response' => $recaptcha
  );
  $options = array(
    'http' => array (
      'method' => 'POST',
      'content' => http_build_query($data)
    )
  );
  $context  = stream_context_create($options);
  $verify = file_get_contents($url, false, $context);
  $captcha_success = json_decode($verify);
  if ($captcha_success->success) {
    //aquí haremos lo necesario para enviar el formulario
  } else {
    header('Location: URL A MOSTRAR SI NO SE VALIDA EL RECAPTCHA');
  }

Hay que decir que el formulario asumo que se envía mediante el método $_POST. Con todo esto ya tendremos instalado y funcionando el reCAPTCHA de google en nuestro formulario de contacto. No necesitamos utilizar plugins para ello.

Podremos ver el ejemplo en funcionamiento en el formulario de contacto de esta misma página.