User Authentication Using ASP.NET Membership Authentication Service and JQuery

Form Authentication provides a great feature to make AJAX calls to membership. This provide added benefit because you can use jQuery and CSS to build nice client side UI and still be able to leverage power of membership providers for user authentications and validations. Today we will implement User Authentication using JQuery and Membership Service (provided with Microsoft AJAX) to AJAXify our login page. Here is a quick look of final result:

 

So, in order to call Membership Authentication Web Service, we need to add some markup in Web.Config file:

<system.web.extensions>

<scripting>

<webServices>

<authenticationService enabled="true" requireSSL="false"/>

</webServices>

</scripting>

</system.web.extensions>

Note: I am using this in my local machine so I do not need SSL but if you are implementing this for your production website and you have SSL certificate installed in your production server for HTTPS support, I would recommend you setting requireSSL to True.

Second, we need to add script manager instance to our page so we can include Microsoft AJAX library on the page.

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

Once this is added, after this code is very straight:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style type="text/css">

#Login

{

font-family:Arial;

font-size:medium;

background-color:lightBlue;

border:solid 2px lightgray;

padding:2px;

width:250px;

 

}

#_txtUsername,#_txtPassword

{

width:240px;

}

.error

{

color:Red;

font-size:medium;

}

</style>

 

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div id="Login">

 

Username: <input id="_txtUsername" type="text" /><br />

Password : <input id="_txtPassword" type="password" /><br />

<input id="Button1" type="button" value="Login" /><br />

<span id="result"></span>

</div>

<script type="text/javascript">

$(document).ready(function() {

var Username = "";

var Password = "";

$('#Button1').click(function() {

Username = $('#_txtUsername').val();

Password = $('#_txtPassword').val();

 

// Syntax for following is Sys.Services.AuthenticationService.login(userName, password, isPersistent, customInfo, redirectUrl, loginCompletedCallback, failedCallback, userContext);

 

 

Sys.Services.AuthenticationService.login(Username, Password, false, null, 'LoginCheck.aspx', CompleteCallBack, null, Username);

 

});

 

function CompleteCallBack(validUser, context, methodName) {

if (validUser == true) {

$('#result').text('Welcome , ' + context);

}

else {

$('#result').text('Login Failed for username, ' + context).addClass('error');

}

}

});

 

 

</script>

</form>

 

</body>

</html>

That's it now in order to check whether we have successfully authenticated user or not I am redirecting user to Login Check page where page is going to print authenticated user's username using Login name server control of asp.net(result once user is authenticated):

Tags: , , ,

AJAX | ASP.NET | jQuery | Membership