Web Login seguro en ASP.NET MVC 5 (Parte 1)

En este tutorial mostramos cómo crear una aplicación web ASP.NET MVC 5 con registro / inicio de sesión, confirmación de correo electrónico utilizando SMTP Client y Recuperación de contraseña. Al final del tutorial se encuentra el enlace de descarga del código fuente.

Importante: En la parte 1 explicamos como crear todo el esqueleto de la aplicación web hasta la confirmación por correo electrónico. En la parte 2 mostraremos Recuperación de contraseña y reenvío de confirmación por correo electrónico.

Crear una aplicación ASP.NET MVC

Debes tener instalado Visual Studio 2013 o superior, se recomienda usar la última versión community siempre (2017).

Puedes descargar la última versión de Visual Studio aqui: https://www.visualstudio.com/es/downloads/

1. Cree un nuevo proyecto web ASP.NET y seleccione la plantilla MVC.

2. Deje la autenticación predeterminada como "Individual User Accounts".

3. Establezca el proyecto para usar SSL. Si desconoces como hacer este paso, sigue este corto tutorial establecer un proyecto Web MVC para usar SSL.

4. Ejecute la aplicación, haga clic en el enlace Registrar y registre un usuario. En este punto, la única validación en el correo electrónico es con el atributo [EmailAddress].

5. En Server Explorer, vaya a Conexiones de datos \ DefaultConnection \ Tables \ AspNetUsers, haga clic con el botón derecho y seleccione Abrir definición de tabla.

La siguiente imagen muestra el esquema AspNetUsers:

6. Haga clic con el botón derecho en la tabla AspNetUsers y seleccione Mostrar datos de tabla.

En este punto, el correo electrónico no ha sido confirmado.

7. Haga clic en la fila y seleccione eliminar. Agregará este correo electrónico nuevamente en el próximo paso y enviará un correo electrónico de confirmación.

Confirmación de correo electrónico

Es una buena práctica confirmar el correo electrónico de un nuevo registro de usuario para verificar que no se están haciendo pasar por otra persona (es decir, no se han registrado con el correo electrónico de otra persona). Supongamos que tiene un foro de discusión, desea evitar que "bob@example.com" se registre como "joe@contoso.com". Sin la confirmación por correo electrónico, "joe@contoso.com" podría recibir correos electrónicos no deseados de su aplicación. Supongamos que Bob se registró accidentalmente como "bib@example.com" y no lo había notado, no podría usar la recuperación de contraseña porque la aplicación no tiene su correo electrónico correcto. La confirmación por correo electrónico proporciona solo una protección limitada de los bots y no brinda protección contra los spammers determinados, tienen muchos alias de correo electrónico que pueden usar para registrarse.

Por lo general, debemos evitar que los nuevos usuarios publiquen datos en su sitio web antes de que hayan sido confirmados por correo electrónico, un mensaje de texto SMS u otro mecanismo. En las secciones a continuación, habilitaremos la confirmación por correo electrónico y modificaremos el código para evitar que los usuarios recién registrados inicien sesión hasta que se confirme su correo electrónico.

SMTP Client para notificaciones por correo electrónico

Este tutorial muestra cómo agregar notificaciones por correo electrónico usando SMTP.

1. Crear un nueva clase en Models llamada MailSender.cs y pegue la siguiente función.

public async Task<bool> sendMail(string toEmailAddress, string subject, string htmlMessage)
{
    SmtpClient SmtpServer = new SmtpClient("smtp.live.com");
    var mail = new MailMessage();
    mail.From = new MailAddress("TuDireccion@hotmail.com");
    mail.To.Add(toEmailAddress);
    mail.Subject = subject;
    mail.IsBodyHtml = true;
    mail.Body = htmlMessage;
    SmtpServer.Port = 587;
    SmtpServer.UseDefaultCredentials = false;
    SmtpServer.Credentials = new System.Net.NetworkCredential("TuDireccion@hotmail.com", "Contraseña");
    SmtpServer.EnableSsl = true;

    try
    {
      await Task.Run(() => SmtpServer.Send(mail));
      return true;
    }
    catch (Exception) {return false;}
}

2. Localizar el archivo IdentityConfig.cs en App_Start y modificar la clase EmailService de la siguiente manera:

public class EmailService : IIdentityMessageService
{
  public async Task SendAsync(IdentityMessage message)
  {
    // Plug in your email service here to send an email.
    await EnviarCorreoAsync(message);            
  }

  private async Task EnviarCorreoAsync(IdentityMessage message)
  {
    MailSender ms = new MailSender();

    if (await ms.sendMail(message.Destination, message.Subject, message.Body))
        Console.WriteLine("Email enviado correctamente");
    else
        Console.WriteLine("Error al enviar Email");

    await Task.Delay(1000);
  }
}

De esta manera el envío de correo será asincrónico.

Advertencia: Nunca almacenes datos sensitivos en el código fuente, es mejor guardarlas en el archivo web.config y recuperar el valor usando: ConfigurationManager.AppSettings["cuentaDeCorreo"].

Habilitar confirmación de correo electrónico en el controlador Account

1. Modificar la función Register de la siguiente manera:

// POST: /Account/Register
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task Register(RegisterViewModel model)
{
  if (ModelState.IsValid)
  {
    var user = new ApplicationUser { UserName = model.Email, Email = model.Email };
    var result = await UserManager.CreateAsync(user, model.Password);
    if (result.Succeeded)
    {
      //Comente la siguiente línea para evitar el inicio de sesión hasta que la cuenta sea confirmada.
      //await SignInManager.SignInAsync(user, isPersistent:false, rememberBrowser:false);

      string code = await UserManager.GenerateEmailConfirmationTokenAsync(user.Id);
      var callbackUrl = Url.Action("ConfirmEmail", "Account", 
         new { userId = user.Id, code = code }, protocol: Request.Url.Scheme);
      await UserManager.SendEmailAsync(user.Id, 
         "Confirmación de cuenta", "Por favor confirme su cuenta dando click <a href=\""
                       + callbackUrl + "\">aquí</a>");

      ViewBag.Message = "Revise su correo y confirme la cuenta, debe ser cofirmada "
                         + "antes de iniciar sesión.";

      return View("Info");
      //return RedirectToAction("Index", "Home");
    }
    AddErrors(result);
  }

  // If we got this far, something failed, redisplay form
  return View(model);
}

Al comentar el método SignInAsync, el usuario no iniciará sesión con el registro. ViewBag.Message se usa para mostrar las instrucciones de confirmación.

2. Cree un archivo Views \ Shared \ Info.cshtml y agregue el siguiente código:

@{
   ViewBag.Title = "Info";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

3. Agregue el atributo Autorizar al método Contact del controlador Home. Puede hacer clic en el enlace Contact para verificar que los usuarios anónimos no tienen acceso y que los usuarios autenticados sí tienen acceso.

[Authorize]
public ActionResult Contact()
{
   ViewBag.Message = "Your contact page.";

   return View();
}

4. También debe actualizar el método HttpPost Login:

// POST: /Account/Login
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task Login(LoginViewModel model, string returnUrl)
{
    if (!ModelState.IsValid)
    {
        return View(model);
    }

    // Requerir que el usuario confirme el correo antes de iniciar sesión.
    var user = await UserManager.FindByNameAsync(model.Email);
    if (user != null)
    {
       if (!await UserManager.IsEmailConfirmedAsync(user.Id))
       {
          ViewBag.errorMessage = "Debe confirmar el correo antes de iniciar sesión.";
          return View("Error");
       }
    }
    
    ...
}

Nota: los puntos suspensivos (...) fueron puestos a propósito para enfatizar que el código restante no fue modificado.

5. Actualice la vista Views \ Shared \ Error.cshtml para mostrar el mensaje de error:

@model System.Web.Mvc.HandleErrorInfo

@{
    ViewBag.Title = "Error";
}

<h1 class="text-danger">Error.</h1>
@{
   if (String.IsNullOrEmpty(ViewBag.errorMessage))
   {
      <h2 class="text-danger">An error occurred while processing your request.</h2>
   }
   else
   {
      <h2 class="text-danger">@ViewBag.errorMessage</h2>
   }
}

6. Elimine todas las cuentas en la tabla AspNetUsers que contengan el correo electrónico con el que desea probar.

7. Ejecute la aplicación y verifique que no puede iniciar sesión (danto clic al enlace Contact) hasta que haya confirmado su dirección de correo electrónico. Una vez que se registre y confirme su dirección de correo electrónico, haga clic en el enlace de Contacto.

Ejemplo de Registro:

Pantalla de Información del registro enviado:

El correo que recibirá será similar al siguiente:

Al presionar clic en el enlace de confirmación abrirá una ventana nueva en el navegador, al terminar de cargar mostrará un mensaje diciendo que ha confirmado correctamente. Ya puede iniciar sesión.

Código fuente de la parte 1 de este tutorial (sin recuperación de contraseña ni reenvío de confirmación de correo electrónico):

http://usheethe.com/14120377/webloginparte1

Parte 2 (Final) de este tutorial:

Ir a la parte 2