Authentication method images - SSO
- ubisebastian
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:
saml.myaccount.1 = My Account tupas.nordea.1 = Nordea Bank google.oauth2.1 = Login with Google
saml.myaccount.1 = Mi Cuenta tupas.nordea.1 = Banco Nordea google.oauth2.1 = Ingresar con Google