The MicrosoftAjaxApplicationServices.js script file includes a Sys.Services.AuthenticationService.login function that makes an asynchronous HTTP request to the server-side service, passing in the supplied credentials. If the credentials are valid then the user is signed into the site.

Listing 7 shows the code for the attemptLogin and onLoginComplete functions. The attemptLogin function is called when the user clicks the "Log In" button from the login user interface and is responsible for calling the Sys.Services.AuthenticationService.login function. The onLoginComplete function is a callback function that is executed when the browser receives the response from the server-side service. This function is passed a Boolean value indicating whether the credentials were valid or not. If the credentials were valid then the page is reloaded, otherwise the invalidCredentials <div> element is displayed.

Listing 7 - The Sys.Services.AuthenticationService.login function is called when the user clicks the "Log In" button from the login user interface.

function attemptLogin(redirectUrl) {
    var loginUsername = $("#loginUsername"),
        loginPassword = $("#loginPassword"),
        loginRememberMe = $("#loginRememberMe");
 
    Sys.Services.AuthenticationService.login(
            loginUsername.val(),               // username
            loginPassword.val(),               // password
            loginRememberMe.is(":checked"),    // isPersistent
            null,                              // reserved for future use
            redirectUrl,                       // redirectUrl
            onLoginComplete,                   // loginCompleteCallback
            null,                              // failedCallback
            null);                             // userContext
}
 
function onLoginComplete(validCredentials) {
    var invalidCredentials = $("#invalidCredentials"),
        loginPassword = $("#loginPassword");
 
    if (validCredentials === true) {
        window.location.replace(window.location.href);
    }
    else {
        invalidCredentials.show();
        loginPassword.val('');
    }
}

Take a moment to examine the input parameters passed to the Sys.Services.AuthenticationService.login function. The first three parameters - userName, password, and isPersistent - are the three values passed into the server-side service's Login method, and are self-explanatory.

If specified, the redirectUrl parameter indicates the URL the user is redirected to upon successfully logging in.

The loginCompleteCallback parameter specifies the function to call when the response returns from the server, whereas failedCallback is the function to call if the attempted service call fails. Note that the loginCompleteCallback function is executed whether the supplied credentials are valid or not; the failedCallback function is only invoked if there was an error in making the HTTP request to the server-side service or if the service threw an exception.

The userContext parameter can be used to pass information to the loginCompleteCallback or failedCallback functions.

The attemptLogin function accepts a redirectUrl input parameter, which is passed into the Sys.Services.AuthenticationService.login function's redirectUrl input parameter. The net effect is that if a redirectUrl input parameter value is supplied to the attemptLogin function then the user is redirected to the specified URL after successfully signing in. If this parameter value is not provided then the current page the user is visiting is reloaded after sign in. In the demo available for download, the attemptLogin function is called when the user clicks the "Log In" button in the login user interface. This function is called without specifying a redirectUrl input parameter, as Listing 8 shows, which means that after logging in the user will remain on the current page. However, you could modify this script so that the user is redirected to a particular page, such as /Default.aspx, upon sign in.

Listing 8 - The attemptLogin function is called when the "Log In" button is clicked.

$(document).ready(function () {
     ...
  
     $("#loginLogin").click(function () {
         // Reloads the current page on login
        attemptLogin();

        // Redirects the user to the homepage on login
        // attemptLogin('/Default.aspx');  
     });
 });