Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 27 Next »

Purpose

The purpose of this module is to demonstrate customization of the user interface and support for localization.

Requirements

This lab requires only requires you have access to CustomerID administrative interface



Overview

Ubisecure Identity Server is designed with customization in mind. The customer decides the branding and customization requirements, and usually a system integrator is in charge of the customization and localization project. The main components that can be customized are:
  • Colors and Logos
  • Internationalization and localization
  • Terms and Conditions
The expected outcome of this lab is multi-language support with customized logos and colors.

SSO Customization

  • 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

Page layout

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.




Homework

For more information about the Template API, see Template API


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

See page SSO Login UI Customization on Developer and Partner Portal.
The goal of this exercise is to create a custom template with own SmartPlan logo and colors.

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

Ubisecure's default login pages use blue color with ASCII code #0c73ac

Step 1: Adding a new template

1. Add new template reference to

C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\template.index

c:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\template.index
smartplan = templates/smartplan.properties
smartplanamericas = templates/smartplanmericas.properties

2. Create new UI Template

Copy C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\templates\default.properties as a new file C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\templates\smartplan.properties

Add the following line to smartplan.properties

c:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\templates\smartplan.properties
logo.svg = /resource/smartplan.svg
c:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\templates\smartplanamericas.properties
logo.svg = /resource/smartplanamericas.svg


Copy smartplan.svg and smartplanamericas.svg to c:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\resources\

copy C:\Users\Administrator\Desktop\Ubisecure\smartplan.svg "c:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\resources\"
copy C:\Users\Administrator\Desktop\Ubisecure\smartplanamericas.svg "c:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\resources\"
 
Add the following line to C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\resource.index
custom/resource.index
smartplan.svg = resources/smartplan.svg


Now add the new template to Ubilogin application. This will assign all your modifications (saved as template "smartplan") to Ubilogin application, which controls the login user interface. On SSO Management console, open: System, Applications and Ubilogin. Write smartplan in the field "UI Template Names." Click "Update."

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.

Before:

After:

Press Update.

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.


Part 2: Colors and Logos – CustomerID Login Screen

You will change default colors in CustomerID user interface by editing and making your desired changes on the CSS file C:\Program Files\Ubisecure\customerid\application\custom\style.css

Step 1: Change colors

Copy C:\Program Files\Ubisecure\customerid\tools\examples\custom\style.css to C:\Program Files\Ubisecure\customerid\application\custom\style.css
Open style.css with a file editor. Search for #0c73ac (default Ubisecure's blue) and replace all its occurrences with #FF6600 (SmartPlan's orange).

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\


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

Login screen has the following customization options:

Step 1: Messages

You can customize the texts shown to users during the login phase as they are customizable message files. The message.index file 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.


  1. Add new references to custom\message.index as seen in the box:
    custom\message.index
    uas = messages/uas.properties
    errors = messages/errors.properties
    uas_fi = messages/uas_fi.properties
    errors_fi = messages/errors_fi.properties
    uas_sv = messages/uas_sv.properties
    errors_sv = messages/errors_sv.properties
    
    
  2. Make directory C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\messages\
  3. Create or copy new properties files (e.g. errors.properties) to C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\messages folder
  4. Now let's change some strings in the user interface. Make the error messages a bit more friendly.
      

    errors.properties
    USER_NOT_FOUND = Hey :) We didn't find you. Would you try again?

    Now try to log in with a nonexistent user name, and observe the message that appears in red letters.

  5. Add new languages to templates for selection. You must edit C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\templates\default.properties file.  (For reference, full values of default.properties file are in Template files page)

    default.properties
    defaultlocale = fi
    locales = en, fi, sv
    localenames = in English, Suomeksi, på svenska
    
    
    
  6. Assign template as required to agents: your Sample application installed during Lab 1.2
  7. Restart UbiloginServer

  8. Optional exercise: Add a new language to a template

Step 2: Workflows

User interface localization
  1. Change the default language to Finnish. In order to do this, edit C:\Program Files\Ubisecure\customerid\application\custom\eidm2.properties

    custom\eidm2.properties
    default.locale = fi
  2. Change the default text in "Front Page" that appears in CustomerID Administrative Interface. The steps are:

    1. Create file custom\messages_fi.properties  

    2. 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

    3. Then edit: admin.frontpage.welcometext1 = Write a Test text here 

Step 3: Role and attributes

  1. Localized role descriptions. Edit C:\Program Files\Ubisecure\customerid\application\custom\roles.properties

  2. First observe the contents of the file. Then localize role descriptions by creating custom roles.properties configuration e.g.

    roles.properties
    fi.friendlyName.mainuser = Yhteyshenkilö
    en.friendlyName.mainuser  = Contact Person
    fi.friendlyName.user = Edustaja
    en.friendlyName.user = Representative
  3. Localized attribute descriptions
    by creating custom messages_xx.properties configuration (choose a new language)
    organization.crmid = CRM ID   


Step 4: Terms and Conditions


You can also edit the "terms and conditions" in several languages.
  1. 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

Example

  • Mobile application selection
  • Java-script method selection implementation in SP application

Example:



Template API

Template API allows for a consistent and safe reference method to elements required for providing custom user experiences

Examples

  • Dynamically showing currently supported authentication methods within an third-party application

Benefits

  • Reducing redirections
  • Faster user experience
  • Consistent API across future product releases

Examples:

To get the page logo in Finnish for the template named default:

To get the logo in Finnish for the authenticaiton method called sms.otp.1:

  • No labels