Customizing the Identity Portal

You can customize the design and labels of the IdP authentication flow using the theme configuration.

You can create and customize themes using Custo/IDPThemes endpoint.

Copy

To retrieve an example of the customization payload, use GET

GET https://<portaladdress>/<tenant>/authn/portal?theme_id=ID_THEME1?request_uri=urn:hid:43d5b009-7b52-4d6f-a8a9-0d8de27968f9

Where the theme is a JSON array with descriptions of the design parameters:

Parameter Description Status

id

The unique theme identifier

Mandatory

payload

Define how access should be filtered based on the user's existing authenticators:

  • name - the name of the theme (optional, for internal reference only)

  • description - the description of the theme (optional, for internal reference only)

  • ui - contains the element definitions of the interface

    See Customizing the Portal Design

  • localization - contains the label definitions of the interface

    See Customizing the Labels

Mandatory

To update the template, use:

PUT https://[base-server-url]/configuration/<tenant>/v2/Custo/IDPThemes/{id}

To delete the template, use:

DELETE https://[base-server-url]/configuration/<tenant>/v2/Custo/IDPThemes/{id}

The default content is described in the following sections.

Note: You must have the Customizations Functions permissions to customize the themes.

Customizing the Portal Design

The portal design contains the following variables which you can customize in the "ui" section of the theme payload:

Container Property Name Value Description

hid_portal

login-position

<left|center|right>

Position of the login dialog box.

The default value is right.

 

login-background

<img base64 encoded>

Image defined for the background of the login box.

The default is the background image from the IdP package (assets/images/signin_bg.jpg).

Note: This property is only supported when the login-position property is set to center.
 

gradient-start

<COLOR>

Color defined for the start of the gradient of the rounded-edge tile.

The default value is the HID Global 'dark blue' color (#003087).

Note: This property is only supported when the login-position property is set to left or right.
 

gradient-end

<COLOR>

Color defined for the end of the gradient of the rounded-edge tile.

The default value is the HID Global 'lighter blue' color (#00539B).

Note: This property is only supported when the login-position property is set to left or right.
 

logo

<img base64 encoded>

Image defined for the logo above the login box.

The default image is the HID Global logo (assets/images/app-logo.png).

  login-side-panel-top-left-radius The allowed values are between 0 and 99999 pixels

Defines the rounded top-left edge of the login page panel in pixels.

The default value is 0.

To disable the rounded edge effect, set the property to 0 (without 'px').

  login-side-panel-top-right-radius The allowed values are between 0 and 99999 pixels

Defines the rounded top-right edge of the login page panel in pixels.

The default value is 0.

To disable the rounded edge effect, set the property to 0 (without 'px').

  login-side-panel-bottom-left-radius

The allowed values are between 0 and 99999 pixels

Defines the rounded bottom-left edge of the login page panel in pixels.

  • If login-position is set to right, the default value is 0

  • If login-position is set to left, the default value is 100px

To disable the rounded edge effect, set the property to 0 (without 'px').

  login-side-panel-bottom-right-radius

The allowed values are between 0 and 99999 pixels

Defines the rounded bottom-right edge of the login page panel in pixels.

  • If login-position is set to right, the default value is 100px

  • If login-position is set to left, the default value is 0

To disable the rounded edge effect, set the property to 0 (without 'px').

extensions

<custom-element-name>

Your custom value

Customized elements that can be referenced in the theme design

You can add extensions for color definitions or images for logos

Note: <COLOR> is a color representation defined in the standard CSS/HTML format (that is, either a standard color name or corresponding RGB, HEX, HSL, RGBA, or HSLA values).

To add a customized design in your theme configuration, set the required values for the above variables.

Copy

Example of a customized design with the login box positioned to the left using custom color extensions and logo

{
	"id": "ID_THEME1",
	"payload": {
		"ui": {
			"hid_portal": {
				"login-position": "left",
				"gradient-start": "red",
				"gradient-end": "orange",
				"logo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAVWZqWNWH.....<shortened>...LVjB1zBZk1nJTiYi+wAAAABJRU5ErkJggg=="
			},
			"extensions": {
				"mycustomelement1": {
					"color": "red"
				},
				"mycustomelement2": {
					"color": "orange"
				},
				"mycustomelement3": {
					"mycustomlogo1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAVWZqWNWH.....<shortened>...LVjB1zBZk1nJTi/LYLKyb3YxefWSOu1b1t9HnOP+eHXbHZnV95bz0evVCtToyzZqNaY6q1UK9dy/UNmzYsGHDhg1C8D/J9batc1Yi+wAAAABJRU5ErkJggg=="
				}
			}
		},
		"localization": {
      ...
		}
	}
}

Customizing the Labels

Labels are defined by sets of key/value pairs in the default theme configuration.

The labels vary depending on the authenticator factor type. The following example illustrates the labels for the LOGIN type elements:

Two localization files, one with the labels in English and the other in French, are bundled with the new IdP and loaded by default. The labels will be displayed in the locale detected in the user's browser or system.

  • If you want to modify labels for the English or French versions, you can customize them in the "localization" section of the payload.

  • If you want to provide labels in a different language, you can localize the full label set in the "localization" section of the payload.

Create Customized Labels

You can customize the values for the existing labels by modifying the definitions in the payload.

You can also add customized labels by defining the new key/value pairs for a specific authentication method or action in the theme configuration.

For example, to add the following customer-specific labels for the static password authentication method:

  • LOGIN.name.customer

  • LOGIN.tooltip.customer

  • LOGIN.input.customer_password.label

  • LOGIN.input.customer_password.placeholder

  1. In your theme configuration, add the new labels in the "localization" section:

    Copy
    {
        "schemas": [
            "urn:hid:scim:api:idp:2.0:Theme:AuthPortal"
        ],
        "id": "ID_THEME1",
        "payload": {
            "ui": {
                ...
            },
            "localization": {
                "hid_portal": {
                    "en": {
                        "LOGIN.name.customer": "Static Customer Password",
                        "LOGIN.tooltip.customer": "Authenticate using your customer password",
                        "LOGIN.input.customer_password.label": "Customer Password",
                        "LOGIN.input.customer_password.placeholder": "Enter your customer password"
                    }
                },
                "extensions": {}
            }
        }
    }
    Note: You only need to modify the labels that you want to customize. You do not need to update the entire set of labels.
  2. Then, in the authentication flow configuration, map the interface design to these new labels in the localizationKeyRedefinition property for the required authentication method or action.

    The left part is the default key ("LOGIN.name"):The right part is the customized key ("LOGIN.name.customer").

    Copy
    {
    	"schemas": [
    		"urn:hid:scim:api:idp:2.0:Customization"
    	],
    	"id": "ID_CONFIG_PUSH",
    	"payload": {
    		"firstFactors": [
    			{
    				"acr": "1",
    				"code": "AT_CUSTPW",
    				"factorId": "factor.user_pasword",
    				"accessCriteriaId": "access_criteria.common_to_all",
    				"type": "LOGIN",
    				"actions": [
    					"action.change_password",
    					"action.request_reset_password"
    				],
    				"retry": 3,
    				"localizationKeyRedefinition": {
    					"LOGIN.name": "LOGIN.name.customer",
    					"LOGIN.tooltip": "LOGIN.tooltip.customer",
    					"LOGIN.input.password.label": "LOGIN.input.customer_password.label",
    					"LOGIN.input.password.placeholder": "LOGIN.input.customer_password.placeholder"
    				}
    			},
    			{
    				"acr": "2",
    				"code": "AT_CUSTOTP",
    				"factorId": "factor.otp_token",
    				"accessCriteriaId": "access_criteria.common_to_all",
    				"type": "OTP"
    			}
    		]
    	}
    }
Copy

Example of customized labels for an action

"localizationKeyRedefinition": {
            "CHANGE_PWD.title": "CHANGE_PWD.customer_title",
            "CHANGE_PWD.tooltip": "CHANGE_PWD.customer_tooltip"
        }

Localize the Labels

You can provide the labels in a new language (other than the default English and French) by translating the entire set of labels.

In your theme configuration, add a section for the locale corresponding to the required language with the translated labels in the "localization" section:

Copy

Example to add localized theme content in German

"localization": {
      "hid_portal": {
        "en": {
          "service_name": "HID Authentication Service",
          "service_tagline": "Rapidly build and deliver trusted identity solutions",
          "company_name": "HID Global",
          "application_title": "Authentication Service",
          "select_factor.label": "Select a login credential",
         },
        "fr:": {
          "service_name": "Service d'authentification HID",
          "service_tagline": "Construisez et délivrez rapidement des solutions d'identité de confiance",
          "company_name": "HID Global",
          "application_title": "Service d'authentification"
          "next_button": "Suivant"
        },
        "de": {
          "service_name": "HID Authentication Service",
          "service_tagline": "Erstellen und liefern Sie schnell vertrauenswürdige Identitätslösungen",
          "company_name": "HID Global",
          "application_title": "Authentifizierungsdienst",
          "select_factor.label": "Wählen Sie eine Anmeldeinformation aus",
          .....
         },
        .....
  	}     

Customizing the Consent Display

You can customize the display of the consent prompt presented to the user when required by the application.

Important:
  • The customized consent values defined in the IdP theme will override the scope definition in the client adapter.

  • You cannot localize the scope definition in the client adapter configuration.

For the description displayed in the consent prompt, the IdP will look for CONSENT.<scope>.description in the theme "localization" entries.

  • If it finds a corresponding localized message, the message will be displayed in the consent prompt.

  • If not, the value from "description" field in the scope definition will be displayed.

Note: The default and localized descriptions can contain line break (\n) and tab (\t) characters to improve the display of the description.

For example (for a scope called 'profile'):

"CONSENT.profile.description": "User profile information:\n\temail address\n\tphone number"

You can also customize the labels used in the consent dialog box by adding the default labels to the theme:

Label Key Default English Value Default French Value
CONSENT.title Confirm Confirmez
CONSENT.prompt Please confirm that you agree to share the following content with: Acceptez-vous de partager le contenu suivant avec:
CONSENT.datalist.label Data requested: Données requises:
CONSENT.deny.button Deny Refuser
CONSENT.confirm.button Accept Accepter
Copy
"localization": {
      "hid_portal": {
        "en": {
          "CONSENT.title": "Confirm",
          "CONSENT.prompt": "Please confirm that you agree to share the following content with:",
          "CONSENT.datalist.label": "Data requested:",
          "CONSENT.deny.button": "Deny",
          "CONSENT.confirm.button": "Accept",
         },
        "fr:": {
          "CONSENT.title": "Confirmez",
          "CONSENT.prompt": "Acceptez-vous de partager le contenu suivant avec :",
          "CONSENT.datalist.label": "Données requises :",
          "CONSENT.deny.button": "Refuser"
          "CONSENT.confirm.button": "Accepter"
        },
        .....
      }