- Colors and Logos
- Internationalization and localization
- Terms and Conditions
- In practice, customizing Ubisecure SSO is reflected in the login screens of the customer application
- UI Customization is mainly based on the web agent (application)
- Language selections can be made by the user if multiple languages are enabled for the application in question
- Both the visual and internationalization customization can be based on the web agent requesting the authentication
The following image shows all the elements that can be customized in a SSO/CustomerID page:
Example login screen
The following image is an example of a real user interface created by a Finnish customer, DNA. Observe and compare it with the previous image.
Some files you will need for these exercises
Before you start, please download these files to your instance:
Unzip Example configurations.zip file to your Desktop
Customization and localization in practice
Now we'll have several exercises in which you will customize the user interface of the installation on your own computers.
Part 1: Colours and Logos – Login Screens
Step 1: Adding a new template
1. Add new template reference to
2. Create new UI Template
In C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\templates\ copy the file default.properties to smartplan.properties.
Add the following line to smartplan.properties
3. Copy smartplan.svg to c:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\resources\
Step 2. Configuring templates to applications
1. Now add the new template to Smartplan application. This will assign all your modifications (saved as template "smartplan") to the SmartPlan application, which controls the login user interface. On SSO Management console, open: SmartPlan, Applications and SmartPlan Application. Write smartplan in the field "UI Template Names." Click "Update."
2. Also, add the template to the CustomerID Adminstration interface.
The CustomerID Administration application is located in the "eIDM Services" site, under Applications. It is called eidm2.
3. Finally, restart UbiloginServer service. The changes can take a few minutes to take effect.
In the future, you can follow the same steps to add a template for any application.
Step 3. Verify the login screen changes
Go to SmartPlan application to verify the changes in the login screen:
Part 2: Colors and Logos – CustomerID User Interface
Step 1: Change colors
3. Go to Customer ID user interface.
The user interface will change from blue to orange elements:
Step 2: Modify favicon
Modify CustomerID's favicon
Copy the new favicon.ico file from C:\Users\Administrator\Desktop\Ubisecure\ into C:\Program Files\Ubisecure\customerid\application\custom\
Step 3: Modify logo
In order to modify CustomerID's default logo, you must use a PNG/JPG file. SVG is not a valid format.
Copy and rename the logo file from C:\Users\Administrator\Desktop\Example configurations\SSO\custom\smartplan.png to C:\Program Files\Ubisecure\customerid\application\custom\logo.png
Step 4: Verify the changes in the Customer ID user interface.
1. Restart the Wildfly service.
2. Reload the Customer ID user interface window. Note! You might have to clear the browser cache and restart the browser before modifications take effect.
Part 3: Internationalization and localization
Login screen has the following customization options:
Step 1: Messages
message.indexfile holds an index of UI message files. Ubisecure SSO comes pre-configured with default (English) texts for all supplied authentication methods. To override the default uas, or errors messages, add an entry named uas, or errors to message.index.
- Copy directory C:\Program Files\Ubisecure\ubilogin-sso\tomcat\webapps\uas\WEB-INF\template\messages\ to C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\
- Add new references to C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\message.index as seen in the box:
- Create a new properties file errors.properties in C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\messages folder
Add a string in the user interface to make the error message a bit more friendly.
Now try to log in with a nonexistent user name, and observe the message that appears in red letters.
Add new languages to templates for selection. You must edit C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\templates\smartplan.properties file. (For reference, full values of default.properties file are in Template files page)
Go to the login screen of the My Smart Plan application to see the changes.
Note, if the Nordic letters don't display properly, change the enconding of the smartplan.properties file to ANSI in the text editor.
Optional exercise: Add a new language to a template
Repeat the step 5 to add a new language.
Step 2: Workflows
Change the default language to Finnish. In order to do this, edit C:\Program Files\Ubisecure\customerid\application\custom\eidm2.properties
Change the default texts in "Front Page" that appears in CustomerID Administrative Interface. The steps are:
Create file C:\Program Files\Ubisecure\customerid\application\custom\messages_sv.properties
Add the key: admin.frontpage.welcometext1 = Smartplan organisationer
- Restart the Wildfly service.
- Go to the CustomerID front page to verify the change.
Step 3: Role and attributes
Localized role descriptions. Edit C:\Program Files\Ubisecure\customerid\application\custom\roles.properties
First observe the contents of the file. Then localize SmartPlan role descriptions by editing the custom roles.properties configuration.
Localized attribute descriptions. By editing the custom messages_fi.properties file add the line:
Restart the Wildfly service.
Step 4: Terms and Conditions
Create the file terms_fi.html (Terms and Conditions in Finnish) to C:\Program Files\Ubisecure\customerid\application\custom (This will be used in later exercise).
Part 4: Discovery and Template APIs
Step 1: Discovery UI API
Enable third-party implementations of
- authentication method selection user interfaces
- dynamic handling of identity provider selection
- Mobile application selection
- Java-script method selection implementation in SP application
Step 2: Template API
Template API allows for a consistent and safe reference method to elements required for providing custom user experiences
- Dynamically showing currently supported authentication methods within an third-party application
- Reducing redirections
- Faster user experience
- Consistent API across future product releases
To get the page logo in Finnish for the template named default: