Assumptions
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 Haventec IAM has been selected while creating your application in Console. Further, you will need to refer to settings available from the Console Application Details for values required to configure your front-end application and your server.
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.
Upon creation of an application through Console, your IAM will be auto-provisioned. Values generated by this process are available in the application details panel for your application within Console 2.0.
Configure
Front-end project:
Your front-end network service will require the application's provisioned applicationUuid value. You will find this in your application details within Console 2.0.
Assign this value to the APPLICATION_UUID constant in your application code. An example of this can be found in the application.constants.ts file of the reference projects, described below.
Server:
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.
Console 2.0:
You will need to provide a value for the App Login Page within Protocol Settings. To test the reference app running locally the value might be: http://localhost:4200/landing/
For example:
Create an entry point
After you have created your application and configured your server and project code, you will need to construct a URL as an entry point into the OpenID authentication flow.
This URL will initialise Connect and begin the authentication use-case.
The schema of this URL is:
<iam-issuer>/protocol/openid-connect/auth?client_id=user-client&redirect_uri=<redirect-uri>&response_mode=fragment&response_type=code&scope=openid
where:
<iam-issuer> corresponds to the IAM server endpoint including the auto generated realm name.
<redirect-uri> the URI of the page to which the user will be redirected by Connect upon authentication.
The <iam-issuer> value can be retrieved from the application settings panels of your application within Console 2.0.
For example:
From Application Details - OpenID Details:
Let's assume a value for <redirect-uri> of: http://mockbin.org/request
Using these values, The URL would be constructed as follows:
https://iam.demo.haventec.com/auth/realms/new_organisation_oidc/protocol/openid-connect/auth?client_id=user-client&redirect_uri=http://mockbin.org/request&response_mode=fragment&response_type=code&scope=openid
This URL can be pasted into your browser URL bar to commence the process. The user will be directed to the landing page of the project application.
Running your project application
Server tokens
When your project application is running, 6-digit authentication numbers (tokens) will be requested for entry by the user. These tokens will be generated and displayed in the Node.js console log, or wherever your server logs to. Cut and paste to complete the authentication. Alternatively you can configure a mail server to send these tokens via email. Use these where prompted.
README
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.
>app
Resource | Description |
Details
|
app-routing.module.ts |
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.
|
>constants application.constants.ts
|
Implementation specific configuration properties. |
APPLICATION_UUID: string
Please assign the Application UUID you received from Haventec Console
You can find out where to locate these values for your application here:
|
>interfaces |
Various interfaces corresponding to individual pages and the service calls. Responses interfaces may be used when extracting url params upon IAM redirect to each component route. Note that the properties used for the various service calls may be a subset of those available in the Haventec Authenticate APIs |
The interfaces provide definitions corresponding to:
|
>pages>landing-page |
Default route component which lists available options:
|
Upon selection, the user is routed to the relevant page:
|
>pages>login |
Login: |
|
>pages>add-user |
Add a User to this Device |
|
>pages>activate-user | ![]() |
|
>pages>add-device |
Add a Device for an Existing User |
|
>pages>activate-device | ![]() |
|
>pages>change-pin |
Reset your PIN on this Device
|
|
>pages>reset-pin | ![]() |
|
>services auth.service.ts |
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: https://github.com/Haventec/authenticate-web-sdk |
>services authenticate.api.service.ts |
Provides access to server endpoints. This implementation makes requests to a Node.js server to proxy calls to the Haventec Authentication SaaS services, and provide email services. You can find more information about the sample Node.js server here: |
|
>assets
Logos, fonts and font face definitions, and various styling definitions are provided as placeholders for your own styles
Configuration
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.
Comments
0 comments
Please sign in to leave a comment.