PmeLoginModule

An authentication service, authentication interceptor and associated components for logging into the asa access control service.

Dependencies

This Library Depends on the following libraries. Angular Material 5.0.4 Angular 5.2.6 or above rxjs 5.5.2 or above

Getting Started

Install the login module via npm.

npm install pme-login-module --registry http://nuget.ma.aptima.com/npm/AMeasureJSNPM

Import pme-login-module in your app.module.ts. It is important to also load the AuthService and AuthConfig classes for instantiating the services.

import { AuthService, LoginModule, AuthConfig } from 'pme-login-module';

Create an AuthConfig constant in app.module.ts with the desired url for the auth server. This defaults to http://pmattdb.ma.aptima.com/accesscontrol/

const AuthConfig = {
  serverUrl: 'http://localhost:5000/'
};

You can also provide the url to the login page of your app which will be used for any 401 errors. The path defaults to 'login'.

const AuthConfig = {
  serverUrl: 'http://localhost:5000/',
  loginUrl: 'user-login'
};

Add the Login Module to your app module's imports, passing in the AuthConfig object created above.

LoginModule.forRoot(AuthConfig)

Add the AuthService to your providers. (Note: I also had to add MatDialog to the providers in order to get around a runtime error complaining about no provider for MatDialog.)

providers: [AuthService, MatDialog]

Using the Login Module

The login module is designed to be used with an AuthGuard and Angular's Routing. Example Route Configuration

import { Routes, CanActivate } from '@angular/router';
import { LoginComponent } from 'pme-login-module';
import { AuthGuardService as AuthGuard } from './services/auth-guard.service';
import { MainComponent } from './main/main.component';

export const ROUTES: Routes = [
  { path: '', component: MainComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: '' }
];

In the above example the Main Component is the Workbench Dashboard and the Login Component is from the Login Module.

Example AuthGuard

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from 'pme-login-module';

@Injectable()
export class AuthGuardService implements CanActivate {

  constructor(public auth: AuthService, public router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (!this.auth.isAuthenticated()) {
      this.router.navigate(['login'], { queryParams: { returnUrl: state.url }});
      return false;
    }
    return true;
  }

}

In the above AuthGuard example, we are passing a returnUrl queryParam to the router. This is used by the login component to know where to route to after a successful login.