Cómo utilizar un nombre de usuario en lugar de un email en el login de ASP.net

En este artículo, voy a demostrar cómo cambiar la configuración de identificación de seguridad en ASP.NET que viene con la plantilla MVC por defecto utilizando un simple nombre de usuario en lugar del correo electrónico.

Cambiando el LoginViewModel

Aquí, es necesario cambiar la propiedad Email por Username y también eliminar el atributo [EmailAddress], de lo contrario nuestra vista esperará un correo electrónico en lugar de un nombre de usuario. Concretando, al final debemos tener algo como esto:

public class LoginViewModel
{
    [Required]
    [Display(Name = "Usuario")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [Display(Name = "Recuerdame")]
    public bool RememberMe { get; set; }
}

Cambiando el RegisterViewModel

También tenemos que cambiar el modelo de la vista del registro. Aquí no borraremos nada, pero tendremos que añadir una nueva propiedad llamada UserName, el resultado debería ser algo así:

public class RegisterViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }

    [Required]
    [Display(Name = "Usuario")]
    public string UserName { get; set; }

    [Required]
    [StringLength(100, ErrorMessage =
     "El {0} debe contener al menos {2} caracteres.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirmar password")]
    [Compare("Password", ErrorMessage =
     "El password y la confirmacion del password no coinciden.")]
    public string ConfirmPassword { get; set; }
}

Cambiando el ForgotPasswordViewModel

También necesitamos cambiar el modelo de la vista de Olvidó su contraseña y cambiarlo por UserName, ya que si se echa un vistazo a la acción ForgotPassword en el controlador del Account, se ve que utiliza el correo electrónico para encontrar al usuario. Tendremos campos diferentes para el nombre de usuario y para el correo ahora, lo que obtendremos finalmente es:

public class ForgotPasswordViewModel
{
    [Required]
    [Display(Name = "Usuario")]
    public string UserName { get; set; }
}

Cambiando el ResetPasswordViewModel

Tenemos que hacer lo mismo que antes para la vista del reseteo de contraseñas también, el motivo es el mismo que el caso de olvidé mi contraseña. Nuestra vista modelo debería tener este aspecto:

public class ResetPasswordViewModel
{
    [Required]
    [Display(Name = "Usuario")]
    public string UserName { get; set; }

    [Required]
    [StringLength(100, ErrorMessage =
     "La {0} debe contener al menos {2} caracteres.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirmar password")]
    [Compare("Password", ErrorMessage =
     "El password y la confirmacion del password no coinciden.")]
    public string ConfirmPassword { get; set; }

    public string Code { get; set; }
}

Cambiando la acción del Login

Tan sólo hay que cambiar una línea aquí, la línea que pasa el email para PasswordSignInAsync. Tenemos que cambiar el correo electrónico por el nombre de usuario, así:

var result = await SignInManager.PasswordSignInAsync(
             model.UserName, model.Password, model.RememberMe, shouldLockout: false);

Cambiando la acción del Register

Aquí, tendremos que cambiar la línea que crea un nuevo ApplicationUser y pasa el UserName por el Username en el constructor, en lugar del correo electrónico, de este modo:

var user = new ApplicationUser { UserName = model.UserName, Email = model.Email };

Cambiando la acción del ForgotPassword

Tenemos que cambiar la acción del Olvidó su contraseña de este modo:

var user = await UserManager.FindByNameAsync(model.UserName);

Cambiando la acción del ResetPassword

La última acción que debemos cambiar es la de ResetPassword, tal que así:

var user = await UserManager.FindByNameAsync(model.UserName);

También existen otros métodos como ExternalLoginConfirmation que utilizan el correo electrónico por el nombre de usuario el cual se puede cambiar, pero aquí no lo vamos a utilizar.

Cambiando las vistas del Register, Login, ForgotPassword, ResetPassword

Todo lo que necesitamos hacer ahora es cambiar el correo electrónico en el LabelFor y en el TextBoxFor en estas vistas. Ten en cuenta que tenemos que añadir un nuevo cuadro de texto en el registro de la vista, para coger el nombre de usuario del usuario, además del e-mail:

@Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
@Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })

@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })

Eso es todo lo que necesitamos hacer para cambiar la plantilla predeterminada MVC y utilizar el UserName en lugar del Email.