API Driven UI¶

It is possible to use Hypermedia Authentication API to create an API driven user interface, such as a Single Page Application (SPA). The steps to accomplish this via the template system are described in the following paragraphs.

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.

Listing 208 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.