Enable Banking Docs

Auth Flow Customisation for TPPs

# Domain names

A TPP can assign domain names to the web service (deployed in it dedicated environment) for handling of authentication and authorisation flows taking place when end-users (PSUs) interact with their ASPSPs.

This is done by adding an A record to the TPP's DNS, pointing to the IP address provided by Enable Banking.

# UI

The following HTML structure is used by Enable Banking to render the authentication flow page shown to end users (PSUs) both before they are redirected to their ASPSPs and after they return from the ASPSPs to continue with the TPP's business logic.

# Page structure

<html>
  <body class="{tppName}">
    <div id="app">
      <main>
        <div class="enablebanking-locale">
          <!-- the locale indicator and the modal (pop-up) dialog used for manual locale change -->
        </div>
        <div class="enablebanking-[ais|pis|home]">
          <div class="enablebanking-status">
            <div class="enablebanking-status-spinner">
              <!-- the spinner element appering when an end-user needs to wait -->
            </div>
            <div class="enablebanking-status-message">
              <!-- the messages describing the current status of authorisation -->
            </div>
            <div class="enablebanking-status-error">
              <!-- the messages displayed in case of errors occuring during authorisation -->
            </div>
          </div>
          <!--
            Elements used during authorisation flow, such as the authentication form,
            the account selection form or the OTP input form.
          -->
        </div>
      </main>
    </div>
  </body>
</html>

# Classes

# Body class

The body element includes the class attribute, which is set to the name of the TPP as internally used by the Enable Banking API.

# Page classes

  • enablebanking-home - element wrapping the main content on the root page (/) of the domain assigned for authorisation flow handling
  • enablebanking-ais - element wrapping the main content on the page handling authorisation for access to account information (/ais/)
  • enablebanking-pis - element wrapping the main content on the page handling authorisation of payments (/pis/)

# Locale selection classes

  • enablebanking-locale - element wrapping the locale indicator and the modal (pop-up) dialog used for manual locale change

# Status indication classes

  • enablebanking-status - element wrapping the top part of the pages handling authorisation flow and containing the spinner element, info messages and errors
  • enablebanking-status-spinner - element wrapping the spinner element appering when an end-user needs to wait
  • enablebanking-status-info - element wrapping the messages describing the current status of authorisation
  • enablebanking-status-error - element wrapping the messages displayed in case of errors occuring during authorisation

# Generic action classes

  • enablebanking-cancel-button - button element, which can be used for cancelling authorisation

# Authentication form classes

  • enablebanking-auth-form - form element wrapping the form used for input of credentials required by an ASPSP for authorisation of access to account information or payment authorisation
  • enablebanking-auth-form-method-section - element wrapping the UI for auth method selection
  • enablebanking-auth-form-credentials-section - element wrapping the UI for credentials input
  • enablebanking-auth-form-submit-section - element wrapping the form submission button
  • enablebanking-auth-method-select - select element displayed in case multiple authentication methods are available
  • enablebanking-auth-credential-row, enablebanking-auth-credential-col - nested elements containing the UI for input of one credential
  • enablebanking-auth-credential-input-group - element wrapping the input element and the element used for toggling visibility of the credential input text
  • enablebanking-auth-credential-input - input element used for entering a credential
  • enablebanking-auth-credential-visibility - element used for toggling visibility of the credential input text
  • enablebanking-auth-credential-visibility-caption - element containing the icon indicating visibility of the credential input text
  • enablebanking-auth-credential-description - element containing the credential description
  • enablebanking-auth-submit-button - button element used for submission of the authentication form

# Account selection classes

  • enablebanking-account-selection - element wrapping the account selection UI
  • enablebanking-account-selection-caption - element wrapping the text "Please select an account to pay from"
  • enablebanking-account-selection-form - form element wrapping the form displayed in case payment initiation requires account selection to be done one the TPP side and multiple payment accounts are available to an end-user
  • enablebanking-account-selection-radio-input - input element wrappign the information about one account
  • enablebanking-account-selection-submit-button - button element used for submission of the account selection form

# OTP input form classes

  • enablebanking-otp-form - form element wrapping the form displayed when an end-user is required to input a code for the second factor authentication (so-called embedded SCA flow)
  • enablebanking-otp-input - input element used for input of the second factor OTP
  • enablebanking-otp-submit-button - button element used for submission of the OTP input form

# QR code classes

  • enablebanking-qrcode-container - element wrapping the image or canvas element with the QR code used authentication
  • enablebanking-qrcode-image - image or canvas element with the QR code used authentication

# Custom CSS hosting

A TPP shall host a single file containing CSS customising styles used by the web service for handling of authentication and authorisation flows. Enable Banking will load the custom CSS for the provided URL.

# CSS caching

To ensure that web browsers do not cache outdated versions of the CSS file, you can either:

  1. Redirect from the URL provided to Enable Banking to a URL that includes a content hash in the file name and update the hash whenever the content changes. E.g. https://tpp.domain/custom-auth-flow.css -> https://tpp.domain/custom-auth-flow.8743b5.css

  2. Use advanced caching headers to control how content is cached by web browsers. E.g. Cache-Control: max-age=31536000, must-revalidate, ETag: "8743b5"

# Separate URLs for sandbox and production

It is also possible to use different URLs for sandbox and production environments. This allows testing changes in a sandbox without impacting the production setup.

Example:

  • Sandbox URL: https://tpp.domain/custom-auth-flow.sandbox.css
  • Production URL: https://tpp.domain/custom-auth-flow.production.css

← Operational Risk Management →