Introducción a recaptcha 3.0

Evita el spam en tus formularios
Introducción a
reCAPTCHA 3.0

Deja que la IA de Google se encargue.
Analiza los movimientos del usuario para generar una puntuación entre 0 y 1.
Cuando la puntuación es más cercana a 1 querrá decir que es un usuario real quien ha
cumplimentado y enviado el formulario.
Por el contrario si la puntuación es más cercana a 0 estaremos ante un posible bot de envío
de spam.
2

Diferencias entre V3.0 y V2.0
reCAPTCHA 3.0
Amigable con el usuario.
Veriﬁcación mediante puzle.
reCAPTCHA 2.0
Amigable con el usuario.
Veriﬁcación mediante puzle.
3

Primeros pasos
Accederemos a la página de google developers y
registramos nuestro dominio para:
● Que no se bloqueen las peticiones.
● Obtener las claves de la API.
https://www.google.com/recaptcha/admin/create
Podemos añadir más de un dominio en el mismo
registro.
4

Keys de la API
Las podemos consultar cuando queramos.
5

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG
2x"
crossorigin="anonymous"
/>
<title>Hola mundo!</title>
</head>
<body>
<h1>Hola mundo!</h1>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"
></script>
</body>
</html>
Plantilla inicial
Fuente: Bootstrap
7

Introducción a jQuery
Fuente: jQuery
JQuery es una librería de JavaScript. Esta librería
de código abierto, simpliﬁca la tarea de
programar en JavaScript.
8

<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<form name=”formulario” id=”formulario”>
<div class="row">
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre">
</div>
<label for="email">e-Mail</label>
<input type="email" name="email" id="email">
</div>
</div>
<div class="row">
<div class="col-12">
<label for="mensaje">Mensaje</label>
<textarea name="mansaje" id="mensaje" cols="30" rows="10"> </textarea>
</div>
</div>
<div class="row">
<button type="submit">Enviar mensaje</button>
</div>
</div>
</form>
</div>
</div>
</div>
Creación del formulario
Sustituiremos la etiqueta
h1 de la plantilla por el
siguiente código:
11

Pero lo primero es lo primero, ¡que botón
más feo!
Añadiremos a la etiqueta <button> las
clases:
● btn
● btn-block
● btn-outline-info
Vista previa del formulario
Muy bonito ¿no?
¡¡¡Pero no vale de nada si cualquier bot
nos puede enviar spam!!!!
13

Programar el formulario
¡Llegó la hora de nuestro querido amigo JavaScript!
Vamos a darle funcionalidad a nuestro formulario
de contacto.
Para eso vamos a crear nuestro propio script justo
antes de cerrar la etiqueta <body>.
En este script crearemos una función dentro del
evento submit del formulario para recoger los
datos y poco a poco la convertiremos en la
validación que buscamos con reCAPTCHA.
<script>
$("#formulario").submit(function (e){
e.preventDefault();
nombre = $('#nombre').val();
email = $('#email').val();
mensaje = $('#mensaje').val();
});
</script>
14

Veriﬁcando el funcionamiento
¿Muy bonita la función no? Pero no hace nada.
Para comprobar que estamos recogiendo la
información de nuestro formulario
correctamente, lo que haremos es mostrar en la
consola esa información, para ello añadiremos
alguna línea a nuestro script, quedando así:
<script>
$("#formulario").submit(function (e){
e.preventDefault();
nombre = $('#nombre').val();
email = $('#email').val();
mensaje = $('#mensaje').val();
console.log("Nombre: "+nombre);
console.log("Email: "+email);
console.log("Mensaje: "+mensaje);
});
</script>
Para comprobar que funciona abriremos la consola
de nuestro navegador y recargamos la página.
15

LLamando a la API
Ahora que nuestro formulario funciona,
es momento de llamar a la API de
Google para que nos diga si quien
envía el formulario es una persona real.
Crearemos una función donde
realizaremos la llamada.
function envioFormulario(e) {
grecaptcha.ready(function () {
grecaptcha.execute('PUBLIC_KEY', {
action: 'submit'
}).then(function (token) {
//Tu codigo al recibir la respuesta
});
});
}
Sustituir PUBLIC_KEY por la clave de sitio
web que obtenemos al registrar el dominio
17

Modiﬁcando el evento submit
Una vez tengamos la función que va a llamar
a la api, tendremos que llamarla cuando se
vaya a enviar el formulario.
Para ello modiﬁcaremos el código de la
página 14, quedando así:
$("#formulario").submit(function (e) {
e.preventDefault();
envioFormulario(e);
});
18

Esquema actual de funcionamiento
19

Preparando el envío
La llamada nos devolverá un token que deberemos procesar
junto con el contenido de los campos del formulario.
Para poder enviar ese token, una vez lo recibamos lo
guardaremos en un campo oculto de nuestro formulario.
//Tu codigo al recibir la respuesta
$('#formulario').prepend('<input type="hidden" name="token" value="' + token +'">');
21

Enviando la información
Una vez tengamos el token
almacenado, realizaremos una
llamada ajax al archivo php
donde procesaremos la
información como haríamos con
un formulario normal.
$.ajax({
type: "POST",
url: "contacto.php",
data: $('#formulario').serialize(),
enctype: "application/json",
dataType: 'json',
success: function (data) {
//Tu codigo al recibir el OK del php
},
error: function (xhr, textStatus, errorThrown) {
console.log(xhr.responseText);
}
});
22

Recibiendo y procesando los
datos
23

Creando contacto.php
En este archivo recibiremos la información
del formulario y del análisis del reCAPTCHA
para que, en función de la puntuación
obtenida hacer lo que necesitemos.
<?php
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$mensaje = $_POST['mensaje'];
$token = $_POST['token'];
24

Volviendo a llamar a la API
Esta vez realizaremos la llamada con
nuestra key privada y el token que
recibimos en la llamada anterior.
Justo después de almacenar los datos
del formulario en variables
llamaremos a la API
$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' => 'PRIVATE_KEY',
'response' => $token)));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$res = curl_exec($ch);
curl_close($ch);
$response = json_decode($res, true);
Sustituir PRIVATE_KEY por la clave secreta
que obtenemos al registrar el dominio
25

En $response obtenemos el resultado del análisis que ha hecho reCAPTCHA en
nuestra web. Podemos ver todo el contenido del array print_r($response)
En este caso analizaremos $response[“success”] y $response[“score”], donde
tendremos el estado (si ha funcionado o dado error) y la puntuación.
Si success es 1 es que todo ha ido bien.
En nuestro caso tomaremos como válidas las puntuaciones superiores a 0.5
En caso de que se cumplan las dos condiciones, almacenaremos la información o
enviaremos un email, lo que queramos hacer con esos datos
Código enla siguiente página ->
26

if (($response["success"] == '1' && $response["score"] >= 0.5)) {
//Hacer lo que sea con la informacion, envio de email, guardado en bbdd, etc
$resultado = array('resultado' => true);
echo json_encode($resultado);
} else {
$resultado = array('resultado' => false);
echo json_encode($resultado);
}
27

Feedback al usuario
Una vez enviemos el formulario
daremos al usuario un mensaje de
estado.
Para ello crearemos el siguiente
elemento justo después de cerrar el div
class=”container”
<div class="row justify-content-center">
<div id="resultado" class="text-center">
</div>
</div>
</div>
29

Feedback al usuario
if (data.resultado) {
$('#resultado').html('<span style="color:green" > Mensaje enviado!!</span>');
} else {
$('#resultado').html('<span style="color:red" > Error al enviar mensaje. </span>');
}
Volvemos a nuestra función en javascript y dentro de
success: function (data){}
añadimos lo siguiente:
30

32
@jesusayus jesusayus jesusayus jesusAG28
¡Deja un comentario y sígueme si te ha gustado!
JesusAyus
Buddychan · Rodayus

Introducción a recaptcha 3.0

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introducción a recaptcha 3.0

Similar to Introducción a recaptcha 3.0 (20)

Introducción a recaptcha 3.0