How to implement a Client-side Ajax Login on Asp.Net MVC (A link to the solution for Asp.Net Webforms is in here)

Question

I'm trying to implement a client-side ajax login on Asp.Net MVC. I used to have this set up just fine on WebForms, but now that I've moved to MVC it's giving me some troubles.

If you'd like a tutorial on Client-side Ajax Login for Asp.Net Webforms, it can be found here -- Easy, A++

Now... for some reason it's not working for Asp.Net MVC.

I used the exact same tutorial as for the Webforms, except when it executes the ssa.login() (equivalently: Sys.Services.AuthenticationService.login()) it's not doing anything.

I have alerts in both the onLoginComplete() function and the onError() function. As well I have an alert before the ssa.login gets called and right after...

function loginHandler() {
    var username = $("#login_UserName").val();
    var password = $("#login_Password").val();
    var isPersistent = $("#login_RememberMe").attr("checked");
    var customInfo = null;
    var redirectUrl = null;
    // Log them in.
    alert("try login");
    ssa.login(username,
                      password,
                      isPersistent,
                      customInfo,
                      redirectUrl,
                      onLoginComplete,
                      onError);
    alert("made it here");
}

The first alert fires but the second one doesn't which means the function is failing.
Here's the function I pulled from Asp.Net Ajax to show you:

function(c, b, a, h, f, d, e, g) {
    this._invoke(this._get_path(), "Login", false, { userName: c, password: b, createPersistentCookie: a }, Function.createDelegate(this, this._onLoginComplete), Function.createDelegate(this, this._onLoginFailed), [c, b, a, h, f, d, e, g]);
}

Anyone have any idea of why it's failing?

Answer 1

You are making this more complicated than it needs to be. All you need to do is call your Account/Login method with the AJAX call. You don't need the complication of the Authentication service, though you probably want to detect whether you are logging in via AJAX and return JSON rather than a View.

function loginHandler() {
    var username = $("#login_UserName").val();
    var password = $("#login_Password").val();
    var isPersistent = $("#login_RememberMe").attr("checked");
    var customInfo = null;
    var redirectUrl = null;
    // Log them in.
    alert("try login");
    $.ajax( {
       url : '<%= Url.Action( "Login", "Account" ) %>',
       type: 'post',
       dataType: 'json',
       data: { username: username,
               password: password,
               isPersistent: isPersistent,
              },
       success: onLoginComplete,
       error: onError
    });
    alert("made it here");  // this will execute before the callback completes...
}