Prerequisites
In order to understand the content of this lesson, make sure you watched the following lessons:
Introduction
Granting access to protected resources is a key aspect of many Web applications. From an interface point of view, you need to define a place for users to insert and validate their credentials. This lesson shows you how to model the user login and logout. You will learn how you can personalize the content of a page depending on which user is currently logged in. This lesson does not cover the model of the "Login" and "Logout" Action Definitions. Please refer to the "Access control & Personalization: Action Definition" online lesson.
The "Login" Pattern
The "Login" is the design pattern by which a user is granted access to the protected resources of an application; this is normally done by validating the user’s identity through the submission of credentials, such as "Username" and "Password".
The IFML Model representing this feature is composed of a "Page" containing the form where the user enters credentials, and the "Action" that executes the "Login". The "Form" component usually has two fields, one for the "Username" and the other for the "Password". Optionally you can add a third field to save the user credentials, as the "Username" and "Password" that are stored inside cookies. The "Login" action receives the user credentials through the form’s "Submit" button, represented by the unique "Navigation Flow". If the action execution ends successfully, then the user jumps to his home page; otherwise an error message is shown to the user.
To learn more about the "Action Definition", review the "Access control & Personalization: Action Definition" online lesson.
Starting from this basic model, you can extend the Login Pattern with more details; for example, you can track the number of login attempts and then block the login after three tries, or you can show the user the password recovery option.
How to Model the "Login" Pattern
The project we are using is the "CRM" project, which now contains three protected "Site Views": "Administrator", "Sales Manager" and "Administrative Officer", and one public "Site View", named "Login". The project also contains the "Login" and "Logout" action definition in the dedicated "Module Definitions View" named "Action Definitions".
Let’s open the "Login" site view of the project and start adding a page to it. Select the "Page" from the "Containers" section of the toolbar and click in the "Site View" to add it. Type a name for the Page, such as "Login". Be sure that your page is the first one to be served when the user accesses the "Site View". An option is to make it "Home" Page: select the Page and move to the Properties View, then check the "Home" property.
To show the login form to the user, let’s use a "Form" component. Select the "Form" view component from the "View Components" section of the toolbar. Click on the Page to add it and type a name for it, such as "Please Login".
Let's now define the form structure, adding the fields for the user credentials. Select the "Form" Component and right-click on it. Then select the "Add Field" option. The field will be shown as a child of the "Form" Component inside the Outline View. Move to the Properties View to configure the "Field". Type a meaningful name for the "Field", such as "Username". Let's repeat the procedure to add the "Password" field. Once the field is created, move to the Properties View and select the "Password" option from the "Type" drop-down list. The "Password" type hides the characters while the user is entering text into the "Field"; this is exactly how a "Password" Field usually works.
Now let’s add the "Login" action. Select the "Action" item from the "Container" sections of the toolbar and click in the "Site View". Select the "Action" and move to the "Properties View". Press the "Select" button next to the "Action Definition" property and select the "Login" action definition.
To let the user log in, let’s use a "Navigation Flow". Select the "Flow" item from the "Flows" section of the toolbar and click on the "Form" component, and then on the "Login" action. Select the "Flow" and move to the Properties View. Write a name for the "Flow", such as "Login". Then double-click on the "Flow" to make the binding. In the opening dialog, uncheck the "Enable Default Binding" property. Then bind the "Username" Field with the "Username" action input parameter, and the "Password" field with the "Password" action input parameter. Press the "OK" button to confirm.
Let's now add the error management for the "Login". If the login fails, the user is redirected to the "Login" page and an error message is shown. Select the "Message" component from the "View Components" section of the toolbar. Click on the page and type a name for it, such as "Error Message".
Select the "KO Flow" item from the "Flows" section of the toolbar, and click on the "Login" action and then on the "Message" component. Then double-click on the "KO Flow" to make the binding. In the opening dialog, uncheck the "Enable Default Binding" property and type a static string message, such as "Login error", to be bound with the "Shown message" input parameter of the "Message" component. Press the "OK" button to confirm.
The "Logout" Pattern
The "Logout" is the Operation that explicitly terminates the user’s session. After the session is ended, the user loses the permission to access the protected resources of the application.
Since the "Logout" is done directly using appropriate dedicated "Action Definition", the basic IFML implementation is done only with the "Action" that executes the "Logout", and is flagged as a "Landmark" in order to be shown in all the points of the "Site View" inside the menu.
Another option for modeling the "Logout" pattern is to add a flow that leads directly to the "Logout" action; this "Flow" may start from a generic page or from the "User Profile" Details.
How to Model the "Logout" Pattern
In order to logout, the user must be logged into the Web application, so you need to place the Action for the Logout inside the protected site views of the "CRM" Web application.
Let's start from the "Administrator" site view. Select the "Action" item from the "Container" sections of the toolbar and click in the "Site View". Select the "Action" and move to the Properties View. Press the "Select" button next to the "Action Definition" property, and select the "Logout" action definition.
The "Logout" action definition is already modeled inside our project.
Then check the property "Landmark" to create the landmark item inside the menu bar. Repeat the steps in order to model the "Logout" in all the other protected "Site Views".
Context Parameters
Once logged into the Web application, the user has a specific active session. The session values are retrieved by means of "ContextParameters".
A "Context Parameter" is a parameter that has the entire project as its visibility scope and the user session as its duration scope. WebRatio Platform manages the session values by means of "Context Parameters". Examples of a "Context Parameter" may be the logged-in user identifier and the logged-in user group identifier.
In WebRatio Platform, as soon as you create a new project, four "Context Parameters" are available. The four "Context Parameters" are the "UserCtxParam", used to store the logged-in user id; the "GroupCtxParam", used to store the logged-in user's "Group Id"; the "LanguageISOCtxParam"; and the "CountryISOCtxParam", used to store the "ISO codes" of the user’s browser language and country.
"Context Parameters" are listed in the Outline View of the "Project" node, and can be extended with additional "Custom Context Parameters".
The "Login" action definition sets the value for the "UserCtxParam" and the "GroupCtxParam".
How to ADD a "Context Parameter"
Let's see how to extend the set of available "Context Parameters" by adding your custom one. Suppose that you need to store a session value in your project and you want quick access to it, using a "Context Parameter".
An example may be saving the identifier of the "Default Company" for a "Sales Manager". Move to the Project View in order to add the new "Custom Context Parameter". In the Outline View, right-click on the "Web Model" node, select the "Add" and then the "Context Parameter" command. Type the name for it: "DefaultCompany".
Now move to the Properties View and set the type of parameter. As you can see, the "Type" dropdown shows a list of available choices including the "Entity" option. Select the "Entity" option, and then you are able to define an entity related to the "Context Parameter". Press the "Select" button next to the "Entity" property and choose the "Company" entity.
Now you will be able to set the value for each user's default company identifier. Once you have a "Custom Context Parameter", you can retrieve its value using a "Get" component, as in the "User Profile" example.
The "Get" Component
The "Get" Component is a "Session Component" used to retrieve values from the session, for example to show the profile of the currently logged-in user.
Let's see how the "Get" component works. The IFML model is composed of a page set as "Landmark", and contains all the required "View Components". The session values are retrieved using the "Get" component and are provided in a "Details" component as "Primary Keys". The "Get" component works both inside and outside pages.
How to Use the "Get" Component
Let's open the "Administrator" Site View of the "CRM" Web application and start adding a new page to it. Select the "Page" from the "Containers" section of the toolbar and click in the "Site View" to add it. Type a name for the Page, such as "User Profile". Be sure that the user can reach your page. An option is to make this page a "Landmark". Select the page and move to the Properties View; then check the "Landmark" property.
To retrieve the user key from the session, select the "Get" component from the "Session Components" section of the toolbar and click on the "User Profile" page to place it inside. Type its name, "Get Current User", and then move to the Properties View. Select the "Context Parameter" to use by clicking on the "Select" button of the "Context Parameters" property. Then, from the opened dialog, select the "UserCtxParam". Press the "OK" button to confirm your choice.
Now let's add the "Details" component for the "User Details". Take a "Details" component from the "View Components" section of the toolbar and click on the page to place it inside. Type a name for it, such as "User Details". Move to the Properties View of the "Details" component to define all the "Data Binding" properties. Use the "Select" button next to the "Entity" property to select the "User" entity. Then press the "OK" button to confirm. Next, choose all the display attributes that you want to show using the "Select" button next to the "Display Attributes" property. From the opened dialog press the "Select All" button and then remove the "oid" Attribute. Press the "OK" button to confirm your choice.
Now you need to propagate the session values from the "Get" Component to the "Details". Add a "Data Flow" connecting the "Get" component and the "Details". Take the "Flow" element from the "Flows" section of the toolbar and click on the "Get" component and then on the "Details" component. As you can see, opening the "Parameters Binding" dialog WebRatio Platform automatically binds the identifier of the user with the "Key Condition" of the "Details" component, since both components work on the same Entity.
Now save and use the "Generate and Run" command to test it.
How to STORE a "Context Parameter"
To set the value for a "Context Parameter", you can use another "Session Components": the "Set" operation.
The "Set" operation allows you to store a value inside a parameter that has the session scope. There is also another operation that manages "Context Parameters" and that is the "Reset" operation, which allows clearing and then storing a new value inside a "Context Parameter". Examples of using these two operations will be shown in another lesson.