User experience

​The user experience can be modified and customized based on different needs. 

 

Here you will find these topics:

User presentatio​n mode

 

​There are two different presentation modes in E-Ident: Embedded and Standalone​. The E-Ident service display the user interface in either of these modes. The display mode is set using the wi parameter in the identification request. ​

​​​Embedded user interface

​​​​Embedded option allows customers to present E-Ident service UI within their own web UI. To access the embedded UI, the following URL can be used (for customer test):

https://www.ident-preprod1.nets.eu/its/index.html?scope=openid&response_type=code&client_id=<clientid>&redirect_uri=<redirect_uri>&state=<state>&nonce=<nonce>&wi=r

​Note: The parameter wi is sent with the value r for embedded user interface.

The page that is returned by the above URL can be styled with your own look-and-feel to fit your web UI. One example is to display the response from embedded UI E-Ident URL into an iframe in the customer’s web UI.

A simple iframe can be setup with similar HTML code as below.

 <iframe name="E-Ident"
     src="https://www.ident-preprod1.nets.eu/its/index.html?scope=openid&response_type=code&client_id=<clientid>&redirect_uri=<redirect_uri>&state=<state>&nonce=<nonce>&wi=r" 
     height="512" width="640">
 </iframe>

embedded ui.png

​Standalone user interfac​​​​e

 

In the standalone UI, the E-Ident service displays the default E-Ident visual interface to the end user. To access the standalone UI, the following URL can be used (for customer test):

https://www.ident-preprod1.nets.eu​/its/index.html?scope=openid&response_type=code&client_id=<clientid>&redirect_uri=<redirect_uri>&state=<state>&nonce=<nonce>&wi=n

Note: The parameter wi is sent with the value n for embedded user interface.​

The resulting page from the above URL does not require any further styling from you i.e. the end user can be directly taken to the standalone user interface E-Ident URL.​ Your logo and information text are set upon configuration in E-Ident. 

standalone UI.png

 eID selection page​​

For customers enabled with more than one eID, end users can choose between the available eIDs.

eID selection page.png 

​Note: The list of eIDs on this page can be modified using the amr_values and forcepkivendor parameter for OIDC and SAML identification requests respectively. If there is only one value, the page will not be shown and the end user is routed directly to the specified eID's identification page.


​Status pag​e​ (only when using the SAML protocol)

Whenever an unexpected event occurs, a status page with a status message can be displayed to the end user. The status message provides the end user with a simple explanation of the cause. Sometimes a suitable remedial action is also provided. The default status page is provided by E-Ident. This can be overridden by providing a custom status page URL. The status page URL can be set either in the customer configuration or in the status parameter sent in the identification request.

Status page_med.png

 

CSS styling

All CSS style elements from the CSS can be customized. ​The default E-Ident CSS file can be downloaded from here: https://www.ident.nets.eu/css/default.css. ​ 

eID selection page​​​

E-Ident displays the eID selection page if the customer supports more than one eID. This page is skipped if there is only one valid eID for the current request (see description above for usage of identification request parameters). 

eID selection - css_ny.png

 

 

​Element​Description ​Defaults
​BODY: iframe​HTML body tag (root element for styling)​Width: 100%
​DIV: ipage​Page parent tag contains all other content items.
​SPAN: headerPki #h2​HTML span tag with h2 as CSS id and headerPki as class.
​FORM​A form houses all listed eIDs.
INPUT: idpchoice
#pki<1>
​Each eID provider element is an HTML input tag with pki<eID provider number> as CSS id.  
​INPUT: idpchoice_hover​The idpchoice_hover class is invoked when the mouse passes over an item in the eID provider list​

Status page​​

The status page is shown when an unexpected event occurs if you are using the SAML protocol and have not set the status URL.

Status page - css (002)_ny.png

 

 

​Element​Description
​DIV: error_logo​Icon next to status message
​DIV: error_main​Container for error messages and buttons
​DIV: ipageheader​Message heading just above the status message (some messages do not have headings)
​DIV: error​Status message text
​DIV: formcontrols​​Form control elements (input buttons and submit buttons)
​FORM #error_form​Form for input buttons
​INPUT: formcontrol​Input buttons​

CSS style sheet elements

List o the general style sheet elements. In addition, there are some eID specific elements. Those can be seen in the default CSS.

 
​Style sheet elements​​Description/usage
​.iframe​This class is assigned to all HTML body tags in E-Ident
​.ipage​Each page has a master div tag with an ipage class
​.idpchoice​The eID provider selection page displays each eID as a form button. Each button uses this class
​.idpchoice:hover, .idpchoice_hover​Class used for eID choices that are in focus (onMouseOver)
​.form_a​HTML links within a form
​.formcontrols​Parent class for form controls (all form controls are placed within a single div using this class)
​.formcontrol​Each form control is assigned this class
​.formcontrol:hover​Class used for form controls that are in focus
​.error_main​Alert box for displaying status messages
​.error​Status message or error message
​.error_logo​Icon next to status message
​.info​Info box
​#h0 #h1 #h2 #h3 #h4​Heading text classes (number grows as the heading size decreases. Normal heading size is h3)
​#t0 #t1 #t2 #t3 #t4​Normal text classes (number grows as the text size decreases. Normal text size is t3)
​#w0 #w1 #w2 #w3 #w4​Warning text classes (number grows as the warning size decreases. Normal text size is w3)
​#n0 #n1 #n2 #n3 #n4​Highlighted text classes (number grows as the highlight text size decreases. Highlight text size is n3)
​.main​Main container for  page
​.ipageheader​Header inside iframe
​.logo​eID logo container
​.formheader​Header inside form
​.status​Status messages inside form
​.info_body​DIV container for information to the user and input fields.
​.body​Information text
​.text​Input fields with text or number input​

eID specific user experience

 

Recommended IFRAME sizes

​eID ​Minimum dimension in pixels (weight x height)
​BankID (NO)​400 x 280
​BankID on mobile phones (NO)

​480 x 280 (regular GUI will be shown)

479 (or lower) x 280 (a smaller, responsive GUI will be shown)

​NemID JS client (DK)

​200 x 250 (limited mode)

500 x 450 (standard mode)

​NemID CodeFile client (DK)​500 x 200

For other eID specific user experience adjustment, see the description of the specific eID at the eID pages​.

Language support

E-Ident supports the following languages:

  • English
  • Norwegian
  • Swedish
  • Danish
  • Finnish

The language presented to the end user is based on these criteria:

  • If the ui_locales (OIDC) or the locale (SAML) parameter is added to the identification request, the language specified as the value will be presented to the end user.
  • If the language parameter is not used, the language in the end user's web browser are presented.
  • If no supported languages are available in the browser or the language parameter is not used, then Norwegian as default will be displayed.

Read more about the ui_locales parameter under the Optional identification parameters for OIDC and the locale parameter under the Optional identification parameters for SAML.


 

​​​