This guide assumes proficiency in web application development using Angular, Typescript and Node.js
Stack: Angular 14, bootstrap, font-awesome, rxjs, TypeScript and Node.js. See package.json for more information
This reference code assumes that Silent MFA has been enabled in the Main Settings within your Console application.
Further, you will need to refer to settings available from the Console Application Details for values required to configure your server application.
Before you start
Please review the following articles before continuing:
You will need to have signed up your organisation in Haventec Console 2.0.
Further, you will need to have created an application which you would like to authenticate with Haventec.
Your front-end network service makes use of the @haventec/mfa-client SDK. Please ensure you have run npm install to load this library.
The HaventecMfaClient client class is configured with urls corresponding to backend service routes, as well as polling preferences. When used in conjunction with the authenticate-node-server NodeJs implementation, the config object would look something like this:
Be sure to configure your local server in proxy.conf.json in the root of the the authenticate-angular-sdk folder. By default this is set to target the localhost port on which the authenticate-node-server instance will run. See authenticate-node-server for configuration details.
Running your project application
When your project application is running and you have been prompted for a username and password, a magic-link will be emailed to your nominated address. This link will activate a new or existing user on a new or existing device. Once you have received an email, click this link. You can then return to your running application, which will have been redirected to your landing page.
Please refer to the README.md files within each workspace directory for information on how to install, configure and run your project application and server.
Reference Code Overview
The >src folder of this project contains the application, assets and configuration files. Each will be explored in turn.
Please refer to the actual code pertaining to each resource mentioned for this project.
Maps paths to components
Defaults to landing-page (see below)
<router-outlet> for this routing module is contained in app.component.html
Pages are generally loaded in response to navigation commands within components following network activity.
Various interfaces corresponding to individual pages and the service calls and responses associated with them.
The interfaces provide definitions corresponding to:
|This service provides handles to access the Haventec Authenticate SDK local storage utilities.
Information about this SDK is available at the following github repo page:
Provides access to @haventec/mfa-client SDK HaventecMfaClient
This implementation calls the loginWithRegisterFallback method, providing a Config object with the following interface:
The SDK coordinates the login and registration process and redirects to specified server routes as required.
You can find more information about the sample Node.js server here:
Logos, fonts and font face definitions, and various styling definitions are provided as placeholders for your own styles
Files sitting at the root of the >src folder are those typically found in Angular applications. Please refer to relevant web training resources for more information.