|
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
that is Sys.Service namespace from javascript.
Once the user is authenticated, we can
use the role service to check the user’s role and enable the corresponding UI
elements. To do this, we can use the Load() method of Sys.Services.RoleService
to fetch the logged in user’s role and load into the client memory.
Syntax
Sys.Services.RoleService.load(loadCompletedCallback, failedCallback,
userContext);
loadCompletedCallback
The function that is called when the
load operation has completed. The default is null.
failedCallback
The function that is called if loading
has failed. The default is null.
userContext
User context information that is
passed to the callback functions.
The below code will authenticate the
user and enable the UI elements for the users with admin role.
<script type="text/javascript">
var loggedIn;
var roleProxy;
function pageLoad() {
loggedIn =
Sys.Services.AuthenticationService.get_isLoggedIn();
if(loggedIn)
{
//Enable UI elements for
logged users
}
else
{
//disable UI elements
}
roleProxy =
Sys.Services.RoleService;
}
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(Result,
userContext, Method)
{
alert("Login failed due to
exception: "+Result.get_message()+" on method "+ Method);
}
function onLoginCompleted(Result,
userContext, Method)
{
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";
loadRoles();
}
else
{
alert("Login failed due to
invalid credentials!!");
}
}
function SignOut()
{
Sys.Services.AuthenticationService.logout(null,onLogoutCompleted,null,null);
return false;
}
function
onLogoutCompleted()
{
$get("LoginDIV").style.display
="block";
$get("CommentsDIV").style.display ="none";
alert("Logged
Out!!!");
return false;
}
function loadRoles()
{
roleProxy.load(fnLoadRolesComplete, fnLoadRolesFail, null);
}
function fnLoadRolesComplete(result,
userContext, methodName) {
if
(roleProxy.isUserInRole("ADMIN")) {
//Enable UI controls for admins
$get("AdminPanel").style.display = "block";
} else {
$get("AdminPanel").style.display
= "none";
}
}
function fnLoadRolesFail(error,
userContext, methodName) {
alert(error.get_message());
}
</script>
In the above code,
LoginDIV
- it is the div that contains the control to login.
CommentsDIV - it is the div that contains the control for commenting.
AdminPanel - it is the div that contains the control for admins.
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 which can be
shown to all the user roles (Admin and Publisher). Once the user is successfully
authenticated we need to load the roles of the user by calling the role service.
Thus, we have called the role service from the onLoginCompleted callback
function in the above code. Once the role for the authenticated user is loaded
successfully we can enable the admin panel from fnLoadRolesComplete callback
function.
Since, we are enabling/disabling
controls in JavaScript, it is advisable to check whether the user is
authenticated and user’s role before performing any protected server side
operation. For example, if a page should be accessed only by an admin then it is
important that you should check the user’s role in the page load.
public partial class Admin_Dashboard :
System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
if(!User.IsInRole("ADMIN"))
{
Response.Redirect("NotAuthorized.aspx");
}
}
}
Alternatively, you can also use the
location element to restrict access to a resource from web.config
file.
Download the source attached with this
article to understand it better.
How to use the sample
application?
I have used default aspnetdb in
App_Data folder to store user information. Use the page CreatUser.aspx to create
new user, role and assign a role to user. So, create 2 roles ADMIN and
Publisher. Also, create 2 new userids and associate the role with the
users.
|