Login using AJAX and ASP.NET Core

Question

I would like to have login form as PartialView or ViewComponent. User types username and password I want to login using ajax and show possible validation errors, either using jQuery or rerendering the login form on the server. I don't care.

This seems trivial, but are there any existing samples or templates for login using AJAX? I don't want to reinvent the wheel.

Im starting with default Visual Studio Template for ASP.NET Core Web Application with local accounts where login is separate page. It uses bootstrap. Ideally I would like to stick as close as possible to this.

The login post action looks like this:

    [HttpPost]
    [AllowAnonymous]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Login(LoginFormViewModel model, string returnUrl = null)
    {
        ViewData["ReturnUrl"] = returnUrl;
        if (ModelState.IsValid)
        {
            // This doesn't count login failures towards account lockout
            // To enable password failures to trigger account lockout, set lockoutOnFailure: true
            var result = await _signInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, lockoutOnFailure: false);
            if (result.Succeeded)
            {
                _logger.LogInformation(1, "User logged in.");
                return RedirectToLocal(returnUrl);
            }
            if (result.IsLockedOut)
            {
                _logger.LogWarning(2, "User account locked out.");
                return View("Lockout");
            }
            else
            {
                ModelState.AddModelError(string.Empty, "Invalid login attempt.");
            }
        }

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

Ross Ross · Accepted Answer · 2017-01-04T17:15:47

Here is a snippet my code in the account controller for AJAX based login to get you started:

// GET: /Account/LoginAjax
[HttpGet]
[AllowAnonymous]
[RequireHttps]
public IActionResult LoginAjax(string returnUrl = null)
{
    if (!_signInManager.IsSignedIn(User))
    {
        if (Request.Cookies["Identity.External"] != null)
        {
            // TODO: this is a temp solution, see https://github.com/aspnet/Security/pull/980
            // http://stackoverflow.com/questions/38751641/app-redirects-to-account-accessdenied-on-adding-oauth
            // when fixed in Microsoft.AspNetCore.Authentication, remove the whole block
            Response.Cookies.Delete("Identity.External");
        }
    }
    return PartialView("_LoginPartial", new LoginViewModel { RememberMe = true, ReturnUrl = returnUrl });
}

// POST: /Account/LoginAjax
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
[RequireHttps]
public async Task<IActionResult> LoginAjax(LoginViewModel model, string returnUrl = null)
{
    returnObject ret = new returnObject();
    if (ModelState.IsValid)
    {
        // This doesn't count login failures towards account lockout
        // To enable password failures to trigger account lockout, set lockoutOnFailure: true
        var result = await _signInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, lockoutOnFailure: false);
        if (result.Succeeded)
        {
            ret.success = true;
            ret.message = "logged-in";
        }
        else if (result.IsLockedOut)
        {
            ModelState.AddModelError(string.Empty, "This account has been locked out, please try again later.");
        }
        else
        {
            ModelState.AddModelError(string.Empty, "The email address or password supplied are incorrect. Please check your spelling and try again.");
        }
    }
    if (!ret.success)   //login was unsuccessful, return model errors
        ret.message = ModelErorrs(ModelState);

    return Json(ret);
}

public static string ModelErorrs(Microsoft.AspNetCore.Mvc.ModelBinding.ModelStateDictionary modelState)
{
    return string.Join("; ", modelState.Values
        .SelectMany(x => x.Errors)
        .Select(x => x.ErrorMessage));
}

public class returnObject
{
    public bool success { get; set; } = false;
    public string message { get; set; } = "";
    public string action { get; set; } = "";
}

_LoginPartial.chtml:

<form id="formLoginAJAX" asp-controller="Account" asp-action="LoginAjax" asp-route-returnurl="@Model.ReturnUrl" method="post">
......
</form>

Prototype fot client JS:

// dialog form submit handler
$form.submit(function (event) {
    event.preventDefault();                
    if (!$form.valid())
        return; // form is not valid

    // submit validated form via Ajax
    var res = { success: false, message: '' };
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: $form.attr('action'),
        xhrFields: {
            withCredentials: true
        },
        data: $form.serializeObject(),
        beforeSend: function () {
            //disable submit button to prevent double-click                        
        },
        success: function (data) {
            res = data;
        },
        error: function (jqXHR, textStatus, errorThrown) {
            res.message = 'Request failed: ' + errorThrown;
        },
        complete: function () {
            if (res.success) {
                // all good, user is logged-in 
                // do callbacks if needed
                // close dialog
            } else {
                // no luck, show returned errors (res.message) in the summary (".validation-summary")                            
            }                        
        }
    });
});

Login using AJAX and ASP.NET Core

1 Answers