This is a Web UI to generically process Siren Hypermedia Format speaking http servers. Links, embedded entities and actions (including parameter forms) are generically rendered purely from the API response.
There are minor deviations from the Siren hypermedia format, mainly on how action parameters are specified and a specification for file uploades. For more details see the RESTyard documentation
There is a Live demo hosted on github pages.
Ready-to-deploy versions can be found under Releases. For configuration see Configuration
This Client is designed to work with APIs implemented using the RESTyard project. Use the demo server "CarShack" from this project to have a quick compliant backend.
NOTE The code was originally developed here but was now moved to the RESTyard organization.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
The UI can be customized by deploying an artifact from Releases (or from building your own) and modifying the app.config.json file that is next to the index.html. This file is read by the app on the first load and could look like this:
{
"disableDeveloperControls": true,
"configuredEntryPoints": [
{
"alias": "SomePage",
"title": "Some Page",
"entryPointUri": "https://localhost:1234/api/some/EntryPoint"
}
],
"onlyAllowConfiguredEntryPoints": true
}The configuration in details works like this:
default: false
when set to true removes the settings button and with it all access to the general settings and site settings.
This includes not showing the raw view, classes, any empty views or null properties, and not showing host information.
default: false
when set to true will not permit the user from entering their own entry point in the home path, instead taking the user to the first configured entry point. Only set this when there is at least one entry point configured
default: []
a list of entry points that are pre-configured. The alias defines the subpath, under which that API is available. The alias "SomePage" means that if the ui is hosted unter https://some.url, then going to https://some.url/SomePage will use the entryPointUri of https://localhost:1234/api/some/EntryPoint and enter it immediately upon loading, and also display the title "Some Page" in the top left instead of "Hypermedia UI".
The exit button on the top left then also returns the user to /SomePage instead of the main page.
The following values for alias will have no effect, since they are already used internally and have precedence over the wildcard route used to implement the alias:
- hui
- auth-redirect
- logout-redirect
The UI supports authentication with an OIDC provider by using the oidc-client-ts npm library.
The parameters/formats from this Microsoft article are used / asserted.
Upon receiving a 401 response from the API with a www-authentication header starting with "Bearer", the values authorization_uri and client_id are extracted. These will be used to make an OIDC call to the authorization uri.
The redirect uri is given as /auth_redirect with the current alias (in case of a configured entry point) or hui as the path parameter, and the current api path as the apiPath parameter.
When redirected to auth-redirect, the token is extracted and saved under the site specific settings for the API, and the user is internally redirected to the page they just requested using the path and apiPath parameters.
The exit button on the top right performs a logout action on top of leaving the API. The user is redirected to the /logout-redirect page and is able to see if the logout was successful. While the app is open it remembers this, such that when authenticating again, the OIDC provider is prompted to select an account explicitly, preventing an automatic re-login after logout, especially when the user was in a configured EntryPoint which enforces authentication from the start.
