SALAMARKESA.com

Alimenta tu cerebro

Integrar reCaptcha V3 con PHP

Explicación y Ejemplo

Un CAPTCHA, acrónimo de “completely automated public Turing test to tell computers and humans apart”, sirve para diferenciar entre un humano y un robot.

¿Por qué?

Porque los humanos somos muy listos y sabemos hacer unos robots muy robotísticos, que actúan como si fuesen humanos, pero mucho más rápidos. Y eso les permite por ejemplo, ir por internet dejando SPAM en los sistemas de comentarios. O probando a acceder a una misma cuenta con un millón de contraseñas diferentes, a veces teniendo suerte y accediendo a una cuenta ajena, etc…

¿Para qué entonces el captcha?

Para eso, para intentar dejar a los robotitos fuera de juego.

¿Cómo?

Pues poniendo un test, que solo un humano sabe resolver. Por ejemplo, poner una palabra muy borrosa al más puro estilo Picasso y que el humano la comprenda y la escriba correctamente si buenamente quiere y puede o no le queda más remedio.

¿Pero qué pasa con eso?

Que es un auténtico coñazo.

Ahora miro las letras, ahora no se ve bien, ahora me aburro.

Ahí entra en juego reCaptcha V3, que mediante el análisis de la interacción del usuario con la web y una potente red neuronal artificial, sabe acertar con gran precisión la probabilidad de que una interacción sea robótica o humana.

¿Cómo puedo añadir reCaptcha a mi web con PHP?

Muy sencillo.

Vamos a ver aquí un ejemplo de cómo yo lo estoy implementando en la salamarkesa para el sistema de comentarios.

Paso 1. Creas tus claves.

Desde aquí: reCaptcha admin

Simplemente pon el dominio de tu web y obtienes dos claves: una pública y una privada.

Paso 2. Coloca este script antes del cierre </head> en tu web.

<script src='https://www.google.com/recaptcha/api.js?render=CLAVE_PUBLICA_AQUI'></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('CLAVE_PUBLICA_AQUI', {action: 'comentario'})
.then(function(token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
});
});
</script>

Naturalmente, poniendo tu clave pública donde dice “CLAVE_PUBLICA_AQUI“, en los dos sitios.

Donde dice “action” yo he puesto “comentario”.

Tú puedes poner lo que quieras, eso sirve para que tengas un control detallado de las acciones que estás filtrando en tu sitio web.

Y bueno, eso es JavaScript.

Primero cargamos la api de reCaptcha desde los servidores de Google.

Y después pedimos que se ejecute el asunto cuando todo esté listo.

Al ejecutarse, estamos almacenando la respuesta en el campo “recaptchaResponse” del formulario con el que trabajamos, en el caso de esta web, el formulario para dejar un comentario al pie del artículo.

Este sería el HTML de nuestro formulario:

<form action="revisar.php" method="post">
<textarea name="comentario"></textarea>
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
<input type="submit" value="Enviar">
</form>

Bien.

Vemos que se envía por método POST y que hemos agregado in input oculto con el id “recaptchaResponse”, para que el código javascript anterior pueda guardar ahí la respuesta de reCaptcha.

Ya solo nos queda la parte de control, que se hará desde PHP en el servidor:

<?php
if($_SERVER['REQUEST_METHOD'] === 'POST'){ 
// Realizamos la petición de control: 
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify'; 
$recaptcha_secret = 'CLAVE_PRIVADA_AQUI'; 
$recaptcha_response = $_POST['recaptcha_response']; 
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response); 
$recaptcha = json_decode($recaptcha); 
// Miramos si se considera humano o robot: 
if($recaptcha->score >= 0.6){
    echo 'Hay un 60% de probabilidad de que seas un humano';
}else{
    echo 'Estás por debajo del 60% de probabilidad de que seas humano, mejor no me fío.';
}

}

Naturalmente, debes poner tu clave privada donde dice “CLAVE_PRIVADA_AQUI“.

Puedes cambiar el 0.6 por otro valor entre 0 y 1.

Cuanto más cerca del uno esté, más restrictivo es el control.

No olvides añadir a tu política de privacidad, que usas el servicio reCaptcha, pues reCaptcha está analizando la interacción del usuario con el sitio, y este debe estar al corriente de ello.

Ocultar el icono de reCaptcha

Por defecto, se muestra un cartelito en tu web con el logo de reCaptcha para informar al usuario. Según las políticas del servicio puedes ocultarlo, por ejemplo con CSS:

.grecaptcha-badge{
display:none !important;
}

Pero debes añadir un mensaje en algún sitio para que al usuario le quede bien clarito que se está usando.

Las camisetas más populares