Los CAPTCHA son un sistema diseñado para distinguir entre los inputs de humanos y máquinas. Habrás visto muchos navegando por sitios web. Son esos elementos que te muestran una imagen y tienes que escribir lo que estas viendo, ya sea un texto numérico o alfanumérico.
Google reCAPTCHA es un servicio gratuito que ayuda a proteger las páginas web del spam y de los posibles hackeos. Se puede integrar fácilmente en nuestro proyecto y nos proporciona una verificación CAPTCHA para distinguir si los datos enviados son de una persona física o por el contrario son de un bot.
Pasos para insertar Google reCAPTCHA en tu sitio web
- Consigue las keys de reCAPTCHA
- Añade el widget del lado del cliente
- Añade la verificación del lado del servidor
- Demo completa
Aquí tienes un esquema de cómo funciona Google reCAPTCHA
Básicamente, la estructura de la construcción de un reCAPTCHA en tu sitio web incluye dos partes:
- La primera parte es añadir widget del lado del cliente utilizando HTML y Javascript.
- La segunda parte es añadir la verificación del lado del servidor a través de la comunicación con el servicio Google reCAPTCHA. Puedes implementarlo en múltiples lenguajes de servidor como C#, Java, PHP, etc.
Registrarnos en Google reCAPTCHA
Si tienes una cuenta de Google, por favor, regístrate para conseguir una key en https://www.google.com/recaptcha/admin.
Haz clic en el botón Registrar y obtendrás 2 keys: la site key y la secret key
- La site key la utilizaremos en el código HTML de nuestro sitio.
- La secret key se utiliza para establecer una comunicación entre nuestro sitio y Google. Asegúrate que esta clave sea 100% secreta.
Añadir el widget del lado del cliente
Una vez tenemos estos datos, podemos añadir reCAPTCHA cuando un usuario envía un formulario.
Pega este fragmento de código antes del cierre del tag head en tu plantilla html:
<head>
...
<script src='https://www.google.com/recaptcha/api.js'></script>
...
</head>
Pega este fragmento de código dentro del form donde quieras que aparezca el reCAPTCHA:
<form>
...
<div class="g-recaptcha" data-sitekey="yoursitekey"></div>
...
</form>
Ahora, comprueba que aparece en la parte del formulario donde has definido previamente. Si has seguido todos los pasos al pie de la letra, te debería aparecer correctamente. Con esto ya hemos completado los pasos 1 y 2 del diagrama que te hemos mostrado antes.
- El servicio de Google reCAPTCHA genera un controlador y genera un componente que puede insertarse en tu sitio.
- Luego, es renderizado y mostrado en el navegador del usuario.
Añadir la verificación del lado del servidor
Después, vamos a codificar la programación del lado del servidor para manejar el input enviado.
Una vez que reCAPTCHA se muestre en el navegador del usuario, un campo llamado g-recaptcha-response nos vendrá también cuando el usuario haga submit en el formulario. Lo que vamos a hacer ahora representaría los pasos del 3 al 8 del diagrama que te hemos mostrado antes.
Una vez que el usuario resuelve el reCAPTCHA y envía el formulario a tu sitio web, el valor del campo g-recaptcha-response llegará hasta el controlador del lado del cliente.
Como te hemos dicho antes, el controlador tendrá acceso al valor de g-recaptcha-response. Ten en cuenta que el controlador puede estar implementado mediante mútilples lenguajes como .NET, J2EE o PHP, por ejemplo.
El controlador tendrá que enviar una petición GET a https://www.google.com/recaptcha/api/siteverify con la secret key y el valor del campo g-recaptcha-response. Un ejemplo de esto sería:
https://www.google.com/recaptcha/api/siteverify?secret=yoursecretkey&response=valueOfG-recaptcha-response
El controlador obtendrá el resultado de la verificación del reCAPTCHA en formato JSON. Tal que así:
{
"success": true|false,
"error-codes": ... //opcional
}
Procesaremos el resultado de la verificación con el controlador:
- Si la verificación falla, mostramos un mensaje al usuario y le alentamos para que lo intente de nuevo
- Si la verificación es correcta, procedemos con el envío del formulario.
Ten en cuenta que para una mejor implementación es necesario realizar pruebas. Si accedemos a reCAPTCHA desde localhost, Google reCAPTCHA siempre nos devolverá un resultado satisfactorio. Por ejemplo http://localhost/nombreapp/xxxx. Pero esta estrategia no incluye http://localhost:puerto/nombreapp.
Demo Completa
Lado del cliente (Vista)
@using (Html.BeginForm("Login",
"Account", FormMethod.Post, new { @class = "form-signin" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@ViewBag.CaptchaMessage
<h2 class="form-signin-heading">Please sign in</h2>
Lado del servidor (Controlador)
public ActionResult Login(User user, bool RememberMe)
{
var response = HttpContext.Request.Form["g-recaptcha-response"];
string secretKey = "your secret key";
var client = new WebClient();
// get captcha verification result
var verificationResultJson = client.DownloadString(string.Format
("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}",
secretKey, response));
// convert json to object
var verificationResult = JsonConvert.DeserializeObject
(verificationResultJson);
// process verification result
if (!verificationResult.Success)
{
if (verificationResult.ErrorCodes.Count <= 0)
{
return View(user);
}
var error = verificationResult.ErrorCodes[0].ToLower();
switch (error)
{
case ("missing-input-secret"):
ViewBag.CaptchaMessage = "The secret parameter is missing.";
break;
case ("invalid-input-secret"):
ViewBag.CaptchaMessage = "The secret parameter is invalid or malformed.";
break;
case ("missing-input-response"):
ViewBag.CaptchaMessage = "The captcha input is missing.";
break;
case ("invalid-input-response"):
ViewBag.CaptchaMessage = "The captcha input is invalid or malformed.";
break;
default:
ViewBag.CaptchaMessage = "Error occurred. Please try again";
break;
}
return View(user);
}
else
{
// proceed form submission
...
}
}
Modelo
public class CaptchaVerificationResult
{
[JsonProperty("success")]
public bool Success { get; set; }
[JsonProperty("error-codes")]
public List ErrorCodes { get; set; }
}
Y este ha sido el artículo en el que trataba explicaros cómo aplicar Google reCAPTCHA en tu sitio web, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Muchas gracias a la autora del código, Andy Feng, por cedernos la publicación del mismo.
Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!