Google reCAPTCHA – Cómo agregar en tus formularios

Agrega Google reCAPTCHA en tus formularios y evita que los robots vulneren la seguridad de tu sitio Web.

¿Estás recibiendo correo electrónico masivo (spam) desde alguno de los formularios de tu página Web? ¿Se están registrando en tu sitio Web usuarios extraños de forma masiva? ¿Te están llegando mensajes rusos o chinos sin sentido?

reCAPTCHA es un servicio gratuito que ofrece Google para  proteger tu sitio web del spam y del abuso. Es una de las formas más populares para parar los bots.

Además utiliza un avanzado motor de análisis de riesgos y desafíos adaptativos para evitar que el software automatizado participe en actividades abusivas en tu sitio.

Con la instalación de reCAPTCHA, los usuarios pueden rellenar los formularios de tu sitio Web con facilidad pero no así los robots.

Google reCAPTCHA garantiza una seguridad avanzada. Lo último en protección contra el spam y el abuso para un sitio Web de forma gratuita.

Google reCAPTCHA está construido para la seguridad. Equipado con la tecnología más avanzada y siempre a la vanguardia de las tendencias de la lucha contra el spam y el abuso.

El diseño y la lógica que el usuario debe seguir para habilitar un formulario en tu sitio Web son fáciles para las personas pero no son fáciles de adivinar para los robots.

Los usuarios deben emplear una pequeña lógica, principalmente a través de imágenes asociativas para poder enviar el formulario. Una lógica simple que los robots no pueden adivinar.

El código CAPTCHA puede ser pensado y realizado por un programador pero reCAPTCHA hace un uso positivo de este esfuerzo humano canalizando el tiempo dedicado a resolver CAPTCHAs en la anotación de imágenes y la creación de conjuntos de datos de aprendizaje automático.

La creación de valor de tu sitio Web también queda garantizada ya que te aseguras que la gente que te contacta o envía tus formularios sean personas humanas.

Creación del Google reCAPTCHA

Instalar Google reCAPTCHA en tu sitio Web es bastante sencillo si tienes conocimientos técnicos en materia de creación de páginas Webs.

En primer lugar, debes crear el reCAPTCHA que más se ajuste a tus necesidades desde:

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

Debes tener una cuenta de Google para crear los reCAPTCHA para tus sitios Webs.

Para crear un reCAPTCHA tan solo debes pulsar en el botón “+” que aparece por la parte derecha del Admin console.

Para registrar un nuevo sitio web debes especificar:

• Etiqueta: Sirve para identificar el sitio Web. Lo ideal es escribir el dominio donde vamos a emplear el reCAPTCHA.
• Tipo de reCAPTCHA: reCAPTCHA v3 y reCAPTCHA v2.
• Dominios: Si el reCAPTCHA lo vas a usar en distintos dominios puedes especificarlo en esta lista.
• Preferencia de seguridad: Puedes definir varios grados de seguridad. La más fácil para los usuarios, nivel intermedio o la más segura.

Existen varios tipos de reCAPTCHA:

• reCATPCHA v3 para verificar las solicitudes con una puntuación.
• reCAPTCHA v2 para verificar las solicitudes con un reto.

La opción más antigua (reCAPTCHA v2) permite:

• Utilizar la casilla “No soy un robot” que valida solicitudes con la casilla “No soy un robot”. El usuario debe checkear una casilla y a menudo aparece una interfaz para conseguir un reto. Por ejemplo, mostrar x imágenes y seleccionar las imágenes que contengan un semáforo.
• Utilizar la Insignia de reCAPTCHA invisible para validar solicitudes en segundo plano.
• Utilizar reCAPTCHA para Android que permite validar solicitudes en tu aplicación para Android.

Al guardar el formulario de registro del reCAPTCHA te aparece la clave del sitio Web y la clave secreta que debes copiar para agregarlas en el script de tu página Web.

Si deseamos utilizar Google reCAPTCHA v2 con la casilla “No soy un robot”, el método más sencillo para presentar el widget reCAPTCHA en tu página Web es incluir el recurso JavaScript necesario y una etiqueta g-recaptcha dentro de tu formulario.

Inclusión del API

Agrega el siguiente código dentro de la cabecera o dentro de la etiqueta <head>:

Source code

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

Donde estamos incluyendo la API para utilizar el reCAPTCHA.

Contenedor reCAPTCHA

La etiqueta g-recaptcha es un elemento DIV con el nombre de la clase “g-recaptcha” y la clave del sitio en el atributo data-sitekey.

Dentro del formulario que quieres evitar el spam o abuso debes agregar justo antes del botón de enviar o donde tu quieras:

Source code

<div class="g-recaptcha" data-sitekey="TU CLAVE DEL SITIO AQUÍ" data-callback="correctCaptcha"></div>

Como resultado puedes ver en tus formularios el siguiente bloque reCAPTCHA:

Recepción de los datos del formulario con PHP

El código PHP que recibe la información del formulario y permite verificar el estado del elemento reCAPTCHA puede ser algo como lo que sigue:

Source code

<?php
if (isset($_POST['submitForm'])) {
    $captcha_response = true;
    $recaptcha = $_POST['g-recaptcha-response'];
 
    $url = 'https://www.google.com/recaptcha/api/siteverify';
    $data = array(
        'secret' => '6LcPn6MUAAAAAGMPw-wB4AXjlj0eDFA-8IMobSj0',
        '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);
    $captcha_response = $captcha_success->success;
 
    if ($captcha_response) {
        echo '<p class="alert alert-success">Procesar datos...</p>';
    } else {
        echo '<p class="alert alert-danger">Debes indicar que no eres un robot.';
    }
}
?>

Si el usuario ha pulsado el botón “Enviar” del formulario, hacemos una verificación del elemento reCAPTCHA para conseguir su respuesta para actuar en consecuencia.

Es importante saber que el script debe cargarse utilizando el protocolo HTTPS y puede incluirse en cualquier punto de la página sin restricciones.

Conclusiones

Probablemente, a día de hoy es imprescindible no contar con un elemento de estas características.

Agregar uno de estos elementos en tu página Web es un seguro que permite evitar que los robots llenen de basura tu base de datos o tu bandeja de entrada.

Si no tienes conocimientos técnicos para hacer esta instalación en tu sitio Web, solicita presupuesto sin compromiso enviándonos todos los detalles del problema enviando un ticket al centro de soporte técnico.

Ver demo Descargar