Authentication method images - SSO

Logos can be displayed for external authentication methods on the login screen.

Method images are controlled by the following template properties:

usemethodlogoimages = true
usemethodtextlink = true
methodimage.index = methodimage.index

usemethodlogoimages
→ This property defines if graphical logos will be shown for method selection buttons. Default is false. If true, methodimage.index must be defined.

Example: usemethodlogoimages = true

usemethodtextlink
→ This property defines if the name of the method is shown below the logo. Default is true. This may be a requirement for accessibility and screen reader support.

Example: usemethodtextlink = false

methodimage.index
→ This property defines the lookup table used when matching a method name to an image. Different templates can point to different methodimage.index files. The physical location of file is defined in the ubilogin/custom/resource.index file.

Example 1: methodimage.index = methodimage.index

Example 2: methodimage.index = methodimage-relaxedstyle.index

method-image.index

The methodimage.index file provides mappings from method name to image resource name. The image resources must also be defined in the resource.index file. Image localization is possible by localized resources.

#
# methodimage.index
#
# This file defines the images of authentication methods.
# This file is used only if its name is defined in 
# the 'methodimage.index' property of the template
#

tupas.alandsbanken.1  = logo_alandsbanken.gif
tupas.handelsbanken.1 = logo_handelsbanken.gif
tupas.op.1            = logo_op.gif
tupas.nordea.1        = logo_nordea.gif
tupas.sampo.1         = logo_sampopankki.gif
tupas.spankki.1       = logo_spankki.gif
tupas.sppop.1         = logo_sppop.gif
tupas.tapiola.1       = logo_tapiola.gif
tupas.test.1          = logo_test.gif
google.oauth2.1		  = logo_google.png
facebook.oauth2.1	  = logo_facebook.png
microsoft.oauth2.1	  = logo_microsoft.png
linkedin.oauth2.1	  = logo_linkedin.png
*                     = logo_test.gif

The asterisk is used to define a default image which is used when no other match occurs.

An example of the corresponding properties in the resource.index is shown below.

#
# resource.index
#

logo_op.gif             = templates/logos/logo_op.gif
logo_nordea.gif         = templates/logos/logo_nordea.gif
logo_alandsbanken.gif   = templates/logos/logo_alandsbanken.gif
logo_tapiola.gif        = templates/logos/logo_tapiola.gif
logo_sppop.gif          = templates/logos/logo_sppop.gif
logo_sampopankki.gif_fi = templates/logos/logo_sampopankki.gif
logo_sampopankki.gif_sv = templates/logos/logo_sampopankki_sv.gif
logo_sampopankki.gif_en = templates/logos/logo_sampopankki_en.gif
logo_sampopankki.gif    = templates/logos/logo_sampopankki.gif
logo_handelsbanken.gif  = templates/logos/logo_handelsbanken.gif
logo_spankki.gif        = templates/logos/logo_spankki.gif
logo_google.png 		= templates/logos/logo_google.png
logo_facebook.png 		= templates/logos/logo_facebook.png
logo_microsoft.png 		= templates/logos/logo_microsoft.png
logo_linkedin.png 		= templates/logos/logo_linkedin.png
# etc...

Localization of authentication method names

The authentication method name is shown under the authentication method logo or in a hover message. By default, the value shown in the Title field of the method settings is used for all languages.

To localize the names of authentication methods, include the technical method name and translation in each uas_XX.properties file. See example below, showing English and Spanish translations of method names:

ubilogin/custom/messages/uas_en.properties

saml.myaccount.1 = My Account
tupas.nordea.1 = Nordea Bank
google.oauth2.1 = Login with Google

ubilogin/custom/messages/uas_es.properties

saml.myaccount.1 = Mi Cuenta
tupas.nordea.1 = Banco Nordea 
google.oauth2.1 = Ingresar con Google