How to customize PSS

This PhenixID Solution Document (PSD) is written for PhenixID Server.

This PSD describes how to customize Password Self Service in PhenixID Server 3.2 and later.

The reader of this PSD should have some basic knowledge about PhenixID Server.

NOTE: Changes will be made to files that are located in modules for the current version of PhenixID Server. Meaning that the customizations made, needs to be manually transferred to the new module version when upgrade is made (except for the file phenix-store.json).

System requirements

  • PhenixID Server installed.
  • Version 3.2 or later
  • PhenixID Password Self Service configured

Overview

The instructions in this document will help you customize Password Self Service in PhenixID Server. Changes can be made to the parts of the pages described below.

Depending on the configuration and desired customisations, we will make changes to some, or all of the files mentioned in the instructions.
So please make sure that you have a recent copy/backup of these files.
Changes to the configuration file phenix-store.json should be made using the configuration portal.

NOTE: Changes made to the files above are located in modules for the current version of PhenixID Server. Meaning that the customizations made, needs to be manually transferred to the new module version when upgrade is made (except for the file phenix-store.json).

Customize the methods and login page(s)

We can make changes to the parts of the page numbered above. Follow the steps below for the respective parts of the page. Remember to have a backup of the files being changed.
Depending on the methods used, different templates will be changed depending on the configuration. Such as:
idpdiscovery.template
login.template
ot_login.template

1. Logotype and 2. Background (please be aware that the instructions will apply to all auth http pages using this template)

To change the logotype and background, please edit the file:
<PhenixIDinstalldir>/mods/com.phenixidentity~auth-http<VERSION>/templates/<templateofchoice>
and add the following line after the other css links:
<link rel="stylesheet" href="/authenticate/res/css/yournew.css">

Use the example below and paste it into a new file called yournew.css. Then place this file in:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/web/res/css

/* Change logo
   Important, change to correct height and width for image
*/
.top .logo {
    display: block;
    float: left;
    background: url('../images/yourlogosmall.png');
    background-repeat: no-repeat;
    display: inline-block;
    height: 27px;
    width: 58px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
/* Alternative 1: Remove background image */
body {
    background: none;
    background-color: green;
}
/* Alternative 2: Change background image*/
body {
    background-color: #eee;
    background: url('../images/yourbackgroundimage.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

So the images (in red) that is referenced in the example should be copied into:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/web/res/images

A URL pointing against an image can be used as well. 

3. Choice of Language

To remove the possibility to choose language on the login page find the following line:
"allowLanguageChange" : "true"
on the AUTHENTICATOR for PhenixID PSS and set it to false.
This is done in the Configuration portal/Advanced tab/Authentication - HTTP.
Add the parameter to the configuration, in case it’s not already present.

Example:

{
       "id": "245c1446-9122-4617-a7bb-919cf6bf88c0",
       "alias": "UidPwd",
       "name": "PostUidAndPasswordSAML",
       "displayName": "SAMLuidpwd",
       "configuration": {
               "allowLanguageChange": "false",
               "pipeID": "8cfe51a3-9579-4e88-95ab-217a683a93dc",
              "idpID": "d91f7721-9b65-453a-9fdf-8198301b21c8"
              }
}

To force the language, set the following parameter in the startup file:
Linux (start-PhenixID.sh), JAVA_OPTS="${JAVA_OPTS} -Dcom.phenixidentity.globals.defaultLanguage=en"
Windows (.vmoptions), -Dcom.phenixidentity.globals.defaultLanguage=en

4. Text

To change the text, locate the language file:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/web/res/lang/en/strings.xml
Find the section corresponding to what you want to change.

Service needs to be restarted after changes has been made.

5. Name and Icon on Authentication Methods

If two or more Authentication Methods has been configured, the names and icons of those can be changed. This is done on the Scenario in Configuration Manager.
Under Applications/Password self service. Go to the tab Authentication methods.
Set the desired description and choose an icon.

Sample icons are located in:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>web\res\images\icons

6,7 and 8. Logotype and color

Logotype is set in:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>\web\res\stylesheets\templates\<tempalteused>.
Icons are located in:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>\web\res\images\icons

Color is set in the same file, locate the two sections:

main .card {
  background-color: #288a49;
  background: #288a49;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.info {
  overflow: auto;
  overflow-x: hidden;
  background: #285a8a;
  color: #FFFFFF;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.33px;
  padding: 40px;
  justify-content: center;
  flex-direction: column;
  display: flex;
  width: 100%;
  order: 1;
}

Customize the Password reset page

1. Logotype

Icon is called default_blue.png and is located in:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-pwdreset~<VERSION>\web\images

2. Language

To remove the possibility to choose language on the reset password page, add the line:
"enable_language": "false",
on the module for PhenixID PSS.

This is done in the Configuration portal/Advanced tab/Modules.

Add the parameter to the configuration, like this example:
{
"name": "com.phenixidentity~phenix-prism",
"enabled": "true",
"config": {
"base_url": "/pss",
"enable_language": "false",
"auth_redirect_url": "/pss/authenticate/77ad39d3-5f5f-425d-b50e-fdad2e073da5",
"http_configuration_ref": "95c7aa57-7a0b-414a-85e1-c5468277bb33",
"enable_roles": "true",
"standalone": "true",
"module_refs": "0b5f8151-9f82-4877-a2a7-0b9a393ecc6c"
}
}

3. Text and language

To  change the texts and add/remove/change settings for language, edit the file translation.json (for the respective language), located in:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-pwdreset~3.2.0/web/locales/

To change the text size, add the following to index.html:
<style>#card-holder>div>form>div>div>div>div.ui.tiny.right.labeled.button > span.ui.label.tiny.basic {Font-size:10px!important;
}</style>

4. Background color:

Background color can be changed in the index.html page, under the head section, add:
<style>
body, section, section + #main{background-color: red!important;}
</style>

Can also be used with #1a9c12 and rgb(40, 90, 138).

Adding control against global breach list

Even though a password meets the local policies, there is still the possibility that the password has been part of a password leak .
It is possible to enable online control for breach validation checks.
If password has been found in prior data breach the user will be notified and can choose another password.

Enable external password check using the parameter:
"pwdreset_hint": "true"
On module:
"name": "com.phenixidentity~phenix-prism-pwdreset"

More information here.

Example of different password policies

Default policy rules can be changed in the scenario for PSS, under "Password Policy".
In case other password policy are needed they can be added through the Advanced tab, Modules and "com.phenixidentity~phenix-prism-pwdreset".
Add the desired regex to "pwdreset_rules", like the examples below.

At least 3 lowercase characters:
{\"name\":\"At least 3 lowercase characters\",\"regex\":\"^.*[a-z]{3}.*$\",\"enabled\":true}

At least 3 uppercase characters:
{\"name\":\"At least 3 uppercase characters\",\"regex\":\"^.*[A-Z]{3}.*$\",\"enabled\":true}

Comply with 3 out of 4:
{\"name\":\"Must contain upper or lower case letter, number or special character\",\"regex\":\"^(?:(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[^a-zA-Z0-9]).*)|(?:(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9]).*)|(?:(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[^a-zA-Z0-9]).*)|(?:(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^a-zA-Z0-9]).*)|(?:(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[^a-zA-Z0-9]).*)$\",\"enabled\":true}