Chimp is ideal for filtering user interface components on the client side
This post will guid in how you implement your server, the key is that you have truly secured your services and data on the server side, as that should be the heart of your security implementation.
I will guid you how to review or authenticating users in Flex through the ChannelSet, and then i will discuss filtering what users are able to see based on their roles or grants.
User must be aythenticated before clip can be used to protect user interface componets. Channelset for accessing blazeds services are used in flex To authenticate user. In the Flex authentication code below a userService remote object is created. The username and password parameters come from a login form and are passed to the authenticate function. On a successful login, the loginResultEvent handler function is called, and post login logic can be invoked.
<mx:AMFChannel id="myamf" uri="http://localhost:8080/spring/messagebroker/amf"/>
<mx:ChannelSet id="channelSet" channels="{[myamf]}"/>
<mx:RemoteObject id="userService" destination="userService" showBusyCursor="true"
channelSet="{channelSet}"/>
<mx:Script>
<![CDATA[
protected function authenticate(username:String, password:String) : void {
var token:AsyncToken = userService.channelSet.login(username, password);
token.addResponder(new ItemResponder(loginResultEvent, loginFaultEvent));
}
private function loginResultEvent(event:ResultEvent, token:AsyncToken):void {
//DO post login stuff
}
]]>
</mx:Script>
Adding Chimp to your project
Begin with Chimp by adding the SWC file to your Flex application. First, download the chimp.swc Google Code. In a standard Flex Builder project, follow these steps to add the file to your project library: file from
- Right click the project name in the Project Explorer view
- Select Properties
- Select Flex Build Path
- Select Library path
- Click Add SWC
- Browse to chimp.swc (see Figure 1)
- Click "Ok"
Next, you need to update your project to keep the metadata used by Chimp. In a standard Flex Builder project, follow these steps to tell the Flex compiler to keep the metadata:
- Right click the project name in the Project Explorer view
- Select Properties
- Select Flex Compiler
- Add the following to the Additional Compiler Arguments (See Figure 2):
-keep-as3-metadata+=Protected
- Click OK
Loading Chimp in a Flex Application
The simplest way to load Chimp before the user interface components is to use the Flex preinitialize event of the application.
private function preintializeHandler(event:Event):void {
Chimp.load(null);
}
Loading users and permissions
Chimp is now added and loaded into the Flex application. Next, the permissions that will be used to determine what the user can see need to be loaded from Spring.
public class UserIdentity {
private String username;
private List roles;
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public List getRoles() {
return roles;
}
public void setRoles(List roles) {
this.roles = roles;
}
}
The UserIdentity object is assembled from the Spring SecurityContextHolder:
public UserIdentity getUserIdentity() {
UserIdentity ui = new UserIdentity();
//set user name
ui.setUsername(userDao.getUser(SecurityContextHolder.getContext().getAuthentication().getName()));
//set string permissions
List<String> perms = new ArrayList<String>();
GrantedAuthority[] gas = SecurityContextHolder.getContext().getAuthentication().getAuthorities();
for(int i=0; i < gas.length; i++) {
perms.add(gas[i].getAuthority());
}
ui.setRoles(perms);
//return user identity object
return ui;
}
After doing this Flex application will call the getUserIdentity() method after successfully authenticating the user:
public var userService:RemoteObject;
private function loginResultEvent(event:ResultEvent, token:AsyncToken):void {
var userIdentityToken:AsyncToken = userService.getUserIdentity();
userIdentityToken.addResponder(new ItemResponder(userIdentityEvent, faultEvent));
}
private function userIdentityEvent(event:ResultEvent, token:AsyncToken):void {
//set user permissions on Chimp
Chimp.updatePerms(event.result.roles);
}
After the user is successfully authenticated, the user identity information is loaded and the permissions are updated on the instance of the Chimp library. This information is used with the metadata to restrict what the user can see in the Flex user interface.
Adding metadata
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="/2006/mxml">
<mx:Metadata>
[Protected(permissions="admin",notInPermissionAction="removeChild",componentId="box2")]
[Protected(permissions="admin",notInPermissionAction="removeFromLayout",componentId="p2")]
[Protected(permissions="admin",inPermissionAction="visible",componentId="adminButton")]
[Protected(permissions="user",inPermissionAction="enable",componentId="updateButton")]
</mx:Metadata>
<mx:Button id="adminButton" label="Admin Button" visible="false" />
<mx:Button id="updateButton" label="Update Button" enabled="false" />
<mx:HBox>
<mx:Panel id="p1" title="Panel 1" backgroundColor="#FF0000"/>
<mx:Panel id="p2" title="Panel 2" backgroundColor="#00FF00"/>
<mx:Panel id="p3" title="Panel 3" backgroundColor="#0000FF"/>
</mx:HBox>
<mx:TabNavigator id="tabNav" width="300" height="300">
<mx:VBox id="box1" width="100%" height="100%" label="Tab One">
<mx:Text text="first tab" />
</mx:VBox>
<mx:VBox id="box2" width="100%" height="100%" label="Tab Two">
<mx:Text text="second tab" />
</mx:VBox>
<mx:VBox id="box3" width="100%" height="100%" label="Tab Three">
<mx:Text text="third tab" />
</mx:VBox>
</mx:TabNavigator>
</mx:VBox>
The line below removes the second box in the tab navigator if the "admin" permission is not found. A removeChild is used because a removeFromLayout does not work with the TabNavigator component. The removeFromLayout option is preferred when it works, because it is less aggressive and has more predictable behavior if the "admin" permissions are provided at a later time.
[Protected(permissions="admin",notInPermissionAction="removeChild",componentId="box2")]
With the following line, if the "admin" permission is not found, the second panel in the HBox is removed from the layout so that it is no longer visible:
[Protected(permissions="admin",notInPermissionAction="removeFromLayout",componentId="p2")]
Below, the adminButton is made visible if the user has the "admin" permission:
[Protected(permissions="admin",inPermissionAction="visible",componentId="adminButton")]
And Finally, the updateButton is enabled if the user has the "user" permission
[Protected(permissions="user",inPermissionAction="enable",componentId="updateButton")]
The protected annotation is fairly simple to use. It has the following properties:
-
permissions: The permissions property expects a comma delimited string of the string permissions to use for the protected operation.
-
componentId: This componentId is the string name of the component that is to be protected. This can be omitted or set to ‘this' for the current component. To protect a child, set the componentId to the ‘id' string of the component.
-
notInPermissionAction: The notInPermissionAction is invoked if the user does not have any of the permissions (use only this or inPermissionAction – not both).
-
inPermissionAction: The inPermissionAction is invoked if the user has any of the permissions (use only this or notInPermissionAction – not both).
The notInPermissionAction and inPermissionAction properties invoke actions on the target component. They can take the following values:
removeChild : Removes the component completely, by calling ‘comp.parent.removeChild().'-
removeFromLayout : Use the includeInLayout property to remove components.
-
invisible: Sets the compl.visible property to false.
-
visible: Sets the comp.visible property to true.
-
disable: Sets the comp.enable property to false.
-
enable: Sets the comp.enable property to true.
As you can see, the Chimp library is straightforward to use inside of a Flex application. Once installed and loaded into the application, it provides a simple and elegant way to manage permissions of the view components.
Source
Read more...
