How to sign in with "E-Mail" instead of "UserName" in ASP.NET MVC 4 Simple Membership

Question

I am developing an entry level application with ASP.NET MVC 4. The application will have a membership system. I want to use integrated SimpleMembershipProvider because creating a new one will be complex for me. So the users must log in to application with their e-mail adresses instead of user name as in SimpleMembershipProvider. But I couldn't make this change. Is the only way to do this is creating my own membership provider?

Answer 1

Use the email to find the id of the user. pass that user to membership and authenticate the user with that.

you may also want to prevent duplicate emails at the time of registering user to make sure 1 email returns 1 account. the following post will help in this senario:

How does one prevent duplicate email addresses while users modify their email addresses after registration using the default MVC Membership Provider?

Also you may create a unique key in the table for the emails to ensure no duplicate emails will be registered.

Answer 2

In the AccountModels class ( Models.AccountModels ) You have to update field i.e. introduce an email property as the following

 public class RegisterModel
{
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    // Make change here 
    [Required]
    [Display(Name = "Your Email")]
    public string  Email { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }
}

After we got the email then to use email in the login view , first of all change the LoginModel class as the following

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

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

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

And of course , Email will take from user when they register , so making change on the RegisterModel class as the following

Now you have got login and register are updated. Then The actual data which is will eventually store in the database is define in the UserProfile class so , let's add and Email field to it.

    [Table("UserProfile")]
public class UserProfile
{
    [Key]
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
    public int UserId { get; set; }
    public string UserName { get; set; }
    public string Email  { get; set; }
}

Now you are done with update the model. But this will now work yet, because when you click register it will actually add userName and Password and use the pair for authentication. Now let's change it . Navigate to Controllers.AccountController.cs and find the following function and update it. WebSecurity.CreateUserAndAccount(model.Email, model.Password); WebSecurity.Login(model.Email, model.Password);

//
    // POST: /Account/Register

    [HttpPost]
    [AllowAnonymous]
    [ValidateAntiForgeryToken]
    public ActionResult Register(RegisterModel model)
    {
        if (ModelState.IsValid)
        {
            // Attempt to register the user
            try
            {
                WebSecurity.CreateUserAndAccount(model.Email, model.Password);
                WebSecurity.Login(model.Email, model.Password);
                return RedirectToAction("Index", "Home");
            }
            catch (MembershipCreateUserException e)
            {
                ModelState.AddModelError("", ErrorCodeToString(e.StatusCode));
            }
        }

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

And Finally of course , change the Login action as the following.

        //
    // POST: /Account/Login

    [HttpPost]
    [AllowAnonymous]
    [ValidateAntiForgeryToken]
    public ActionResult Login(LoginModel model, string returnUrl)
    {
        if (ModelState.IsValid && WebSecurity.Login(model.Email, model.Password, persistCookie: model.RememberMe))
        {
            return RedirectToLocal(returnUrl);
        }

        // If we got this far, something failed, redisplay form
        ModelState.AddModelError("", "The Email or password provided is incorrect.");
        return View(model);
    }

This should allow you to use email and password as a login pair.

Answer 3

An easy option: in file Models/AccountViewModels.cs, you find many classes containing a field like this:

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

Just for speed change them to:

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

And from your code you know that Email field is actually the username, thus you don't have to change everywhere.