Overlay - WEB
Change look and feel for Integrity WEB. Add new and/or update existing languages.
Last updated
Change look and feel for Integrity WEB. Add new and/or update existing languages.
Last updated
In this use case we are going to change the look and feel of some of the authenticators in Web. Note 1. We will browse directly to the different authenticators for testing the UI so there will be no SAML service provider (SP) available for authentication. Note 2. To test overlay in this use case we will use SAML as protocol.
There are some prerequisite for this use case. You will need the following environment:
Integrity Web 2.0 or later installed and running.
Basic knowledge of Integrity Web.
Download ZIP-file with example overlay data for this use case.
If you want to use your own images and/or manage language files, there is a parameter called Overlay. This parameter is added per authenticator. Overlay_dirs was added to version 2.0 of Web to be able to point out multiple overlay folders. The need to be able to point out several folders mainly applies if you want e.g. a place where you have images and can from each authenticator point to it instead of each authenticating overlay folder having its own copy of the images. Overlay_dirs is mainly for convenience and has files in one place instead of several.
Download and install Integrity Web
To install Integrity Web, se installation use case. This is not covered in this use case.
Rename the customer folder from the installation to /customer_ORG. All data in the /customer folder will be replaced with data from this use case.
In the downloaded ZIP-file, add the customer folder to your installation.
Note. The to make it simple you will address Fortified ID Web/SAML Identity Provider (IdP) directly, there is no need for a SAML Service Provider. However, the config.json has configuration to act as a SAML IdP for Fortified ID Password Reset application if you like to see configuration for it.
The downloaded folders contains all information needed. For example, a test certificate and files are included and configured to work with the example applications. However, some data needs to be changed to match your environment. Since this example was done on a Windows server you might need to update file paths if you run something else. Also the http ports might need to be changed if they are not available in your environment.
To make it easy to change settings to your local environment. Go to the config folder and edit the file globals.json, that contains the information you need to change. Config.json uses the variables in globals.json.
Configure and update the settings below to match your environment, if needed, and then save the information.
file_paths (see globals section in config.json) Update if needed to map your environment and configuration.
http (see globals section in config.json) Update if needed to map your environment and configuration.
keystore (see globals section in config.json). The keystore is included with certificate for HTTPS purpose. Update if needed to map your environment and configuration.
From the downloaded ZIP-file, copy all folders to C:\Program Files\FortifiedID\web\customer\config\resources_external\overlays
Start the Fortified ID Web service. Verify the service is running.
If you have added the folder structure and also use the example config.json file used in this use case. When you start Web everything should be ready to test.
Open a browser
Browse to https://localhost:8443/saml/authn/chain
Below screenshot should be the result you should see. Test each option to see each selector option UI
With overlays you can change the look and feel, add a new language or overwrite keys for the default languages. Integrity Web supports the use of several authenticators, each authenticator has it own settings for overlay, for example you like to change an UI background image on only the Selector authenticator but not the UserNameAndPassword authenticator. Since they have their own overlay configuration that is no problem. You can also choose to have the same overlay configuration for several authenticators, for example, several or all authenticators should have the same background.
In this use case we showcase different authenticators:
Selector (used to present authenticators below to end-user)
UserName/Password and OTP (used to verify username / password with OTP)
Freja OrgID (a swedish e-ID vendor)
Microsoft ADFS (integration with Microsoft federation service)
Note. You can use one authenticator several times for different purposes and they each have their own overlay setting. Two or more authenticators can also reference to the same folder, then they will use the same overlay settings.
Open the config.json file. We will use selector_root as an example. Verify the parameter as described below, see screenshot of location:
All other authenticators have their own overlay configuration parameter. If not configured default will be used.
In the overlay folder for an authenticator there must be an \asset folder. In that folder you put the overlay files needed for your scenario.
ui_config_overrides.json In ui_config_overrides.json file you can for example do the following:
Add source and size for different logotypes/images
Add link to vendor logo
Add new language so the option will be available in the UI to choose.
In this file you can also change the tab name in the browser. We have called the tab, Litho Acme IdP.
Language files
Locales Add new language files to the \locales folder.
Custom locales If you like to override an default language (Swedish or English) then you add the file and the key to be replaced to the \custom_locales folder
Default languages If you like to verify the default languages and keys then you can look in file system and folder, \..\web\application\web\authenticator. Open an authenticator folder and open asset folder. Note: Do not make any changes here since it will be replaced when upgrade.
css_overrides.css This file includes all css overlay settings that you would like to override. For example, background and colors.
Asset folder (the name of the asset folder is the authenticator name, for example 3_main_username_password) All images and the favicon.ico that you like to address or use should be placed in this folder.
The result should look like:
