- Colors and Logos
- Internationalization and localization
- Terms and Conditions
- Ubisecure SSO includes several login screens that can be customized
- 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 web agent 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 with the previous image.
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 – SSO Login Screen
To customize SSO, copy all files from Desktop C:\Users\Administrator\Desktop\Example configurations\SSO\custom to C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom
Step 1: Adding a new template
1. Add new template reference to
2. Create new UI Template
Copy ubilogin-sso\ubilogin\custom\templates\default.properties to smartplan.properties
Add line to templates\smartplan.properties
Copy smartplan.svg and smartplanamericas.svg to c:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\resources\
Now add the new template to Ubilogin application. This will assign all your modifications (saved as template "smartplan") to Ubilogin application, which controls the log in UI. On SSO Management console, open System, Applications and Ubilogin. Write smartplan in the field "UI Template Names." Update.
Also add the template to the CustomerID Adminstration interface.
The CustomerID Adminstration application is located in the eIDM Services site, under Applications. It is called eidm2.
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 to any application.
Part 2: Colors and Logos – CustomerID Login Screen
Step 1: Change colors
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.
Rename the logo file as logo.png (or logo.jpg) and copy it to C:\Program Files\Ubisecure\customerid\application\custom\
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.
- Add new references to custom\message.index as seen in the box:
- Make directory ubilogin-sso\ubilogin\custom\messages
- Create or copy new properties files (e.g. errors_fi.properties) to \custom\messages folder
Now let's change some strings in the user interface. Make the error messages 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 default.properties file. (For reference, full values of default.properties file are in Template files page)
- Assign template as required to agents: your Sample application installed during Lab 1.2
Optional exercise: Add a new language to a template
Step 2: Workflows
Change the default language to Finnish. In order to do this, edit custom\eidm2.properties
Change the default text in "Front Page" that appears in CustomerID Administrative Interface. The steps are:
Create file custom\messages_fi.properties
Copy relevant key from master file C:\Program Files\Ubisecure\customerid\tools\examples\custom\messages_fi.properties to C:\Program Files\Ubisecure\customerid\application\custom
Then edit: admin.frontpage.welcometext1 = Write a Test text here
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 role descriptions by creating custom roles.properties configuration e.g.
- Localized attribute descriptions
by creating custom messages_xx.properties configuration (choose a new language)
organization.crmid = CRM ID
Step 4: Terms and Conditions
- Create new Terms and Conditions in Finnish (This will be used in later exercise)
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
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: