|
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. The webservice will
in turn use the membership provider and the users are 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.
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;
}
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 call.
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);
}
|