|
Constructing Login box
Drag 2 textbox for Username and
Password with a Button control for login click.
<table>
<tr>
<td
style="width: 100px">
UserName
</td>
<td
style="width: 100px">
<asp:TextBox ID="txtUserName"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td
style="width: 100px">
Password
</td>
<td
style="width: 100px">
<asp:TextBox ID="txtPass"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td
style="width: 100px">
</td>
<td
style="width: 100px">
<asp:Button
ID="btnLogin" runat="server" OnClientClick="return OnLogin();" Text="Login"
/></td>
</tr>
</table>
From JavaScript, we need to call the
authentication web service for authentication. It is done by calling the
webservice through the proxy method called login() in AuthenticationService class
which is packed in Sys.Service namespace using javascript.
The syntax of the login method
is,
Sys.Services.AuthenticationService.login(userName, password,
isPersistent, customInfo, redirectUrl, loginCompletedCallback, failedCallback,
userContext);
isPersistent – Specifes the cookie is persistent or non persistent.
customInfo - Reserved for future use. The default is null.
redirectUrl – Redirect URL for successful authentication. null specifies no
redirection.
loginCompletedCallback
– This callback javascript function will be called
once the authentication service returns to client. It is called for both
authentication failure and success.
failedCallback – This callback function will be called if there is any exception
happened on the server while authenticating. Authentication failure will not
call this callback method.
userContext – User context info we are passing for callback function.
When the method is called with argument
values, it calls the webservice login method which will verify the credentials
in the server against the database and set the auth cookie. This webservice will
in turn use the membership provider and the user is checked
against the default database in aspnetdb in App_Data folder.
function OnLogin()
{
var username =
$get("txtUserName");
var password = $get("txtPass");
Sys.Services.AuthenticationService.login(username.value,
password.value,
false,null,null,onLoginCompleted,onLoginFailed,"User Context");
return false;
}
function onLoginFailed()
{
alert("Login failed due to some
exception");
}
function
onLoginCompleted()
{
loggedIn =
Sys.Services.AuthenticationService.get_isLoggedIn();
if(loggedIn)
{
$get("CommentsDIV").style.display
="block";
$get("UserDetails").style.display
="block";
$get("UserName").innerText =
$get("txtUserName").value;
$get("LoginDIV").style.display
="none";
}
else
{
alert("Login failed due to invalid
credentials!!");
}
}
As you can see the above code, we can
use the login completed callback function to enable/disable protected resources
on the page. In our example, it is commenting panel and login box. Since, we are
enabling/disabling controls in JavaScript it is advisable to check whether the
user is authenticated before performing any protected server side operation
which requires authentication.
For logout, we can call the logout
method of AuthenticationService class.
The syntax of this method
is,
Sys.Services.AuthenticationService.logout(redirectUrl,
logoutCompletedCallback, failedCallback, userContext);
logoutCompletedCallback &
failedCallback are callback methods fore respective operations, as the name
suggests.
We can have a hyperlink to call the
logout method similar to below.
function SignOut()
{
Sys.Services.AuthenticationService.logout(null,onLogoutCompleted,null,null);
return false;
}
On Logout completed callback, we can
now disable the elements that requires authentication.
Before authenticating, we
need to register the user or create users in aspnetdb database. Use
CreateUserWizard from login controls to create new users easily. The aspnetdb
database in App_Data folder will be automatically created for the first request
given to the provider for creating new user. Once you create a new user, you can
use the above authentication service for successful authentication.
Callback function
The callback function that is used in
login and logout method can have 3 arguments.
1.
Result à which gives the client
side exception object that substitutes the server exception. To get exception
message, etc.
2.
userContext
à
Usercontext info we passed during server method call.
3.
Method
à
Method that made the server calls.
Hence the above callback method can be
written as,
function onLoginFailed(Result,
userContext, Method)
{
alert("Login failed due to exception:
"+Result.get_message()+" on method "+ Method);
}
|