reCAPTCHA v3 es la menos molesta para los usuarios, Google hace un gran trabajo al diferenciar a un Robot de un Humano a través de su comportamiento, por ejemplo, al rastrear el movimiento del Mouse o Ratón y otros factores que Google mantiene en secreto para que los programadores de robots no vulneren el algoritmo.
Estos son los temas que vamos a cubrir:
- Registrar tu dominio en Google reCAPTCHA.
- Crear un formulario para capturar la información en PHP
- Como procesar un formulario con reCAPTCHA V PHP
Registrar tu dominio en Google reCAPTCHA.
Lo primero que debes de hacer es registrar tu dominio en Google reCAPTCHA, para esto ingresas en esta dirección: https://www.google.com/recaptcha/admin/create
Ahí debes ingresar la información en el formulario, como una etiqueta, seleccionar reCAPTCHA V3, los dominios en los que vas a utilizar reCAPTCHA y aceptar algunos términos.
Cuando envíes el formulario de registro, Google te mostrará una pantalla como esta, en donde te proporciona una clave de sitio web y una clave secreta, debes guardar estos valores para usarlos más adelante.
Crear un formulario para capturar la información en PHP
Ahora crearemos un formulario y para simplificarlo únicamente vamos a solicitar un correo electrónico. Crea un archivo con este nombre form.php y agrega este código:
<html>
<head>
<title>reCAPTCHA v3</title>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
crossorigin="anonymous"></script>
<!-- Cambia 6LcZu9QUAAAAACaj-WBiVIQUlr94vfCC8DUpIanS por tu clave de sitio web -->
<script src="https://www.google.com/recaptcha/api.js?render=6LcZu9QUAAAAACaj-WBiVIQUlr94vfCC8DUpIanS"></script>
</head>
<body>
<h1>
Formulario de registro
</h1>
<form id="form" action="form-post.php" method="post">
<input type="email" id="email" name="email">
<input type="submit" value="submit">
</form>
<script>
$('#form').submit(function(event) {
event.preventDefault();
/*Cambia 6LcZu9QUAAAAACaj-WBiVIQUlr94vfCC8DUpIanS por tu clave de sitio web*/
grecaptcha.ready(function() {
grecaptcha.execute('6LcZu9QUAAAAACaj-WBiVIQUlr94vfCC8DUpIanS', {action: 'registro'}).then(function(token) {
$('#form').prepend('<input type="hidden" name="token" value="' + token + '">');
$('#form').prepend('<input type="hidden" name="action" value="registro">');
$('#form').unbind('submit').submit();
});
});
});
</script>
</body>
</html>Voy a destacar 3 partes importantes del código anterior, en la primera agregamos dos scripts, uno es jQuery que nos ayuda a escribir el código de JavaScript que vamos a utilizar y el otro es la librería de reCAPTCHA. En este script debes de cambiar la cadena 6LcZu9QUAAAAACaj-WBiVIQUlr94vfCC8DUpIanS por la clave de sitio web que generaste anteriormente.
En la segunda parte está el formulario, este es un formulario básico de HTML, no hay nada especial que mencionar.
En la tercera parte está el código de JS que se encarga de evaluar si es un humano o un robot. Puedes reutilizar este código en tus formularios, solo debes de cambiar la clave de sitio web, como en la primera parte.
Como procesar un formulario con reCAPTCHA V PHP
Ahora vamos a crear un archivo llamado form-post.php y vamos a ingresar este código:
<?php
// Ingresa tu clave secreta.....
define("RECAPTCHA_V3_SECRET_KEY", 'TU-CLAVE-SECRETA');
$token = $_POST['token'];
$action = $_POST['action'];
// call curl to POST request
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array('secret' => RECAPTCHA_V3_SECRET_KEY, 'response' => $token)));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
$arrResponse = json_decode($response, true);
// verificar la respuesta
if($arrResponse["success"] == '1' && $arrResponse["action"] == $action && $arrResponse["score"] >= 0.5) {
// Si entra aqui, es un humano, puedes procesar el formulario
echo "ok!, eres un humano";
} else {
// Si entra aqui, es un robot....
echo "Lo siento, parece que eres un Robot";
}En el código anterior se recupera la información de reCAPTCHA y se guarda el resultado en la variable, $arrResponse luego podemos consultar que tan seguro esta Google de si es un humano, al consultar la variable $arrResponse["score"], la cual tiene un 0.0 si está seguro de que no es humano y un 1.0 si está totalmente seguro de que si es humano. Por eso vamos a tomar como válido un valor de 0.5 en adelante.
Puedes reutilizar este código, solo debes de cambiar la clave secreta, por la clave que obtuviste cuando te registraste en Google reCAPTCHA.
Para que todo esto funcione debes probarlo en un servidor y con un dominio que hayas registrado en el formulario de registro. Si no tienes acceso a un servidor con un dominio, puedes editar el archivo host de tu computadora para simular que tienes un dominio.
Todo el código mostrado en este artículo, está escrito para ejemplificar como puedes integrar Google reCAPTCHA v3 en tus formularios. Por eso he omitido código muy importante para sistemas en Producción como la validación de entradas de usuario, si utilizas esto en un sistema, debes asegurarte de limpiar todas las entradas de usuario para evitar procesar código dañino.
Me parece que en el JS esta una doble ( ;; ) , creo eso no esta bien…
Gracias, si fue un error mio, pero en este caso la doble ;; es como agregar una line en blanco que no hace nada, pero igualmente no esta bien ponerlo. Ya lo corregi.
Estaba sufriendo para poner esto, por fin pude hacerlo
gracias!