Thanks to Andrew Stegmaier opening this issue on the repo that goes with my IdentityServer exploration I was made aware of a certified OpendID Connect client specifically written for Angular (4+). The angular-auth-oidc-client was created by damienbod. This post is going to cover the transition to this new client. The starting point of the code can be found here. All the changes discussed in this post take place in the ClientApp project.
Package Changes
In package.json the following changes need to be made using your package manager of choice or manually changing the fill and doing a restore.
Remove: "oidc-client": "1.3.0", "babel-polyfill": "6.23.0" Add: "angular-auth-oidc-client": "^1.3.1"
App Module Changes
Both app.module.client.ts and app.module.server.ts got a little cleanup to remove the duplicate provider code. The following lines were deleted from both files.
import { AuthService } from './components/services/auth.service';
import { GlobalEventsManager } from './components/services/global.events.manager';
import { AuthGuardService } from './components/services/auth-guard.service';
The providers array moved to using providers imported from app.module.shared.ts.
Before:
providers: [
AuthService, AuthGuardService, GlobalEventsManager
]
After:
providers: [
...sharedConfig.providers
]
Next, in app.module.shared.ts the following imports were removed.
import { CallbackComponent } from './components/callback/callback.component';
import { GlobalEventsManager } from './components/services/global.events.manager';
Then, the following import for the OpenId Connect client was added.
import { AuthModule } from 'angular-auth-oidc-client';
In the declarations array CallbackComponent was removed. In the imports array AuthModule.forRoot() was added. The route for CallbackComponent was removed and the canActivate condition was removed from the fetch-data route. Finally, the providers section is reduced to only the AuthService. That was a lot of changes, so I am including the full finished class below.
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { UnauthorizedComponent } from './components/unauthorized/unauthorized.component';
import { AuthModule } from 'angular-auth-oidc-client';
import { AuthService } from './components/services/auth.service';
export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
UnauthorizedComponent
],
imports: [
AuthModule.forRoot(),
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'unauthorized', component: UnauthorizedComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }
])
],
providers: [ AuthService ]
};
File Deletions
The following files were completely removed. Some of them may come back in a different form, but for the moment the functions they were handling are being dealt with in a different way.
auth-guard.service.ts callback.component.ts global.events.manager.ts
Auth Service
The AuthService class was pretty much rewritten since it is at the core of the interaction with the OpenId Connect client. It still contains pretty much all the functionality as before just using the new client. The following is most of the class. I removed all of the HTTP calls except for get to save space.
import { Injectable, Component, OnInit, OnDestroy } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Subscription } from 'rxjs/Subscription';
import { OidcSecurityService, OpenIDImplicitFlowConfiguration } from 'angular-auth-oidc-client';
@Injectable()
export class AuthService implements OnInit, OnDestroy {
isAuthorizedSubscription: Subscription;
isAuthorized: boolean;
constructor(public oidcSecurityService: OidcSecurityService,
private http: Http) {
const openIDImplicitFlowConfiguration = new OpenIDImplicitFlowConfiguration();
openIDImplicitFlowConfiguration.stsServer = 'http://localhost:5000';
openIDImplicitFlowConfiguration.redirect_url = 'http://localhost:5002/callback';
// The Client MUST validate that the aud (audience) Claim contains its client_id value registered at the Issuer identified by the iss (issuer) Claim as an audience.
// The ID Token MUST be rejected if the ID Token does not list the Client as a valid audience, or if it contains additional audiences not trusted by the Client.
openIDImplicitFlowConfiguration.client_id = 'ng';
openIDImplicitFlowConfiguration.response_type = 'id_token token';
openIDImplicitFlowConfiguration.scope = 'openid profile apiApp';
openIDImplicitFlowConfiguration.post_logout_redirect_uri = 'http://localhost:5002/home';
openIDImplicitFlowConfiguration.start_checksession = true;
openIDImplicitFlowConfiguration.silent_renew = true;
openIDImplicitFlowConfiguration.startup_route = '/home';
// HTTP 403
openIDImplicitFlowConfiguration.forbidden_route = '/forbidden';
// HTTP 401
openIDImplicitFlowConfiguration.unauthorized_route = '/unauthorized';
openIDImplicitFlowConfiguration.log_console_warning_active = true;
openIDImplicitFlowConfiguration.log_console_debug_active = false;
// id_token C8: The iat Claim can be used to reject tokens that were issued too far away from the current time,
// limiting the amount of time that nonces need to be stored to prevent attacks.The acceptable range is Client specific.
openIDImplicitFlowConfiguration.max_id_token_iat_offset_allowed_in_seconds = 10;
this.oidcSecurityService.setupModule(openIDImplicitFlowConfiguration);
}
ngOnInit() {
this.isAuthorizedSubscription = this.oidcSecurityService.getIsAuthorized().subscribe(
(isAuthorized: boolean) => {
this.isAuthorized = isAuthorized;
});
if (window.location.hash) {
this.oidcSecurityService.authorizedCallback();
}
}
ngOnDestroy(): void {
this.isAuthorizedSubscription.unsubscribe();
}
authorizedCallback() {
this.oidcSecurityService.authorizedCallback();
}
getIsAuthorized(): Observable<boolean> {
return this.oidcSecurityService.getIsAuthorized();
}
login() {
console.log('start login');
this.oidcSecurityService.authorize();
}
logout() {
console.log('start logoff');
this.oidcSecurityService.logoff();
}
get(url: string, options?: RequestOptions): Observable<Response> {
if (options) {
options = this.setRequestOptions(options);
}
else {
options = this.setRequestOptions();
}
return this.http.get(url, options);
}
private setRequestOptions(options?: RequestOptions) {
if (options) {
this.appendAuthHeader(options.headers);
}
else {
options = new RequestOptions({ headers: this.getHeaders(), body: "" });
}
return options;
}
private getHeaders() {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.appendAuthHeader(headers);
return headers;
}
private appendAuthHeader(headers: Headers) {
const token = this.oidcSecurityService.getToken();
if (token == '') return;
const tokenValue = 'Bearer ' + token;
headers.append('Authorization', tokenValue);
}
}
It doesn’t show the best in the world here so be sure and check it out on GitHub. All the IdentityServer configuration is done in the constructor using the OpenIDImplicitFlowConfiguration class.
Navigation Component
The NavMenuComponent class now needs some changes to match the new AuthService. First, the following change to the imports.
Before:
import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service'
import { GlobalEventsManager } from '../services/global.events.manager'
After:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { AuthService } from '../services/auth.service';
The AuthService class now provides the ability to subscribe to changes in the user’s authorization. To handle the subscription and unsubscription the class will implement both OnInit and OnDestroy. Here is the new class declaration.
export class NavMenuComponent implements OnInit, OnDestroy
Next, here is the implementation of ngOnInit which handles the subscription to the change in isAuthorized.
ngOnInit() {
this.isAuthorizedSubscription =
this.authService.getIsAuthorized().subscribe(
(isAuthorized: boolean) => {
this.isAuthorized = isAuthorized;
});
if (window.location.hash) {
this.authService.authorizedCallback();
}
}
Then, ngOnDestroy handles the unsubscription.
ngOnDestroy(): void {
this.isAuthorizedSubscription.unsubscribe();
}
The class level variable for _loggedIn is replaced with the following two variables.
isAuthorizedSubscription: Subscription; isAuthorized: boolean;
The constructor has been greatly simplified and now only takes an instance of the AuthService.
constructor(public authService: AuthService) {
}
Finally, the login and logout functions have changed to match the new function names in the AuthService class.
public login() {
this.authService.login();
}
public logout() {
this.authService.logout();
}
Navigation Component UI
In the navmenu.component.html file, a couple of tweaks are required based on the new variable names used above. The first set is related to showing either Login or Logout.
Before:
<li *ngIf="!_loggedIn" [routerLinkActive]="['link-active']">
<a (click)="login()" [routerLink]="['/login']">
<span class="glyphicon glyphicon-user"></span> Login
</a>
</li>
<li *ngIf="_loggedIn" [routerLinkActive]="['link-active']">
<a (click)="logout()" [routerLink]="['/logout']">
<span class='glyphicon glyphicon-log-out'></span> Logout
</a>
</li>
After:
<li [routerLinkActive]="['link-active']">
<a *ngIf="!isAuthorized" (click)="login()" [routerLink]="['/login']">
<span class="glyphicon glyphicon-user"></span> Login
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a *ngIf="isAuthorized" (click)="logout()">
<span class='glyphicon glyphicon-log-out'></span> Logout</a>
</li>
The final change in this file was to make the link to fetch-data only show if the user is logging instead of sending the user to an unauthorized view.
Before:
<a [routerLink]="['/fetch-data']">
<span class='glyphicon glyphicon-th-list'></span> Fetch data
</a>
After:
<a *ngIf="isAuthorized" [routerLink]="['/fetch-data']">
<span class='glyphicon glyphicon-th-list'></span> Fetch data
</a>
Fetch Data Component
The final changes for the conversion to the new client are in the fetchdata.component.ts and they are only needed because of a rename of the HTTP Get helper in the AuthService.
Before:
authService.AuthGet(apiUrl + 'SampleData/WeatherForecasts').subscribe(result => {
After:
authService.get(apiUrl + 'SampleData/WeatherForecasts').subscribe(result => {
Wrapping Up
This change took a lot of changes, but in the long run, it is going to be a better choice since the new client is focused on Angular. Another great thing about this client is they are looking into ways to handle the first load not remembering the user is logged in due to server side rendering (issue #36).
The finished code for this post can be found here.
Also published on Medium.