...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
The parts of Smart ID Digital Access component
...
that end-users can access can be branded, in order to achieve a corporate look-and-feel.
...
Branding and customization can be performed on different levels, ranging from replacing the logotype in the application portal to customizing the appearance of the entire application access procedure: from the software token used for web authentication, through log in pages, and the portal itself.
...
...
Digital Access Admin there is a “Browse” button that leads to a file browser with all files that builds up the portal (the access-point/built-in-files/wwwroot/ folder and sub-folders structure). Copy the files that shall be changed to access-point/custom-files/wwwroot/ within the same file structure before branding starts. | Note |
|---|
Do not change the original files The reason for this is that changes will be lost when upgrading the system. |
| Info |
|---|
Files placed in the …/custom-files/wwwroot/wa folder and sub-folders structure override corresponding files in …/built-in-files/wwwroot/wa folder and sub-folders structure. |
|
| Expand |
|---|
| title | What parts can be customized? |
|---|
|
These parts of |
...
...
component can be branded and customized: What you can do | How to do it | File name |
|---|
Customize colors and fonts in log in pages. | Edit the style sheet for log in pages. | /wa/css/main.css | Customize texts or buttons in log in pages. | Edit individual template files. | Refer to sections below. | Change the logotype in the portal. | Replace the logotype used. | nexus_logo_desktop.svg etc | Customize colors and fonts in the portal. | Edit the application portal style sheet. | themeroller.css and overrides.css |
|
Step by step instructions
...
...
...
- to Digital Access Admin with an administrator account.
|
| Expand |
|---|
| title | Change branding texts |
|---|
|
In the ...branding folder, all texts specific to |
...
...
component are collected. These texts can be customized. - In
|
...
...
- Admin, click Browse.
- Make sure that all files that should be changed in the access-point/built-in-files/wwwroot/branding directory have been copied to access-point/custom-files/wwwroot/branding.
- Modify the appropriate texts in the files described in the table below.
- Click Publish to publish the configuration.
Files | Description |
|---|
authAD.txt | Heading for the Active Directory login page. Appears on every Active Directory template. Note that the other authentication methods are defined by their Display Name and do not need a branding text file. | authselect.txt | Heading for the “Select Authentication Method” page. | authweb.txt | Name of |
|
...
...
component Web when referred in javascript dialogs explaining how to accept |
|
...
...
component Web ActiveX or java applet. | company.txt | Name of the company. Appears in the application portal. | company_about_url.txt | URL leading to information about the company. | company_contact_url.txt | URL leading to contact information. | copyright.txt | Copyright notice. | portal.txt | Name of the application portal. Appears on the application portal and it’s help page. | product.txt | Name of the product. Appears on the title of each page. product.txt also provide the text to HTML <title> tag. |
|
| Expand |
|---|
| title | Customize text or buttons in log in pages |
|---|
|
To customize texts and buttons in individual log in pages, there are template files that must be edited. These template files are located in different folders. | Note |
|---|
Customizing template files requires adequate HTML proficiency. |
- In
|
...
- Digital Access Admin, click Browse.
- Copy the template files from the folder structure in /access-point/built-in-files/wwwroot/wa to the corresponding folder structure in /custom-files/.
- Edit any template file that needs to be changed.
- Click Publish to publish the customized file.
These are the template files located in access-point/built-in-files/wwwroot/wa. |
...
...
File name | Description | User variables |
|---|
_auto_reauthmessage | Page displayed when the user has to log off and re-authentication is required. |
| _chooseAuthmech | Page displayed when authentication method is to be selected. | name
displayname | _closedown_message | Page displayed when user is timed out from the Access Point. |
| _deleteLogonCred | Page displayed when password database has been cleared. |
| _error | Error message displayed to the user. | errmsg | _InternalAuthentication | The Internal Authentication form. | ssodomain
ssohost
iuid
idom | _logoutPage | Page displayed when user has logged off. |
| _no_session | Page displayed when a session has timed out. |
| _popup_msg | Page used to display a popup message to the user. | location errmsg | _reauthmessage | Time-out message displayed to user. |
| _refresh_top | Page displayed when a user needs to refresh the browser. |
| _securitywarning | Page displayed for security warnings. | errmsg | _TimedoutPage | Page displayed when a user is temporarily locked until a specific time out occurs (currently concerns only SecurID). | auth_timeout | 302 | Page displayed to redirect the user when a page has moved. | location | 302_top | Page displayed to redirect the user when a page has moved. | location | 400 | Page displayed subsequent to a bad request. |
| 401E | Page displayed subsequent to external authentication failure due to mismatching credentials, if the authentication method on the device is set to Basic authentication. | authmech location | 401I | Page displayed subsequent to an internal authentication failure due to mismatching credentials, if the authentication method on the device is set to Basic authentication. |
| 401WIL | Displayed when a user fails to log on using Windows Integrated Login. |
| 403 | Page displayed when a client requests a forbidden resource, that is, Access Control denies the resource to be accessed. | eprot
ehost
uri | 404 | Page displayed when a requested file on the Access Point does not exist. | eprot
ehost
file | 405 | Page displayed when a HTTP-method which is not allowed has been used in a client request. | eprot
ehost
uri method allow | 500 | Page displayed when a server error occurs. | errmsg | TestLogonLoginPage | Log in page for TestLogon, that is, when a user requests http://127.0.0.1:19146/ wa/auth?authmech=TestLogon on the local computer where the Access Point is installed. |
|
These are the template files located in access-point/built-in-files/wwwroot/wa/authmech/base |
...
. File Name | Description | User variables |
|---|
GenericForm.html | Base Template for log in forms used in conjunction with Template Specifications of type “GenericForm”. The template specifications form the appearance of the log page for the authentication method by supplying the content of the user variables. | heading
errmsg
explanation
message
nolocalstoreText
textText
textValue
readonlyText
readonlyValue
passwordText
checkboxText
checkboxValue
tokenText
oath-newdevice-link
reset-password-lin | Dialog.html | Base template used in conjunction with template specifications of type “Dialog”. | heading
errmsg
explanation
message
buttonText | Applet.html | Base template used in conjunction with template specifications of type “Applet”. | heading
errmsg
buttonText | | Json,html |
|
| | SelfServiceForm.html |
|
| | SelfServiceFormPIN.html |
|
| | SelfServiceUserChallenge.html |
|
| | SigningForm.html |
|
|
|
| Expand |
|---|
| title | Customize colors and fonts in log in pages |
|---|
|
Stylesheets control colors and fonts in log in pages. Use your browser to inspect the log in page and locate where different elements are customized within the stylesheets (css files). To customize the colors and fonts, use the files in this directory: built-in-files/wwwroot/wa/css. - In
|
...
- Digital Access Admin, click Browse.
- Copy the css files from the folder structure in built-in-files/wwwroot/wa/css to the corresponding folder structure in /custom-files/.
- Edit the files.
- Click Publish to publish the customized file.
|
| Expand |
|---|
| title | Change graphics in log in pages |
|---|
|
| Note |
|---|
Name the image nexus_logo_desktop.png (in PNG format). Other naming will require HTML code editing. |
- In
|
...
- Digital Access Admin, click Browse.
- Navigate to the folder access-point/custom-files/wwwroot/wa.
- If no img folder exists, enter img next to Create Empty and click Directory to create a new folder called img.
- Navigate to the img folder.
Create folder called nex. Navigate to the nex folder. - Click Choose File and navigate to the folder where the image you will use is located.
- Select the applicable image and click Open. The path to the selected image is displayed in the field next to the Choose File button.
- Click Upload to place your image in the nex folder.
- Create other branded images there with the same names as those in built-in-files/wwwroot/wa/img.
- Close the Administration interface browser window.
- Click Publish to publish the configuration.
|
| Expand |
|---|
| title | Customize colors and fonts in portal |
|---|
|
To customize colors and fonts in the portal, the tool jQuery Mobile Themeroller is used (http://jquerymobile.com/themeroller/). - Click the Import button at the Themeroller top main menu.
- In the opened dialogue window paste your previously downloaded themeroller.css (first you need to copy the source code with CTRL+C or cmd+C).
- Click the Import button in the dialogue window to upload the code to Themeroller.
- Make the changes in colors etc and click Download to save the new theme.
- Name the file themeroller.1.4.5.
- A .zip file is generated with both themeroller.1.4.5.css and themeroller.1.4.5.min.css.
Only the minified version themeroller.1.4.5.min.css is used by the interface but keep a copy of the changed themeroller.1.4.5.css to use for future changes. - Click Download. Place both files in access-point/custom-files/wwwroot/wa/css.
- Edit corresponding Themeroller Swatches to change properties for each section in the interface:
Swatch | Section |
|---|
| data-theme="a" | Background, header bar | data-theme=”b” | Log out button; Resource accordion buttons | data-theme=”c” | Support tab; Settings tab | data-theme=”d” | Tab menu bar | data-theme=”e” | Session popups buttons | data-theme=”f” | Session popups buttons |
For design elements which are not part of the jQuery Mobile script, edit /built-in-files/wa/css/overrides.css and place the customized overrides.css file in access-point/custom-files/wwwroot/wa/css. |
| Expand |
|---|
| title | Replace logotype in portal |
|---|
|
| Note |
|---|
Name the logotype nexus_logo_desktop.svg (in SVG format). Other naming will require HTML code editing. |
- In
|
...
- Digital Access Admin, click Browse.
- Navigate to the folder access-point/custom-files/wwwroot/wa.
- If no img folder exists, enter img next to Create Empty and click Directory to create a new folder called img.
- Navigate to the img folder.
Create folder called nex. Navigate to the nex folder. - Click Choose File and navigate to the folder where the logotype you will use is located.
- Select the applicable image and click Open. The path to the selected image is displayed in the field next to the Choose File button.
- Click Upload to place your logotype in the img folder.
- Close the Administration interface browser window.
- Click Publish to publish the configuration.
|
| Expand |
|---|
| title | Replace variables in template files |
|---|
|
When an HTML/WML page is displayed to a user, user variables in the template file are replaced with corresponding content. See the table for more information. User variables | Description |
|---|
allow | Comma-separated list of allowed HTTP methods for the current host and URI. | auth_timeout | Number of seconds left of the period of time a user is locked from logging on to the Access Point (used in combination with SecurID log in). | authmech | Authentication method for an authenticated user. | authmech | Variable used in Template Specification that stands for the authentication method. | authtimeout | Number of seconds remaining before an authenticated user will be logged out. Used in the timeout warning page. | do | Variable used in Template Specification that stands for the authentication method. | ehost | External host name, i.e. the HTTP Host in the client request to the Access Point (for example mvpn.thesecurecompany.com). General variable that can be used in all templates. | eprot | External protocol, that is, the protocol between the client and the Access Point: HTTP or HTTPS. General variable that can be used in all templates. | errmsg | Error message from the Access Point. | explanation | Explanatory text in Template Specification. | final_timeout | Number of minutes remaining before the maximum lifetime of the current session is reached and the session will end. | heading | Main heading text in Template Specification. | idom | Variable for internal domain. | ihost | Internal host (alias) currently accessed by the user (not necessarily the same as the HTTP “Host” header in the Access Point request to the internal host). | input-heading | Heading text for an input field in Template Specification. | iprot | Internal protocol currently accessed by the user: HTTP or HTTPS. | iuid | Internal UserID (uid filtered through NameMapper.wascr). General variable that can be used in all templates. | iuri | Internal URI, in requested from Access Point to host. | location | A URI or a URL specifying where to redirect during log in. | maxSessionTimeout | Number of maximum minutes for a user session. The value is specified in the configuration. | message | Message from the Authentication Service. | method | HTTP method in a GET request. | ntdomain | NT domain name. | pin | PIN for authentication. | protocol | URL parameter used for the Access Client describing the protocol to be used by the tunnel: EESSP or SSL. | reauth_uid | User ID used in RADIUS pages. | redirect | URL parameter used for Access Client. | replyMsg | Variable in RADIUS pages. | servernumber | Log in challenge number from the Authentication Service. | title | Variable part of a Template Specification. | tunnelCipherIv | The Base64 encoded cipher IV. Parameter that is dynamically generated by the system. | tunnelCipherKey | The Base64 encoded cipher key. Parameter that is dynamically generated by the system. | upd | The value of the UPD cookie used for session handling in load balanced environment. Dynamically generated by the system. | uid | UserID for an authenticated user. General variable that can be used in all templates. | uri | URI requested from client to Access Point. | waak | Parameter configured in the Administrator. Used in session handling. | warningtimeout | Number of seconds remaining before a warning message or another log in page is displayed to the user. | wasid | The user WASID. Parameter configured in the Administrator, used in session handling. |
|
| Expand |
|---|
|
There are several versions of the images in the portal. There is one set of images for desktop (and tablet) and one set for mobile, and there is one version of each image in .PNG (used for low end browsers) and one in .SVG (used for high end browsers). Images are replaced or edited to customize the |
...
...
component Web skin, the logotype or icons in the application portal, or graphics used in log in pages. When replacing images, use the same name, format and size as the original. See the table below for examples.
|
...
...
component Web skin images down.jpg and up.jpg can be of either JPEG or GIF format. The image mask.gif must however be in GIF format (indexed palette). Also note that all three files must have the same dimension in pixels. |
Directory location | File name | Description |
|---|
…/built-in-files/wwwroot/wa/img/nex | nexus_logo_desktop.png
nexus_logo_desktop.svg
nexus_logo_mobile.svg | Logotype for the portal | …/built-in-files/wwwroot/wa/authmech/base/WebSkin.zip | mask.gif | The mask for (controls the position of) buttons and labels |
|
...
...
component Web | …/built-in-files/wwwroot/wa/authmech/base/WebSkin.zip | down.jpg |
|
...
...
component Web skin without background, with buttons depicted as pressed | …/built-in-files/wwwroot/wa/authmech/base/WebSkin.zip | up.jpg |
|
...
...
component Web skin with background, with buttons depicted as not pressed |
|
...
Related information
Links
...
