API Driven UI#

It is possible to use HAAPI to create an API-driven user interface, such as a Single Page Application (SPA). This section describes the steps how to define API-driven user interfaces via the template system.

Enable API driven on the selected authentication profiles by adding the api-driven-ui configuration parameter in the corresponding authentication-service settings.

Assign the use_api_driven_ui template setting to true. This is done by adding #set ($use_api_driven_ui = true) to a settings.vm file:

  • located on the overrides folder, if the API-driven UI should always be enabled.
  • located on a template area, if the API-driven UI should only be enabled for certain clients.

Create a index.vm velocity template with the HTML document to load the API-driven application. This file should be present inside a api-driven-ui folder, located on the overrides folder or on a template area. The $_apiDrivenClientInfo velocity context object contains the information required to configure HAAPI Web SDK, namely:

  • $_apiDrivenClientInfo.clientId - evaluates to the ID of the HAAPI client to use.
  • $_apiDrivenClientInfo.tokenEndpoint - evaluates to the URI of the token endpoint used by the HAAPI client.
// using $_apiDrivenClientInfo to configure HaapiDriver
const fetchConfig = {
  clientId: '$_apiDrivenClientInfo.clientId',
  tokenEndpoint: '$_apiDrivenClientInfo.tokenEndpoint',
}
const apiFetch = HaapiDriver.createHaapiFetch(fetchConfig)

The API-driven application will be loaded on the first interactive step of the authentication flow, which can be the authenticator selector or a specific authenticator user interface.

Was this helpful?