SM Authorization Module
This module must be used for SM Products to unify the authorization flow.
Features of the module:
-
provide Amplify dynamic config for working with Cognito Multipools;
-
check authorization (local storage idToken) with Amplify and redirect a user to the SM Authorization form if the user is not authorized;
-
provide your app with logout component for header;
-
provide your app with available products component for header;
-
provide Authorization Guard to verify routes;
-
provide Authorization Interceptor to add auth token automatically for each request to microservices using HttpHandler.
Integration
- app.module:
Should be added as one of imports with provided parameters: apiEndpoint, formUrl which should be stored in environments files
import {SmAuthModule} from '@spheremall_org/auth-module';
@NgModule({
imports: [
SmAuthModule.forRoot({
apiEndpoint: environment.ACCOUNTS_API_ENDPOINT,
formUrl: environment.AUTH_FORM_URL
})
]
})- routes.ts:
You should use authorization guard for your routes.
import {AuthGuardService} from '@spheremall_org/auth-module';
export const routes: Routes = [
{
path : '',
component : Component,
canActivate: [ AuthGuardService ],
data : { isProduction: environment.production }
}
];- app.component:
Authorization will be automatically checked on Guard level, but you can use
isAuthorizedmethod fromAuthServiceif it is needed.
import {AuthService} from '@spheremall_org/auth-module';
export class AppComponent implements OnInit {
constructor(private authService: AuthService) {}
ngOnInit() {
this.authService.isAuthorized().subscribe((isAuthorized) => {
// this.showNavigation = isAuthorized;
// your action on authorized here
});
}
}- services usage
AuthorizationInterceptorwill add authorization header to each request automatically. It is already included inSmAuthModule, no other actions required.IdTokencan be found inAuthService.getToken().
import {AuthService} from '@spheremall_org/auth-module';
export class UsersService {
private token: string;
constructor(private authService: AuthService) {
authService.getToken().then(token => {
this.token = token;
});
}
}- header logout functionality
user.component.ts
import {AuthService} from '@spheremall_org/auth-module';
@Component({
selector : 'app-user',
templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
user: any = {};
constructor(private authService: AuthService) { }
ngOnInit() {
this.authService.getAuthorizedUser().subscribe(user => {
this.user = user;
});
}
}user.component.html
<div class="user-data" *ngIf="!!user.email" appDialog>
<span class="user-name">
{{ user.email }}
<mat-icon aria-hidden="false">more_vert</mat-icon>
</span>
<div class="user-details">
<div class="content">
<mat-card>
<mat-card-content>
<mat-list class="nav-list navigation">
<mat-list-item>
<!-- SmAuthModule logout in header -->
<sm-auth-header-logout></sm-auth-header-logout>
</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
</div>
</div>
</div>- header available products list
app.component.html
<!--Remove existing logo & title
<span class="title-logo">
<img src="../assets/images/shell-app-icon.png" alt="{{ title }}">
</span>
<h1>{{ title }}</h1>
-->
<!--Add component with `product` parameter-->
<sm-header-products product="Heimdall || Eden || Tyto || Thuja"></sm-header-products>