Como implementar reCaptcha V2 de Google

Nube Colectiva

hace 9 años

En esta página:

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.

En este tutorial te enseñaré a Como implementar reCaptcha V2 de Google, vamos con ello.

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 imágenes y audio.

Este nuevo sistema usa fotos de Google Street View, Google Imágenes, 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 te 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 una cuenta de Google reCaptcha, si no has creado nunca una cuenta de Google reCaptcha con tu cuenta de gmail, te aparecerá la siguiente ventana en donde debes de llenar los datos para crear una.

Selecciona el tipo de reCaptcha para la versión 2 (v2), coloca el dominio de tu sitio web, puedes configurar con otras opciones, eso depende de ti, yo te recomiendo la configures como la siguiente imagen que es es lo suficiente para que tu cuenta de Google reCaptcha funcione sin problemas

No olvides activar la casilla Enviar alertas a los propietarios, para que recibas en tu correo un reporte con los intentos de ataques por parte de los Robots.

Dale clic en el botón Enviar para continuar y en la siguiente pantalla te mostrará 2 claves, una es para colocarla en el código HTML y Javascript y la otra clave es para colocarla en el código PHP

Luego de crear la cuenta de Google reCaptcha, instanciamos la librería Javascript para que funcione la API de Google reCaptcha:


<script src='https://www.google.com/recaptcha/api.js'></script>

Paso seguido creamos el código jQuery para validar los datos que se ingresan en el formulario, así mismo colocaré la 1ra Clave (Clave de Sitio) que se me ha generado al crear la cuenta de Google reCaptcha


var onloadCallback = function() {
        grecaptcha.render('html_element', {
          // colocamos la clave para el sitio, generada al crear la aplicacioón
                  'sitekey' : 'CLAVE_DEL_SITIO', // Clave de 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', // Clave de 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 nuestra vista con el siguiente formulario


<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>

Puedes ver que antes del botón para enviar el formulario he colocado el siguiente div con la clase g-recaptcha y el atributo data-sitekey en donde colocaré la 1ra clave (Clave de Sitio) que se generó al crear mi cuenta de Google reCaptcha


<div class="g-recaptcha" data-sitekey="CLAVE_DEL_SITIO"></div>

Ahora Google nos aconseja la validación de lado del servidor, para eso usaremos PHP y creamos el siguiente código, acá colocaremos la 2da clave (Clave Secreta) que se nos generó al crear la cuenta de Google reCaptcha


  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;<span class="webkit-css-property">font-weight</span>:<span class="value">bold</span>;>Genial, No eres un robot. </div>";
        }
        else
        {
            $mensaje = "<div style=color:red;<span class="webkit-css-property">font-weight</span>:<span class="value">bold</span>;>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;<span class="webkit-css-property">font-weight</span>:<span class="value">bold</span>;>Genial, No eres un robot. </div>";

}

else

{

$mensaje = "<div style=color:red;<span class="webkit-css-property">font-weight</span>:<span class="value">bold</span>;>Tú eres un robot (Debes completar la validación) </div>";

}

Conclusión

Como puedes ver, con PHP u otro lenguaje de Programación que funcione de lado del Servidor, puedes procesar cualquier tipo de formulario, como el proceso de pago de un carro de compras u otros.

Por ejemplo en un archivo aparte, digamos en un archivo pagar.php puedes validar si el sistema reCaptcha ha verificado correctamente que no sea un robot y luego continuar la ejecución del código que ejecuta la tarea determinada


  if($_SERVER["REQUEST_METHOD"] === "POST")
    {   
        $recaptcha_secret = "CLAVE_SECRETA";
        
        $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret."&response=".$_POST['g-recaptcha-response']);
        $response = json_decode($response, true);
        
        if($response["success"] === true)
        {
            // Ejecutamos el proceso de pago o otra acción
        }
        else
        {
            $mensaje = "<div style=color:red;<span class="webkit-css-property">font-weight</span><span>:</span><span class="value">bold</span><span>;</span>>Tú eres un robot (Debes completar la validación) </div>";
        }
    }

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

{

$recaptcha_secret = "CLAVE_SECRETA";

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

$response = json_decode($response, true);

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

{

// Ejecutamos el proceso de pago o otra acción

}

else

{

$mensaje = "<div style=color:red;<span class="webkit-css-property">font-weight</span><span>:</span><span class="value">bold</span><span>;</span>>Tú eres un robot (Debes completar la validación) </div>";

}

Y en el formulario HTML llamamos a este archivo en el atributo action


<form action="pagar.php" role="form" name="formulario" method="post">
 // Campos del formulario 
</form>

// Campos del formulario

</form>

Eso es todo, puedes hacer click en el botón GitHub que esta al inicio de este tutorial al costado del botón Demo, para obtener el código fuente en el repositorio Git.

Nota

Algunos de los pasos mencionados pueden variar en futuras versiones de Google re Captcha, esto no depende de nosotros si no de los desarrolladores que dan soporte a esta herramienta de seguridad y cambian el orden de las opciones y pasos mencionados en este tutorial.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.