GUI configuration

This page describes how to configure the Net iD Portal GUI using the config.js file, and how to brand and style the user interface.

Configuration file overview

The portal GUI is configured using a JavaScript configuration called config.js file loaded at runtime.

📂 root
  📂 public (1)
    📄 config.js (2)

1	The directory where the configuration file must be placed for the portal to work.
2	The file containing the runtime configuration for the portal GUI.

Template configuration file (excerpt)

/**
 * This is a template configuration file. The real config file is called config.js.
 * You must have a config.js file in the root/public directory for the portal to work.
 */

window.runtimeConfig = {
  portalServiceConfig: {
    /* API configs */
    backendUrl: '/api/portalapi/servicerest.svc', // API url.

    /* Auth configs */
    logoffOnRemoval: true, // Log off user when auth token is removed/disconnected
    logonOneTimePassword: true, // Enable one-time password login
    logonOneTimePasswordWithUser: '', // Specify user field for one-time password
    logonExtraField: 'subject:2.5.4.10;issuer:2.5.4.3',

    /* Menu links (used in the main menu) */
    urlHelp: 'http://www.pointsharp.com/help/', // Link to help page
    urlInfo: 'https://service.pointsharp.com', // Link to info page
    urlTest: 'https://www.pointsharp.com/test/', // Link to token test page

    /* SDK configs */
    backendSignMatch:
      'authid,subject;issuer,subject;authid,subject=CN+2.5.4.5;authid,subject=2.5.4.5;authid,subject=CN;issuer=O,subject=CN+O+OU;same-as-logon', // Filtering certificate attributes for matching a single certificate when sign a task.
    backendVerifyCertificate: false, // An extra verification of the server certificate if needed but will effect performance.
    requiredLogonSubject: '2.5.4.3', // The OID (object identifier) of the certificate that will be presented at logon (e.g. 2.5.4.3 (X509-CommonName)).
    pluginParameters:
      'silent=false;timeout=333;delay=33;web-extension=true;call-trace=false', // Parameter settings for the Net iD plugin. Do not change these settings.
    tokenModel: { allow: [], ignore: ['Mifare'] }, // Allow-list and ignore-list for token models that should / should not be used and presented by Net iD Plugin (e.g. built-in SIM-cards or MIFARE readers should not be used).
    developerOnly: {
      forceEncryption: false, // Test encryption during development
    },

    /* Search configs */
    autoSearchOnInput: true, // Enable automatic search on input.

    /* Translation configs */
    languageList: [
      // List of supported languages, we'll only show the ones you add here.
      { name: 'English', code: 'en-US', default: true }, // Default (and fallback) language.
      { name: 'Suomi', code: 'fi-FI' },
      { name: 'Svenska', code: 'sv-SE' },
      { name: 'Français', code: 'fr-FR' },
      { name: 'Deutsch', code: 'de-DE' },
      { name: 'Nederlands', code: 'nl-NL' },
      { name: 'Polski', code: 'pl-PL' },
    ],
    showTranslationKeys: false, // Show translation keys in the UI for easier translation (for dev only)
    showMissingTranslationKeys: false, // Mark missing translation keys in the UI (for dev only)
  },
};

API configuration

Table 1. backendUrl
Key	`portalServiceConfig.backendUrl`
Type	String
Default	`/api/portalapi/servicerest.svc`
Description	Base URL to the portal backend REST API used by the GUI.
Example	`/api/portalapi/servicerest.svc` or `https://portal.example.com/api/portalapi/servicerest.svc`

If the GUI and API are hosted on different hosts or paths, make sure this URL points to the correct API endpoint and that your CSP connect-src directive allows it.

Authentication configuration

Table 2. logoffOnRemoval
Key	`portalServiceConfig.logoffOnRemoval`
Type	Boolean
Default	`true`
Description	If set to `true`, the user is automatically logged off when the authentication token is removed or disconnected.
Recommendation	Keep enabled for better session security.

Table 3. logonOneTimePassword
Key	`portalServiceConfig.logonOneTimePassword`
Type	Boolean
Default	`true`
Description	Enables one-time password (OTP) login in the portal.
Notes	Set to `false` to disable OTP login if not used in your environment.

Table 4. logonOneTimePasswordWithUser
Key	`portalServiceConfig.logonOneTimePasswordWithUser`
Type	String
Default	Empty string
Description	Optional. Specifies which user field should be combined with the one-time password (for example username or email).
Example	`"username"`

Table 5. logonExtraField
Key	`portalServiceConfig.logonExtraField`
Type	String
Default	`subject:2.5.4.10;issuer:2.5.4.3`
Description	Extra certificate fields used at logon, given as a semicolon-separated list of `<field>:<OID>` mappings.
Notes	Intended for administrators familiar with the certificate profile. Do not change unless you know the impact.

Menu links

These settings control the external links available in the main menu.

Table 6. urlHelp
Key	`portalServiceConfig.urlHelp`
Type	String
Default	`http://www.pointsharp.com/help/`
Description	URL for the Help page link in the main menu.
Typical change	Point this to your own support or help site.
Example	`https://support.example.com/help`

Table 7. urlInfo
Key	`portalServiceConfig.urlInfo`
Type	String
Default	`https://service.pointsharp.com`
Description	URL for the general information / service link in the main menu.
Example	`https://portal.example.com/info`

Table 8. urlTest
Key	`portalServiceConfig.urlTest`
Type	String
Default	`https://www.pointsharp.com/test/`
Description	URL for a token test or diagnostic page shown in the main menu.
Example	`https://portal.example.com/token-test`

SDK and token handling configuration

Table 9. backendSignMatch
Key	`portalServiceConfig.backendSignMatch`
Type	String
Default	`authid,subject;issuer,subject;authid,subject=CN+2.5.4.5;authid,subject=2.5.4.5;authid,subject=CN;issuer=O,subject=CN+O+OU;same-as-logon`
Description	Controls how certificate attributes are used to match a single certificate when signing a task.
Notes	Advanced setting. Use the default unless instructed otherwise by support.

Table 10. backendVerifyCertificate
Key	`portalServiceConfig.backendVerifyCertificate`
Type	Boolean
Default	`false`
Description	Enables an extra verification step of the server certificate.
Impact	Improves security but may negatively affect performance.
Recommendation	Enable only if required by your security policy.

Table 11. requiredLogonSubject
Key	`portalServiceConfig.requiredLogonSubject`
Type	String
Default	`2.5.4.3`
Description	OID of the certificate attribute that must be present at logon (for example `2.5.4.3` for X.509 Common Name).
Notes	Align this value with your certificate policy.

Table 12. pluginParameters
Key	`portalServiceConfig.pluginParameters`
Type	String
Default	`silent=false;timeout=333;delay=33;web-extension=true;call-trace=false`
Description	Parameter settings for the Net iD plugin.
Warning	Do not change these settings in normal deployments.

Table 13. tokenModel
Key	`portalServiceConfig.tokenModel`
Type	Object `{ allow: [], ignore: [] }`
Default	`{ allow: [], ignore: ['Mifare'] }`
Description	Controls which token models are allowed or ignored by the Net iD plugin.
Details	If `allow` is empty, all models except those in `ignore` are used. Use `ignore` for models that should never be presented (such as built-in SIM-cards or MIFARE readers).

Example 1. Token model configuration

tokenModel: {
  allow: ['SmartCard', 'USBToken'],
  ignore: ['Mifare', 'SimCard'],
}

Table 14. developerOnly.forceEncryption
Key	`portalServiceConfig.developerOnly.forceEncryption`
Type	Boolean
Default	`false`
Description	Developer-only option used to test encryption behavior.
Warning	Not intended for production use.

Search configuration

Table 15. autoSearchOnInput
Key	`portalServiceConfig.autoSearchOnInput`
Type	Boolean
Default	`true`
Description	If enabled, the portal automatically performs a search as the user types.
Notes	Set to `false` if you prefer explicit search actions (for example to reduce backend load).

Translation and language configuration

Table 16. languageList
Key	`portalServiceConfig.languageList`
Type	Array of objects
Default	`[ { name: 'English', code: 'en-US', default: true }, { name: 'Suomi', code: 'fi-FI' }, { name: 'Svenska', code: 'sv-SE' }, { name: 'Français', code: 'fr-FR' }, { name: 'Deutsch', code: 'de-DE' }, { name: 'Nederlands', code: 'nl-NL' }, { name: 'Polski', code: 'pl-PL' } ]`
Description	Defines the list of UI languages that will be available to users.
Fields	Each entry has: `name` (display name), `code` (locale code), and optional `default` flag.

Example 2. Language configuration

languageList: [
  { name: 'English', code: 'en-US', default: true },
  { name: 'Svenska', code: 'sv-SE' },
]

Only languages listed here are available in the GUI. Exactly one language should be marked as default. This language is also used as the fallback.

Table 17. showTranslationKeys
Key	`portalServiceConfig.showTranslationKeys`
Type	Boolean
Default	`false`
Description	Shows translation keys instead of translated texts in the UI.
Use case	Development and translation work only.

Table 18. showMissingTranslationKeys
Key	`portalServiceConfig.showMissingTranslationKeys`
Type	Boolean
Default	`false`
Description	Highlights missing translation keys in the UI.
Use case	Development and translation debugging only.

GUI branding and styling

The GUI can be branded using a header logo (theme image) and custom styling of header and menu elements.

Organization logo (theme image)

The header includes an organizsation logo (theme image).

Maximum height	`40px` (enforced by the GUI)
Recommended height	between `24px` and `34px`
Width	No explicit technical limit.

Maximum height

40px (enforced by the GUI)

Recommended height

between 24px and 34px

Width

No explicit technical limit.

Although the width is not technically limited, very wide logos can:

Push other header content out of view
Look cramped on smaller screens

For best visual results, use a horizontally oriented logo with height between 24–34 px, and a width that fits comfortably within the header (approximately up to 200–250 px for typical desktop layouts).

Custom styling options

The following elements can be styled:

Setting Purpose Example value

Setting	Purpose	Example value
`HeaderBackground`	Header background color	`#002244`
`HeaderBorder`	Bottom border of the header	`1px solid #001122`
`HeaderText`	Header text color	`#FFFFFF`
`MenuBackground`	Menu background color	`#FFFFFF`
`MenuText`	Menu text color	`#002244`
`MenuBorder`	Right border of the menu area	`1px solid #DDDDDD`
`MenuItemHoverBackground`	Background for hovered menu items	`#F5F5F5`
`MenuItemHoverText`	Text color for hovered menu items	`#002244`
`MenuItemActiveBackground`	Background for the active (selected) menu item	`#002244`
`MenuItemActiveText`	Text color for the active menu item	`#FFFFFF`
`MenuItemBorder`	Border between menu items	`1px solid #EEEEEE`

HeaderBackground

Header background color

#002244

HeaderBorder

Bottom border of the header

1px solid #001122

HeaderText

Header text color

#FFFFFF

MenuBackground

Menu background color

#FFFFFF

MenuText

Menu text color

#002244

MenuBorder

Right border of the menu area

1px solid #DDDDDD

MenuItemHoverBackground

Background for hovered menu items

#F5F5F5

MenuItemHoverText

Text color for hovered menu items

#002244

MenuItemActiveBackground

Background for the active (selected) menu item

#002244

MenuItemActiveText

Text color for the active menu item

#FFFFFF

MenuItemBorder

Border between menu items

1px solid #EEEEEE

The concrete wiring of these settings, for example, as a theme object inside portalServiceConfig) is implementation-specific, but from a user perspective they take standard CSS color strings and border definitions.

Content security policy (CSP)

The Content Security Policy (CSP) for Net iD Portal is configured on the web server or reverse proxy that serves the GUI. The portal GUI does not set the CSP header itself.

From the GUI perspective, the CSP must allow:

script-src 'self' 'unsafe-eval';
style-src 'self' 'unsafe-inline';

If these directives are not present, the GUI does not work correctly.

If backendUrl points to another origin, that origin must be allowed in the CSP connect-src directive.

Example 3. Soft CSP for the portal GUI

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;
  font-src 'self';
  connect-src 'self';
  object-src 'none';
  base-uri 'self';
  frame-ancestors 'self';

When the API is on a different origin, extend connect-src accordingly, for example:

connect-src 'self' https://api.example.com;

For general security guidance and more CSP examples, see the Security and CSP page in the installation documentation.