Seguridad en formularios ASP.NET MVC con Goolge reCAPTCHA

Cuando una aplicación Web permite que un usuario anónimo envíe datos al servidor (formularios POST de autenticación o contacto), la posibilidad de sufrir ataques de Spam y denegación de servicio (DoS) se vuelve realmente preocupante. Según mi experiencia, Google reCAPTCHA es actualmente la mejor solución de seguridad que podemos utilizar en nuestras aplicaciones ASP.NET para evitar este problema.

Como complemento al Post Autenticación básica de usuarios en ASP.NET MVC - Problemas con web hosting en clúster y balanceo de carga, en este caso veremos como integrar un control de validación reCAPTACHA v2 a un formulario de autenticación de usuarios.

Registrar el servicio reCAPTCHA en Goolge

Antes de integrar el control de validación en nuestra aplicación Web ASP.NET, es necesario registrar el servicio reCAPTACHA en Google para obtener las claves (privada y pública) que identificarán de manera única a nuestro control de validación. El proceso de registro sería el siguiente:

1. Acceder al sitio Web de reCAPTACHA en Google https://www.google.com/recaptcha y hacer click en el botón 'Get reCAPTCHA' (o 'My reCAPTCHA'). Es necesario disponer de una cuenta de Google para continuar el proceso de registro.

2. Una vez validados en el sistema (con nuestra cuenta de Google), accederemos a la página 'Registrar un nuevo sitio'. Aquí seleccionamos la opción 'reCAPTACHA v2' y cumplimentaremos los datos que nos solicitan:

3. Por último y después de realizar el registro, obtenemos las claves pública y privada:

Integrando reCAPTCHA en nuestra aplicación ASP.NET MVC

Google nos facilita una guía de integración genérica basada en HTML y Javascript, válida para cualquier página web pero algo engorrosa en cuanto a la codificación: https://developers.google.com/recaptcha/docs/display.

En nuestro caso, simplificaremos el proceso al máximo utilizando la librería para .NET reCAPTCHA.MVC, que 'empaqueta' el control de validación en un HTML Helper válido para aplicaciones .NET MVC4 y MVC5.

La instalación de la librería la haremos a través de NuGet. Para esto abriremos la consola de administración de paquetes NuGet de Visual Studio (Herramientas > Administrador de paquetes NuGet > Consola del Administrador de paquetes), y ejecutamos el siguiente comando:

PM> Install-Package reCAPTCH.MVC

A continuación, registramos las claves reCAPTCHA anteriormente generadas en el archivo de configuración Web.config de la aplicación. Esto lo haremos dentro de la sección <appSettings />.

<appSettings>
   <add key="reCaptchaPublicKey" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
   <add key="reCaptchaPrivateKey" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
</appSettings>

Una vez llegados a este punto, solo quedaría integrar el control de validación reCAPTCHA en la Vista y codificar las acciones necesarias en el Controlador correspondiente. Para ello utilizaremos el sistema de autenticación (Login) desarrollado en el Post Autenticación básica de usuarios en ASP.NET MVC - Problemas con web hosting en clúster y balanceo de carga.

Integración en la Vista

Importamos el espacio de nombres @using reCAPTCHA.MVC, y añadimos el HTML Helper @Html.Recaptcha() con su correspondiente control de mensaje de validación @Html.ValidationMessage().

@using reCAPTCHA.MVC

@{
    ViewBag.Title = "Login";
}

<h2>Login</h2>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-md-offset-4">
            <div class="text-center">
                <div class="text-center">
                    <img class="img-thumbnail" src="~/Images/admin.png" width="128">
                </div>
                <br />
                @using (Html.BeginForm("Login","Admin"))
                {                
                    <input type="text" class="form-control" name="usr" 
                           placeholder="Usuario" required autofocus>
                    <br />
                    <input type="password" class="form-control" name="pwd" 
                           placeholder="Contraseña" required>
                    <br />

                    <div class="text-center">
                       @Html.Recaptcha()
                       @Html.ValidationMessage("ReCaptcha", 
                                   new { @class = "text-danger" })
                       <span id="recaptchaMsg" class="text-danger"></span>
                       <br />
                    </div>

                    <button class="btn btn-lg btn-primary btn-block" type="submit">
                        Iniciar sesión
                    </button>
                    <label class="checkbox pull-left">
                        <input type="checkbox" name="rme" checked="">
                        <label>Remember me</label>
                    </label>                
                }
            </div>
        </div>
    </div>
</div>

Integración en el Controlador

Por último, marcamos la Acción 'Login' del Controlador con el atributo [CaptchaValidator] , y le añadimos el parámetro de entrada bool captchaValid.

        // POST: Admin/Login
        [HttpPost]
        [CaptchaValidator(ErrorMessage = "Validación Captcha incorrecta.", 
                  RequiredMessage = "La validación Captcha es requerida.")]
        public ActionResult Login(string usr, string pwd, string rme, bool captchaValid)
        {
            if (string.IsNullOrEmpty(usr) || string.IsNullOrEmpty(pwd) || !captchaValid)
            {
                return View();
            }
            else
            {
                bool _rememberMe = rme == "on" ? true : false;

                // Valida el usuario con los registrados en la
                // seccion <authentication/> del Web.config
                if (FormsAuthentication.Authenticate(usr, pwd))
                {
                    // Crea la Cookie con el Ticket de autenticación 
                    // para el usuario.
                    FormsAuthentication.SetAuthCookie(usr, _rememberMe);
                    // Redirige a la Accion 'Index'
                    return RedirectToAction("Index");
                }
                else
                {
                    // Si no es un usuario válido, retorna la
                    // Vista de Login.
                    return View();
                }
            }
        }