reCAPTCHA v3. olvídate de “No soy un robot”
Google ha presentado el nuevo reCAPTCHA v3, la evolución del método de identificación en la web más popular. Gracias a él millones de páginas web pueden saber que en ella está entrando un ser humano, y no un robot que pueda tener oscuras intenciones. Este CAPTCHA fue creado para poder cribar a aquellos usuarios que funcionaran de una manera mecánica, y poder distinguirlos de meras máquinas. Ahora con esta nueva versión, el método se ha vuelto más inteligente, y necesita de menos interacción por parte del usuario para que la web sepa que no es un proceso automático. Las siglas CAPTCHA quieren decir “Completely Automated Public Turing test to tell Computers and Humans Apart” ("Prueba de Turing pública completamente automatizada para diferenciar a las computadoras y los humanos") un proceso que hasta ahora necesitaba de que superáramos ciertas pruebas, como reconocer objetos, resolver fórmulas matemáticas sencillas, o bien seleccionar con un aspa el texto de “no soy un robot” algo que con la nueva versión se elimina por completo. Ya no tendremos que superar este tipo de pruebas para demostrar que somos una persona en lugar de un robot. Todo gracias a un nuevo algoritmo que es capaz de saber si estamos comportándonos como lo haría una persona, o bien como una máquina. Ahora, si el algoritmo nota algún tipo de anomalía en la actitud de quien está entrando en la web, activará de nuevo estas pruebas. De esta manera se evita ralentizar el proceso de visitar las páginas. En este algoritmo entran variables como el movimiento de nuestro ratón, o los tiempos entre las pulsaciones al ratón que hemos hecho en nuestras visitas a distintas webs, para valorar si somos una persona o una máquina. Google le ha declarado la guerra al bot, y este es uno gran ejemplo.Registre su sitio web y obtenga clave secreta
Lo primero que debe hacer es registrar su sitio web en Google reCAPTCHA para hacerlo, haga clic aquí.
Inicie sesión en su cuenta de Google y cree la aplicación rellenando el formulario. Seleccione el reCAPTCHA v3 y en esa opción de casilla de verificación "No soy un robot".
Credenciales
Una vez enviado, Google le proporcionará la siguiente información.
Clave del sitio
Llave secreta
Integra Google reCAPTCHA en tu sitio web.
Para integrarlo en su sitio web, debe colocarlo tanto en el lado del cliente como en el lado del servidor. En la página HTML del cliente, debe integrar esta línea antes de la etiqueta.
Nota:
Google reCAPTCHA v3 es invisible. No verás una forma de captcha de ningún tipo en tu página web. Necesitas capturar la respuesta de google captcha en tu código JavaScript. Aquí hay un pequeño fragmento.
Ícono reCAPTCHA
Esto generará un formulario y si se da cuenta, en la esquina derecha, verá un ícono reCAPTCHA de Google.
Como no tenemos un estilo de casilla de verificación, debemos capturar la respuesta de Google reCAPTCHA y enviarla al back-end para su verificación.
En el código, en el formulario de envío, obtenemos el token utilizando la función execute () de reCAPTCHA y pasamos el token junto con el correo electrónico y el comentario al código PHP, ASP mediante la función jQuery Ajax.
En el lado del servidor, vamos a usar PHP o ASP por ahora. Entonces, en la solicitud de envío de formulario, verificaremos la variable POST.
Ejecuta el código y rellena el formulario. Si Google no lo reconoce como un spammer, verá un cuadro de alerta que muestra el siguiente mensaje.
Respuesta API
Realice la solicitud para verificar el token de respuesta como con reCAPTCHA v2 o Invisible reCAPTCHA. La respuesta es un objeto JSON:
{
"success": true|false,
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...] // optional
}
ASP
namespace Clase.Object
{
public class ObjCaptcha
{
private string apiAddress = "https://www.google.com/recaptcha/api/siteverify";
private string recaptchaSecret = Properties.Settings.Default.RecaptchaPrivateKey;
public string RecaptchaVerify(string recaptchaToken)
{
string url = $"{apiAddress}?secret={recaptchaSecret}&response={recaptchaToken}";
using (var httpClient = new HttpClient())
{
try
{
string responseString = httpClient.GetStringAsync(url).Result;
return responseString;
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
}
}
public class ResponseToken
{
public DateTime challenge_ts { get; set; }
public float score { get; set; }
public List<string> ErrorCodes { get; set; }
public bool Success { get; set; }
public string hostname { get; set; }
}
}
Llamado ASP
<script src="https://www.google.com/recaptcha/api.js?render=token_key"></script>
<script>
grecaptcha.ready(function () {
grecaptcha.execute(token_key, { action: 'homepage' }).then(function (token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
$.ajax({
type: 'POST',
url: 'Captcha',
data: "{'token':'" + token + "'}",
contentType: 'application/json; utf-8',
dataType: 'json',
success: function (data) {
if (data.d != null || data.d.Estatus != false) {
if (data.d.Estatus != false) {
}
} else {
}
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
});
});
</script>
ObjCaptcha objCaptchas = new ObjCaptcha();
var responseString = objCaptchas.RecaptchaVerify(token);
ResponseToken response = new ResponseToken();
response = Newtonsoft.Json.JsonConvert.DeserializeObject<ResponseToken>(responseString.Result);
PHP
$email;$comment;$captcha;
$email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
$comment = filter_input(INPUT_POST, 'comment', FILTER_SANITIZE_STRING);
$captcha = filter_input(INPUT_POST, 'token', FILTER_SANITIZE_STRING);
if(!$captcha){
echo '<h2>Please check the the captcha form.</h2>';
exit;
}
$secretKey = "-----put your secret here------";
$ip = $_SERVER['REMOTE_ADDR'];
// post request to server
$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = array('secret' => $secretKey, 'response' => $captcha);
$options = array(
'http' => array(
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($data)
)
);
$context = stream_context_create($options);
$response = file_get_contents($url, false, $context);
$responseKeys = json_decode($response,true);
header('Content-type: application/json');
if($responseKeys["success"]) {
echo json_encode(array('success' => 'true'));
} else {
echo json_encode(array('success' => 'false'));
}
Llamado PHP
<html>
<head>
<title>Google recapcha v3 demo - Codeforgeek</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render=put your site key here"></script>
</head>
<body>
<h1>Google reCAPTHA Demo</h1>
<form id="comment_form" action="form.php" method="post" >
<input type="email" name="email" placeholder="Type your email" size="40"><br><br>
<textarea name="comment" rows="8" cols="39"></textarea><br><br>
<input type="submit" name="submit" value="Post comment"><br><br>
</form>
<script>
// when form is submit
$('#comment_form').submit(function() {
// we stoped it
event.preventDefault();
var email = $('#email').val();
var comment = $("#comment").val();
// needs for recaptacha ready
grecaptcha.ready(function() {
// do request for recaptcha token
// response is promise with passed token
grecaptcha.execute('put your site key here', {action: 'create_comment'}).then(function(token) {
// add token to form
$('#comment_form').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
$.post("form.php",{email: email, comment: comment, token: token}, function(result) {
console.log(result);
if(result.success) {
alert('Thanks for posting comment.')
} else {
alert('You are spammer ! Get the @$%K out.')
}
});
});;
});
});
</script>
</body>
</html>
Interpretando la partitura
reCAPTCHA v3 devuelve una puntuación (1.0 es muy probable que sea una buena interacción, 0.0 es muy probable que sea un bot). En función de la puntuación, puede realizar acciones variables en el contexto de su sitio. Cada sitio es diferente, pero a continuación hay algunos ejemplos de cómo los sitios usan la puntuación. Como en los ejemplos a continuación, actúe entre bastidores en lugar de bloquear el tráfico para proteger mejor su sitio.
| Use case | Recomendación |
|---|---|
| homepage | Vea una vista coherente de su tráfico en la consola de administración mientras filtra los raspadores. |
| login | Con puntajes bajos, se requiere autenticación de 2 factores o verificación por correo electrónico para evitar ataques de relleno de credenciales. |
| social | Limite las solicitudes de amigos sin respuesta de usuarios abusivos y envíe comentarios riesgosos a la moderación. |
| e-commerce | Ponga sus ventas reales por delante de los robots e identifique las transacciones de riesgo. |
