@intrada-dashboard/ng-id v0.2.4

NG-Id - Angular IntradaID Integration

This package provides Angular components to integrate with IntradaID. This package is for internal use only and should not be used by non-Q-FREE employees.

Installation

Run npm i @intrada-dashboard/ng-id to install the latest version.

How to Use

Registering the module

To register the NgId module, add the following code to your own module:

import {NgModule} from '@angular/core';
import {NgIdModule} from '@intrada-dashboard/ng-id';

@NgModule({
    imports: [
        NgIdModule.forRoot({
            clientId: 'The IntradaId ClientID',
            scopes: ['DEMO_UPLOAD', 'CLIENT_VIEW'],
            // If an HTTP request starts with any of these URLs, the current token will be added (if present)
            tokenURLs: [
                'https://id.q-free.nl/api', // IntradaID - Do not remove this
                `${window.location.protocol}//${window.location.host}/api` // The current API
            ],
            routes: {
                default: '/',
                login: 'login',
                loginCheck: 'login/check',
                errors: {
                    403: '403'
                }
            }
        })
    ],
})
export class AppModule {
}

Creating the login routes

The login route

The login route is the route that the user is redirected to if authentication is required. To implement this route, create your own component and make sure that <id-login></id-login> is present in the template. This element will show a button that the user can use to start the authentication process.

Make sure to route this component to the path configured (by default this is login).

The login check route

When the authentication process is started, a new window will to IntradaID. The result of the authentication process will be retrieved in this window on the login check route. The component that handles this route should have <id-login-check></id-login-check> in its template.

By default the path for this route is login/check.

Retrieving a token

After authentication, the token is stored in the AuthenticationService. To interact with the service, pass it along through dependency injection:

import {Component} from '@angular/core';
import {AuthenticationService, Token} from '@intrada-dashboard/ng-id';

@Component()
export class AppComponent {
    constructor(
        readonly authenticationService: AuthenticationService,
    ) {
        // Retrieve the token - this will start the authentication process if no usable token is present 
        authenticationService.token.subscribe(token => console.log("Got a token!", token));

        // Retrieve an update when the token has changed.
        authenticationService.tokenChangeEvent.subscribe((token: Token|null) => console.log('Token changed!', token));

        // Redirect the user to the login page. This stores the current route and will return the user to the current
        // page if the authentication was successful.
        authenticationService.redirectToLogin();
   
        // This logs the user out and redirects him to the login page
        authenticationService.logout();
    }
}

Using the Guard Service

If you want to make sure users can only access a certain route if they are authenticated you can use the authentication guard. If a user is unauthenticated, the guard will redirect them to the login page. If the user is authenticated, but he does not have the right scopes, the user will be redirected to the 403 error page. As such, make sure to create the 403 route.

To make sure that the user is authenticated, add the canActivate segment to your route:

import { Routes } from '@angular/router';
import {AuthenticationGuardService} from '@intrada-dashboard/ng-id';

const appRoutes: Routes = [
    {
        path: 'user',
        component: UserComponent,
        canActivate: [AuthenticationGuardService]
    }
]

If you want to make sure that a user has the right scopes, you can set the scopes inside the data property:

import { Routes } from '@angular/router';
import {AuthenticationGuardService} from '@intrada-dashboard/ng-id';

const appRoutes: Routes = [
    {
        path: 'admin',
        component: AdminComponent,
        canActivate: [AuthenticationGuardService],
        data: {
            scopes: ['ADMIN']
        }
    }
]