¿Qué es un CAPTCHA? ¿Cómo añadir reCAPTCHA a mi web?

7min

En este artículo, explicamos cómo se incluye un CAPTCHA en una página web, basándonos en uno de los sistemas más utilizados, reCAPTCHA de Google, y que resulta muy fácil de implementar, ya sea manualmente con cualquier lenguaje de programación o de forma automática con un plugin de WordPress.

Índice

Qué es un CAPTCHA

Un CAPTCHA es un sistema de verificación online que comprueba que un formulario ha sido escrito por un humano y no por una máquina. Aunque en ocasiones pueden resultar molestos, cumplen una función: evitan que robots, bots o máquinas envíen información a través de los formularios de una web de manera automática e indiscriminada.

Qué es reCAPTCHA

reCAPTCHA está desarrollado por Google y es una evolución del CAPTCHA tradicional. Al utilizar algoritmos avanzados de aprendizaje automático, lo hace más eficaz y menos intrusivo.

CAPTCHA vs reCAPTCHA: ¿cuáles son las diferencias?

A diferencia del CAPTCHA tradicional, reCAPTCHA tiene las siguientes características:

  • Método de verificación más avanzado para determinar si el usuario es humano.
  • Nivel de seguridad más alto y con mayor precisión para detectar bots.
  • Es más user-friendly al pedir acciones más simples.

Cómo añadir reCAPTCHA a una página web

Añadir reCAPTCHA manualmente

En unos pocos y sencillos pasos, te mostraremos cómo instalar un captcha en tu página web:

Paso 1. Registrarse en reCAPTCHA

Nos dirigiremos a reCAPTCHA y nos identificamos como usuarios de Google.  En su defecto, tendremos que registrarnos. Una vez identificados, nos solicitarán el dominio (o dominios) donde queremos implantar nuestros captchas, una etiqueta a modo de identificador y un correo (o correos) donde puedan notificarnos alertas.

A continuación, nos mostrará lo siguiente: Public Key: 5LfCABCDEFGHIJUNDSBOejHq-5n5StSWawBpCAMX Private Key: 6LfCAAAFHJSDFGHHJHDeju3a-Z5lomjShHKaGh9g

En el sitio de reCAPTCHA, tendremos que descargarnos los códigos en el lenguaje que queramos, las librerías para poner en nuestro servidor y unos ejemplos de uso del sistema.

En este ejemplo, mostraremos la versión PHP. Una vez descargado el zip que contiene la librería PHP, la ubicamos en nuestro servidor. Recuerda dónde la has puesto, porque tendrás que hacer un include con PHP de esa librería. Por ejemplo, podríamos colocar dicha librería en el mismo directorio donde está la página PHP que va a hacer uso de ella. Entonces, la incluiríamos con algo como esto: require_once(‘recaptchalib.php’);

Paso 2. Incluir el captcha en el formulario

En la librería descargada (recaptchalib.php), existe una función que utilizaremos para mostrar el captcha. Solamente tenemos que llamarla con los parámetros oportunos. La función devuelve el código HTML que tenemos que colocar en la página para que esta se muestre: .recaptcha_get_html($captcha_publickey, $error_captcha);

Los parámetros que recibe son la llave pública que nos mostraron anteriormente y un código de error (opcional).

El código del formulario podría ser así:

<?
require_once('recaptchalib.php');
//Llaves de la captcha
$captcha_publickey = '6LfC?.';
$captcha_privatekey = '6LfC? ';
//por ahora ponemos a null el error de la captcha
$error_captcha=null;
?>
<form action='miejemplo_formulario.php' method='post'>
Nombre: <input type='text' name='nombre' size='30'>
<br>
Edad: <input type='text' name='edad' size='3'>
<br>
<?
//escribimos en la página lo que nos devuelve recaptcha_get_html()
echo recaptcha_get_html($captcha_publickey, $error_captcha);
?>
<br>
<input type='submit' value='Enviar'>
</form>

Paso 3. Validar el captcha

Existe otra función para validar el captcha, llamada recaptcha_check_answer(). Esta recibe también varios parámetros: la llave privada (Private Key), la IP del usuario y dos campos que contienen los valores que envía el captcha dentro del formulario $_POST[«recaptcha_challenge_field»] y $_POST[«recaptcha_response_field»]

La función retorna un objeto con dos propiedades:

  • is_valid, un boleano para decir si se ha validado correctamente el captcha.
  • error, un código de error que especifica qué ha ido mal si no se validó correctamente el texto.

Así podríamos validar el captcha:

$captcha_respuesta = recaptcha_check_answer ($captcha_privatekey,
$_SERVER['REMOTE_ADDR'],
$_POST['recaptcha_challenge_field'],
$_POST['recaptcha_response_field']);
if ($captcha_respuesta->is_valid) {
//todo correcto
//hacemos lo que se deba hacer una vez recibido el formulario válido
}else{
//El código de validación de la imagen está mal escrito.
$error_captcha = $captcha_respuesta->error;
}

Hacemos una llamada a la función recaptcha_check_answer() enviando los parámetros comentados y almacenamos el valor devuelto por la función en la variable $captcha_respuesta.

Después, hacemos la comprobación para saber si el atributo $captcha_respuesta->is_valid es true. Con esto, sabremos que el texto introducido de la imagen está validado correctamente y realizamos la función que tengamos dentro del formulario.

En caso de que  $captcha_respuesta->is_valid sea falso, querrá decir que no se ha escrito bien el texto que se mostraba en la imagen. Podemos entonces actualizar la variable $error_captcha para que le indiquemos al usuario el error que ha habido.

El código completo te lo mostramos aquí:

<html>
<head>
<title>Página con formulario protegido por captcha</title>
</head>
<body>
<?
require_once('recaptchalib.php');
//Llaves de la captcha
$captcha_publickey = '6LfC?.';
$captcha_privatekey = '6LfC? ';
$error_captcha=null;
if ($_POST){
$captcha_respuesta = recaptcha_check_answer ($captcha_privatekey,
$_SERVER['REMOTE_ADDR'],
$_POST['recaptcha_challenge_field'],
$_POST['recaptcha_response_field']);
if ($captcha_respuesta->is_valid) {
//todo correcto
//hacemos lo que se deba hacer una vez recibido el formulario válido
echo 'Todo correcto!';
}else{
//El código de validación de la imagen está mal escrito.
echo 'Has escrito mal el texto';
$error_captcha = $captcha_respuesta->error;
}
}
?>
<form action='miejemplo_formulario.php' method='post'>
Nombre: <input type='text' name='nombre' size='30'>
<br>
Edad: <input type='text' name='edad' size='3'>
<br>
<?
//escribimos en la página lo que nos devuelve recaptcha_get_html()
echo recaptcha_get_html($captcha_publickey, $error_captcha);
?>
<br>
<input type='submit' value='Enviar'>
</form>
</body>
</html>

Añadir reCAPTCHA en WordPress

Si utilizas WordPress como CMS, es aún más fácil, pues puedes encontrar plugins que te ayuden a añadir reCAPTCHA de manera automática.

Paso 1. Instalar un plugin de reCAPTCHA

  • Ve a la sección de “Plugins” y haz clic en “Añadir nuevo”.
  • En el buscador, escribe “reCAPTCHA”.
  • Selecciona uno de los disponibles.

Algunas de las opciones más populares son “reCAPTCHA by BestWebSoft” o “Advanced Google reCAPTCHA”.

Paso 2. Configurar el plugin

  • Haz clic en “Activar”.
  • Ve a “Configuración” del plugin.
  • Dentro de la configuración, podrás añadir las claves de Google reCAPTCHA. Si no las tienes, es probable que encuentres un enlace directo para registrarte en el sitio web y obtenerlas.

Paso 3. Insertar plugin

  • Dentro de la configuración, activa la opción para habilitar reCAPTCHA.
  • Guarda los cambios realizados.
  • Pruébalo y verifica que funcione correctamente.

Conclusiones sobre CAPTCHA y reCAPTCHA

En conclusión, disponer de un CAPTCHA nos ayudará a proteger nuestra web contra bots maliciosos y a garantizar una experiencia segura para nuestros usuarios. Y aquí reCAPTCHA es la mejor opción.

Su relación con dominios y hosting web es importante para asegurar la protección integral de nuestro sitio. Al crear una página web o una tienda online, debemos protegerla contra posibles bots o ataques cibernéticos y, gracias a la integración de reCAPTCHA, vamos a prevenir spam y actividades no deseadas.

Además, existen otras medidas de seguridad a tener en cuenta, como añadir un certificado SSL o realizar un backup web, que nos garantizará que nuestro sitio se mantenga seguro y confiable para nuestros clientes.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: