Sistema Anti Spam Google no Captcha reCaptcha

Seguridad Tutorialesoctubre 10, 2015

Demo Github

En muchas oportunidades nos ha pasado que nuestra Bandeja de correos se ha llenado de Correos con Contenido spam y los correos no cesan de ingresar a nuestra bandeja de entrada. Google antes nos daba una solución llamada Google reCaptcha, la cual con escuchar un audio o digitar el número que aparecía en el cuadro nos validaba si la persona que llenaba el formulario era un robot o un humano.
Ahora el sistema de Google ha evolucionado y Google lo denomina como Google No Captcha reCaptcha, este sistema valida si el que llena el formulario es o no un robot, mostrando imagenes y audio. Este nuevo sistema usa fotos de Google Street View, Google Imagenes, Google Maps, etc.

NOTA: El sistema de imágenes clickable y audio aparecerá cuando intentes llenar el formulario de entre 6 a 10 intentos.

En este tutorial les voy a mostrar como implementarlo y hacer la validación del lado de Servidor. Primero nos dirigimos a: https://www.google.com/recaptcha/admin y creamos la aplicación:
Creación de No Captcha reCaptcha
Ahora no olvidemos activar la casilla “Send alerts to owners”, para recibir en el correo un reporte con los intentos de ataques por parte de los Robots.

Ahora instanciamos los scripts para que funcione Google reCaptcha:

<!-- Los colocamos antes de cerrar la etiqueta head -->
<script src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

El script para validar la verificacion y el llenado del formulario:

script.js

var onloadCallback = function() {
        grecaptcha.render('html_element', {
          // colocamos la clave para el sitio, generada al crear la aplicacioón
                  'sitekey' : 'CLAVE_DEL_SITIO',
                  'callback' : verifyCallback
                });
         }
        var verifyCallback = function(response) {
                alert(response);
              };
        function valid() {          

        // Validamos si los campos estan vacios y enviamos una alerta
        var nya = jQuery('#nya').val();
        var telefono = jQuery('#telefono').val();
        var email = jQuery('#email').val();
        var asunto = jQuery('#asunto').val();
        var mensaje = jQuery('#mensaje').val(); 
        var gc = jQuery('#g-recaptcha-response').val();
                 
        if(!nya){
                  alert('Por favor, ingresa tus Nombres y Apellidos');
                  $("#nya").focus();
                  return false;                  
                }

        if(!telefono){
                  alert('Por favor, ingresa tu Telefono');
                  $("#telefono").focus();
                  return false;
                }

        if(!email){
                  alert('Por favor, ingresa tu Email');
                  $("#email").focus();
                  return false;
                }

        if(!asunto){
                  alert('Por favor, ingresa el Asunto de tu Mensaje');
                  $("#asunto").focus();
                  return false;
                }

        if(!mensaje){
                  alert('Por favor, ingresa tu Mensaje');
                  $("#mensaje").focus();
                  return false;
                }

        if(!gc){
                  alert('Por favor, activa la casilla de verificación');
                  return false;
                }

        else {
        return true;
        }
        }

var onloadCallback = function() {

grecaptcha.render('html_element', {

// colocamos la clave para el sitio, generada al crear la aplicacioón

'sitekey' : 'CLAVE_DEL_SITIO',

'callback' : verifyCallback

});

}

var verifyCallback = function(response) {

alert(response);

};

function valid() {

// Validamos si los campos estan vacios y enviamos una alerta

var nya = jQuery('#nya').val();

var telefono = jQuery('#telefono').val();

var email = jQuery('#email').val();

var asunto = jQuery('#asunto').val();

var mensaje = jQuery('#mensaje').val();

var gc = jQuery('#g-recaptcha-response').val();

if(!nya){

alert('Por favor, ingresa tus Nombres y Apellidos');

$("#nya").focus();

return false;

}

if(!telefono){

alert('Por favor, ingresa tu Telefono');

$("#telefono").focus();

return false;

}

if(!email){

alert('Por favor, ingresa tu Email');

$("#email").focus();

return false;

}

if(!asunto){

alert('Por favor, ingresa el Asunto de tu Mensaje');

$("#asunto").focus();

return false;

}

if(!mensaje){

alert('Por favor, ingresa tu Mensaje');

$("#mensaje").focus();

return false;

}

if(!gc){

alert('Por favor, activa la casilla de verificación');

return false;

}

else {

return true;

}

Bien, ahora creamos para nuestra vista, el siguiente formulario:

index.php

<form role="form" name="formulario" method="post">

<div class="form-group">
  <label for="nya">Nombres y Apellidos:</label>
  <input type="text" class="form-control" id="nya" name="nya" placeholder="Ingresa tus Nombres y Apellidos">
</div>

<div class="form-group">
 <label for="telefono">Ingresa tu Número de Telefono o Celular:</label>
 <input type="phone" class="form-control" id="telefono" name="telefono" placeholder="Ingresa tu Número">
</div>

<div class="form-group">
 <label for="email">Email:</label>
 <input type="email" class="form-control" id="email" id="email" placeholder="Ingresa tu Correo">
</div>

<div class="form-group">
 <label for="asunto">Asunto:</label>
 <input type="text" class="form-control" id="asunto" id="asunto" placeholder="Ingresa el Asunto de tu Mensaje">
</div>

<div class="form-group">
 <label for="mensaje">Asunto:</label>
 <textarea class="form-control" id="mensaje" id="mensaje" placeholder="Ingresa  tu Mensaje"></textarea>
</div>

 <label>Verificación :</label>
<!-- Aca tambien colocamos la Clave del sitio Generada a la hora de crear la aplicación -->
 <div class="g-recaptcha" data-sitekey="CLAVE_DEL_SITIO"></div>	
 <br>
<!-- Al enviar el formulario validamos los elementos del formulario y también el cuadro de verificación del reCaptcha -->
 <input type="submit" class="btn btn-primary" value="Aceptar" id="btnenviar" name="btnenviar" onclick="return valid()">

</form>

<label for="nya">Nombres y Apellidos:</label>

</div>

<label for="telefono">Ingresa tu Número de Telefono o Celular:</label>

</div>

<label for="email">Email:</label>

</div>

<label for="asunto">Asunto:</label>

</div>

<label for="mensaje">Asunto:</label>

</div>

<label>Verificación :</label>

<br>

</form>

Ahora Google nos aconseja la validación de lado del servidor, para eso usaremos PHP y creamos lo siguiente:

procesar.php

  if($_SERVER["REQUEST_METHOD"] === "POST")
    {   
        // Colocamos la clave Secreta que generamos al crear la aplicación
        $recaptcha_secret = "CLAVE_SECRETA";
        
        // Usamos el servidor de Google reCaptcha para hacer la verificación
        $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret."&response=".$_POST['g-recaptcha-response']);
        $response = json_decode($response, true);
        
        // Si pasamos el reCaptcha o no, enviamos un mensaje
        if($response["success"] === true)
        {
            $mensaje = "<div style=color:green;>Genial, No eres un robot. </div>";
        }
        else
        {
            $mensaje = "<div style=color:red;>Tú eres un robot (Debes completar la validación) </div>";
        }
    }

if($_SERVER["REQUEST_METHOD"] === "POST")

{

// Colocamos la clave Secreta que generamos al crear la aplicación

$recaptcha_secret = "CLAVE_SECRETA";

// Usamos el servidor de Google reCaptcha para hacer la verificación

$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret."&response=".$_POST['g-recaptcha-response']);

$response = json_decode($response, true);

// Si pasamos el reCaptcha o no, enviamos un mensaje

if($response["success"] === true)

{

$mensaje = "<div style=color:green;>Genial, No eres un robot. </div>";

}

else

{

$mensaje = "<div style=color:red;>Tú eres un robot (Debes completar la validación) </div>";

}

Eso es todo, si tienes problemas, puedes hacer click en el botón Github que esta al inicio del articulo al costado del botón Demo, para obtener el código fuente en el repositorio Git.

Espero les sirva de mucho este articulo !

Gracias por su atención.