Enable Security in a Fusion Web Application

You can easily install the schema and connect to the database, and then create an application and projects in which to organize your application files. Then work in JDeveloper's IDE to create the business services for your application.

Install the Schema: Download the schema zip file from OTN and install it. The cue cards use tables that are part of the Fusion Order Demo (FOD) schema.

Create a New Application: Use the Create Application wizard to create an application and projects for the EJB Components model and the user interface portions of the application.

Create a Database Connection: Use the Create Database Connection dialog to create a connection to the schema.

Create Oracle ADF Business Components: Use the Create Entities from Tables wizard to create the model layer for the application.

Create a Task Flow: Use the diagrammer, Component Palette and Property Inspector to create an ADF task flow.

Create a Page Template: Use the Create JSF Page Template dialog to begin creating a template for all the pages in the application.

Create JSF Pages: Use the Create JSF Page dialog to create the starter pages for the application.

Enable ADF Security: Use the Configure ADF Security wizard to enable security in the application.

Define Users and Roles: Use the jazn-data.xml overview editor to define application roles and users.

Define ADF Security Policies: Use the ADF Policies page in the editor to define security policies for the application.

Add a Login Link and User Information: Use the Expression Builder to add login links to the page.

Hide Menu Items and Page Components: Add conditional logic to the application, and test run it.

Install the Schema

1. Download the schema zip file from OTN. If you created the schema previously, go to the next cue card.
2. Unzip the file to a convenient location (for example, c:\temp).
3. From the File menu, choose Open . Open the workspace c:\temp\Infrastructure\Infrastructure.jws.
4. If you are prompted to migrate the project, click Yes to confirm, then click OK.
5. In the Application Navigator, expand the MasterBuildScript project. Under Resources double-click build.properties to open it in the editor.
6. Set the appropriate values in the build.properties file ( jdeveloper.home, and all the jdbc.* and db.* settings). Keep all other properties set to their default values. The demo user must be named FOD.
   The relevant settings are:
   jdeveloper.home             The /jdeveloper directory where you have JDeveloper installed, for example, c:/JDeveloper_11/jdeveloper/
   jdbc.urlBase                    Base URL for your database, for example, jdbc:oracle:thin:@localhost
   jdbc.port                         Port number for your database, for example, 1521
   jdbc.sid                           Database System Identifier, for example, XE or ORCL
   db.adminUser                  Database user with admin privileges, for example, system
   db.demoUser.tablespace  Tablespace name where the FOD user will be installed, for example, USERS
7. In the MasterBuildScript project, select the build.xml file.
8. In the Structure window, right-click the refreshSchema target and choose Run Target "refreshSchema" .
9. When prompted, enter the password for the database user with admin privileges.
   

   In the IDE

   After running the Ant task, you should see a build successful message in the JDeveloper Log window.   [ tell me more...]

   
   
   

Create a New Application

1. Open the Create Application wizard [ File > New > General > Applications > Application] .
2. Enter the application name SecureApplication to follow along with the example.
3. In the A pplication Package Prefix field, enter oracle.
4. Select Fusion Web Application (ADF) from the Applica tion Template list, and click Finish .
   

   Application Templates

   Application templates provide you with a quick way to create the project structure for standard applications with the appropriate combination of technologies already specified. The new application created from the template appears in the Application Navigator already partitioned into tiered projects, with the associated technology scopes set in each project.   [ tell me more...]

   
   
   
5. In the Application Navigator, expand the Application Resources panel to see where resources for this application are displayed.
   

   In the IDE

   The application template that you used for your application partitions your application into two projects: Model and ViewController. In the Application Navigator, projects are displayed as the top level in the hierarchy. The Application Navigator should now look like this:   [ tell me more...]

   
   
   

Create a Database Connection

1. Open the Create Database Connection dialog [ File > New > General > Connections > Database Connection] .
2. Select Application Resources if it is not selected as the Create Connection In option.
3. Enter a name for the connection, select the connection type, and enter the username and password. To follow along with this example, use FOD for the connection name and  fod for the username.
4. Click Test Connection to confirm that you can connect.
5. Click OK if the connection was successful.
6. In the Application Navigator, expand the Connections and Database nodes in the Application Resources panel to see the database objects.
   

   In the IDE

   The database connection is now included as a resource for your application.   [ tell me more...]

   
   
   

Create Oracle ADF Business Components

1. In the Application Navigator, select the Model project and launch the Create Business Components from Tables wizard [ File > New > Business Tier > ADF Business Components > Business Components from Tables] .
2. In the Initialize Business Components Project dialog which opens before the wizard, confirm that the database connection you created (for example, FOD) is the current selection and click OK.
3. On step 1 of the Business Components from Tables wizard, Entity Objects, click Query to populate the A vailable list.
4. Select two tables: PRODUCTS_BASE and WAREHOUSE_STOCK_LEVELS, from the A vailable list and shuttle them to the Selec ted list to create default business components based on them. Then click Next .
5. On step 2, Updatable View Objects, select both entity objects from the A vailable list and shuttle them to the Selec ted list. Then click Next .
6. Click Next to skip step 3, Read-Only View Objects, which aren't needed.
7. On step 4, Application Module, change the application module name to ProductsModule. Then click Finish .
   

   ADF Business Components

   The Create Business Components from Tables wizard does not create a user interface, nor does it determine other application logic such as control flow. It just provides a representation of, and access to, data, and implements business logic.  [ tell me more...]

   
   
   
8. Click Save All to save your work.
   

   In the IDE

   After completing the Create Business Components from Tables wizard, the Model project in the Application Navigator should look like this:  [ tell me more...]

   
   
   

Create a Task Flow

1. In the Application Navigator, expand the ViewController project, Web Content and Page Flows folders, and double-click adfc-config.xml to open it in the diagrammer.
   

   ADF Task Flows and Page Flows

   By using a task flow diagram you can plan out the pages in your application and define the navigation rules for users to navigate between the pages.   [ tell me more...]

   
   
   
2. In the Component Palette, ADF Task Flow page, Components panel, Control Flow section, click Wildcard Control Flow Rule then drag and drop it on the diagram to add a control flow case icon.
3. In the Components panel, Activities section, click View then drag and drop it on the diagram to add a view activity to represent your first application page. Change the view name to welcome.
4. Drag and drop two additional View components on the diagram to add the second and third view activities. Change the view names to products and stock.
5. In the Component Palette, Control Flow section, click Control Flow Case. Then in the diagram, click on the wildcard control flow rule icon and then the welcome view icon. Enter welcome for the outcome label.
6. Click Control Flow Case again. Then in the diagram, click on the wildcard control flow rule icon and then the products view icon. Enter products for the outcome label.
7. Click Control Flow Case again. Then in the diagram, click on the wildcard control flow rule icon and then the stock view icon. Enter stock for the outcome label.
   

   In the IDE

   The task flow contains three view activities: welcome, products and stock, and three control flow cases. The first activity you dropped is the default, as indicated by the green halo or circle. Currently the task flow does not do anything: the ! icon on each view activity indicates that the view activity is not bound to any page. Later you will tie a page to each view activity, and add navigation.   [ tell me more...]

   
   
   

Create a Page Template

1. In the Application Navigator, select the ViewController project and open the Create JSF Page Template dialog [ File > New > Web Tier > JSF > JSF Page Template] .
2. Enter productTemplate.jspx in the File Name field.
3. Select Use a Quick Start Layout . Then click B rowse .
4. In the Component Gallery, select the Two Column category, the fourth type, and the sixth layout, Two Column Left, Header (Scrolled) with locks in the top and left facets and no stretching. Then click OK.
   

   Quick Start Layout

   ADF Faces provides a number of components that you can use to define the overall template layout of the page. JDeveloper includes pre-defined page layouts that use these layout components to provide you with a quick and easy way to correctly determine the template layout.  [ tell me more...]

   
   
   
5. With the Facet Definitions tab in front, click to add a facet. Enter main_content in the Name field. Then click OK.
6. In the Component Palette, ADF Faces page, Layout panel, drag Panel Group Layout and drop it on the top facet of the template, in the visual editor.
   

   Designing the User Interface

   To create the user interface, you add ADF Faces components to your pages.   [ tell me more...]

   
   
   
7. In the Property Inspector, Common section, select vertical from the Layout dropdown list. Expand the Style and Theme section, select the Background tab, and select Black from the Color dropdown list.
8. In the Component Palette, Common Components panel, drag and drop Output Text into the panel group layout you just added.
9. In the Property Inspector, enter Product Information as the Value. Expand the Style section, select the Text tab, and select White from the Color dropdown list, medium from the Size dropdown list, and bold from the Bold dropdown list.
10. In the Component Palette, ADF Faces page, Layout panel, drag Panel Group Layout and drop it on the start facet of the template.
11. In the Property Inspector, Common section, select vertical from the Layout dropdown list. Expand the Style section, select the Background tab, and select ActiveBorder from the Color dropdown list.
12. In the Component Palette, drag and drop Link into the panel group layout in the start facet. In the Property Inspector, enter welcome as the Text and the Action property fields.
13. Drop two additional Link components into the panel group layout in the start facet. Enter products as the Text and Action property of the first, and stock as the Text and Action property of the second link.
14. In the visual editor, click the blank area next to the start facet, below the top facet. (Above the editor tabs in the editor crumbs, you should see that you have selected the panel group layout within the center facet.)
15. In the Component Palette, Common Components panel, drag and drop Facet Ref into the panel group layout in the center facet, where you will add the custom content for each page. Choose main_content from the dropdown list. Click OK.
16. Click Save All to save your work.
    

    In the IDE

    When you complete the steps, the page template should look similar to this in the visual editor:  [ tell me more...]

    
    
    

Create JSF Pages

1. Click the adfc-config.xml tab to bring the diagram to the front, then double-click the welcome view icon to open the Create JSF Page dialog.
2. Accept the file name welcome.jspx. Under Initial Page Layout and Content, select Page Template . Then select productTemplate and click OK.
3. In the Component Palette, expand the Common Components panel. Drag Output Formatted and drop it into the main_content facet on the page.
4. In the Property Inspector, select Expression Builder from the Value context menu. Enter the following in the Expression field and click OK:
   <p> Please log in to get started. Valid users are:</p><ul><li><b>dfaviet</b> (customer)</li><li><b>sking</b> (staff)</li><li><b>achen</b> (supplier)</li></ul> <p>The password for all users is welcome1.</p>
5. Click the adfc-config.xml tab to bring the diagram to the front, then double-click the products view icon to open the Create JSF Page dialog. Under Initial Page Layout and Content, select Page Template . Then select productTemplate and click OK.
6. In the Application Navigator, expand the Data Controls panel and the ProductsModuleDataControl node. Drag and drop the ProductsBaseView1 node onto the main_content facet in the visual editor.
   

   Creating a Browse Page

   The role of the browse page is to allow the user to view and navigate the data objects, one at a time. You will add databound components to the products.jspx page to create a read-only form. At runtime, the products are shown one at a time.  [ tell me more...]

   
   
   
7. From the Create context menu, choose Form ADF Re ad-only Form .
8. In the Edit Form Fields dialog, select all the fields except the following: ProductName, ProductStatus, ListPrice, and CostPrice. Then click Delete.
9. Select I nclude Navigation Controls , and click OK.
10. Click the adfc-config.xml tab to bring the diagram to the front, then double-click the stock view icon to open the Create JSF Page dialog. Under Initial Page Layout and Content, select Page Template . Then select productTemplate and click OK.
11. From the Data Controls panel, drag and drop the ProductsBaseView1 node onto the main_content facet in the visual editor. From the Create context menu, choose Navigation ADF N avigation List . Select ProductName as the display attribute and click OK.
12. In the Data Controls panel, expand ProductsBaseView1, scroll down, and select WarehouseStockLevelsView2. Drag it into the Panel Header - Details box on the page and select Graph from the Create menu.
13. In the Component Gallery, select Bar, and click OK.
    

    Adding a Graph to the Page

    Graph is one of many data visualization components available in JDeveloper. In addition to Graph, data visualization components include Gauge, Gantt chart, Geographic Map, and Pivot Table. You can choose the type of graph you want to create from the Component Gallery.   [ tell me more...]

    
    
    
14. In the Create Bar Graph dialog, drag QuantityOnHand from the A vailable list to the B ars field. Drag WarehouseId from the A vailable list to the X Axis field. Then click OK.
15. Click Save All to save your work.
16. In the editor window, click the adfc-config.xml tab to bring the diagram forward. Right-click the welcome page icon and choose R un .
    

    In the IDE

    The stock.jspx page, the last page you updated, should look similar to this page in the visual editor:  [ tell me more...]

    
    
    

Enable ADF Security

1. Open the Configure ADF Security wizard [ Application > Secure > Configure ADF Security] .
2. On Step 1, select ADF Authentication and Authorization, then click Next .
   

   Authentication and Authorization

   Adding authentication means that users must be authenticated (usually by a login form) before they can access the application. Authorization determines which parts of an application users can access once they are in the application.   [ tell me more...]

   
   
   
3. On Step 2, select F orm-Based Authentication and Generate Default Pages . Then click Next .
4. Click Next to accept the defaults in the remaining step, then click Finish . Click OK in the message prompt.
   

   In the IDE

   After you run the Configure ADF Security wizard with the default ADF Authentication and Authorization option selected in the ADF Security page, you will have:  [ tell me more...]

   
   
   

Define Users and Roles

1. From the Application menu, choose Secure Application Roles .
2. In the Application Roles page of the overview editor for jazn-data.xml, click to the right of Roles three times to add three application roles. Enter customer, staff and supplier as the names of the three new roles.
   

   Application and Enterprise Roles

   In the jazn-data.xml overview editor you can create both application and enterprise roles.   [ tell me more...]

   
   
   
3. Click the Users tab, then click to the right of Users to add a new user. Enter dfaviet as the name and welcome1 as the password. Click to the right of Assigned Roles and choose Assign Application Role. Select customer from the Select Roles dialog and click OK.
4. Click to the right of Users again. Enter sking as the name and welcome1 as the password. Click to the right of Assigned Roles and choose Assign Application Role. Select staff from the Select Role dialog and click OK.
5. Repeat the previous step to create a third user. Enter achen as the name and welcome1 as the password. Select supplier as the application role.
   

   In the IDE

   The Users page of the jazn-data.xml overview editor should now look like this:   [ tell me more...]

   
   
   

Define ADF Security Policies

1. From the Application menu, choose Secure ADF Policies .
2. In the overview editor for jazn-data.xml, click the Web Pages tab.
3. In the Page Definition list, select products, then click to the right of Granted to Roles. Select authenticated-role and click OK.
   

   Granting Access to Application Resources

   It is a common requirement that some web pages be available to all users, regardless of their specific access privileges. For example, the home or welcome page should be seen by all visitors to the site, while a corporate site should be available only to those who have identified themselves through authentication.  [ tell me more...]

   
   
   
4. In the Page Definition list, select stock, then click to the right of Granted to Roles. Select supplier and click OK.
   

   In the IDE

   The ADF Security Policies page should now look like this:   [ tell me more...]

   
   
   

Add a Login Link and User Information

1. In the Application Navigator, expand ViewController and Web Content, and double-click productTemplate.jspx to open it in the visual editor.
2. In the Component Palette, ADF Faces page, Layout panel, drag Panel Group Layout and drop it below the Product Information title in the visual editor. In the Property Inspector, select horizontal from the Layout dropdown list.
3. In the Component Palette, Common Components panel, drag and drop Output Text into the panel group layout you just added.
4. In the Property Inspector, select Expression Builder from the Rendered context menu. In the Expression builder, expand ADF Bindings and securityContext and select authenticated. Confirm that #{securityContext.authenticated} is the expression and click OK.
5. In the Property Inspector, select Expression Builder from the Value context menu. In the Expression field, enter Welcome followed by a space. Expand ADF Bindings and securityContext and select userName. Confirm that Welcome #{securityContext.userName} is the expression and click OK.
6. Expand the Style section, select the Text tab, and select White from the Color dropdown list, small from the Size dropdown list, and bold from the Bold dropdown list.
7. From the Component Palette, drag and drop Image to the right of the output text you just modified. (You should see the target box Panel Group Layout - horizontal.) In the Insert Image dialog, click the Source dropdown arrow (on the right) and then click Edit on the context menu. Browse to jdev_homejdeveloperideliboicons.jaroraclejavatoolsicons, select key.png then click OK. Click Yes to copy the image to your project's document root, then click Save to save it, then click OK.
8. In the Property Inspector of the image component, select Edit from the Source context menu. Browse to jdev_homejdeveloperideliboicons.jaroraclejavatoolsicons, select listLockIcon.png and click OK, then click Yes and Save to copy the image into your project. Then enter #{securityContext.authenticated ? "/listLockIcon.png" : "/key.png"} in the Source field of the Property Inspector.
   

   Handling Login and Logout

   The conditional expression entered for the image sets the image to show a different icon depending on whether you are authenticated (logged in) or not. You selected the image source file twice to copy both image files into your project.  [ tell me more...]

   
   
   
9. In the Structure window, select the af:image component you added in the previous step. From the Component Palette, drag and drop Go Link below the af:image component in the Structure window so that it appears to the right of the image in the page. In the Property Inspector, enter #{securityContext.authenticated ? "Logout" : "Login"} in the Text field. Enter the following in the Destination field:
   #{securityContext.authenticated ? "/adfAuthentication?logout=true&end_url=/faces/welcome.jspx"
: "/adfAuthentication?success_url=/faces/products.jspx"}
10. Expand the Style section, select the Text tab, and select White from the Color dropdown list, small from the Size dropdown list, and bold from the Bold dropdown list.
11. In the editor window, click the adfc-config.xml tab to bring the diagram forward. Right-click the welcome page icon and choose R un .
    

    In the IDE

    The productTemplate.jspx page now looks similar to this in the visual editor:   [ tell me more...]

    
    
    

Hide Menu Items and Page Components

1. Click the products.jspx tab to bring the page to the front in the editor window, and select the label for the Cost Price field.
2. In the Property Inspector, confirm that the Panel Label and Message component is shown, then select Expression Builder from the Rendered context menu. Enter #{securityContext.userInRole['staff']} in the Expression field and click OK.
3. In the editor window, click the productTemplate.jspx tab to bring the page to the front, and select the products link on the left.
4. In the Property Inspector, select Expression Builder from the Rendered context menu. Enter #{securityContext.authenticated} in the Expression field and click OK.
   

   Using Expressions for Rendered Properties

   Menu items and page components are hidden in this application through the use of the following three expressions:   [ tell me more...]

   
   
   
5. Select the stock link in the page, and select Expression Builder from the Rendered context menu. Enter #{securityContext.regionViewable['oracle.view.pageDefs.stockPageDef']} in the Expression field and click OK.
6. In the editor window, click the adfc-config.xml tab to bring the diagram forward. Right-click the welcome page icon and choose R un .
   

   In the IDE

   The welcome.jspx page should now look like this in your browser before you log in:   [ tell me more...]

   
   
   

Copyright © 1997, 2009, Oracle. All rights reserved.