angular-auth-oidc-client
OpenID Connect Implicit Flow
Features
Documentation : Quickstart | API Documentation | Changelog
Using the package
Navigate to the level of your package.json and type
npm install angular-auth-oidc-client --save
or with yarn
yarn add angular-auth-oidc-client
or you can add the npm package to your package.json
"angular-auth-oidc-client": "1.0.3"
and type
npm install
Using in the angular application
Import the module and services in your module. Set the AuthConfiguration properties to match the server configuration. At present only the id_token token flow is supported.
import { NgModule } from '@angular/core';
import { AuthModule, AuthConfiguration } from 'angular-auth-oidc-client';
@NgModule({
imports: [
...
AuthModule.forRoot()
],
...
})
export class AppModule {
constructor(public authConfiguration: AuthConfiguration) {
this.authConfiguration.stsServer = 'https://localhost:44318';
this.authConfiguration.redirect_url = 'https://localhost:44311';
this.authConfiguration.client_id = 'angularclient';
this.authConfiguration.response_type = 'id_token token';
this.authConfiguration.scope = 'dataEventRecords securedFiles openid';
this.authConfiguration.post_logout_redirect_uri = 'https://localhost:44311/Unauthorized';
this.authConfiguration.start_checksession = false;
this.authConfiguration.silent_renew = true;
this.authConfiguration.startup_route = '/dataeventrecords/list';
this.authConfiguration.resource ='';
this.authConfiguration.forbidden_route = '/Forbidden';
this.authConfiguration.unauthorized_route = '/Unauthorized';
this.authConfiguration.log_console_warning_active = true;
this.authConfiguration.log_console_debug_active = false;
this.authConfiguration.max_id_token_iat_offset_allowed_in_seconds = 3;
}
}
Create the login, logout component and use the oidcSecurityService
constructor(public oidcSecurityService: OidcSecurityService) {
}
ngOnInit() {
if (window.location.hash) {
this.oidcSecurityService.authorizedCallback();
}
}
login() {
console.log('start login');
this.oidcSecurityService.authorize();
}
refreshSession() {
console.log('start refreshSession');
this.oidcSecurityService.authorize();
}
logout() {
console.log('start logoff');
this.oidcSecurityService.logoff();
}
In the http services, add the token to the header using the oidcSecurityService
private setHeaders() {
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.headers.append('Accept', 'application/json');
let token = this.oidcSecurityService.getToken();
if (token !== '') {
let tokenValue = 'Bearer ' + token;
this.headers.append('Authorization', tokenValue);
}
}
Storage
For example, you can get angular-auth-oidc-client to store access tokens in Cookies by downloading and adding Cookie-Storage to your project, creating a factory method to provide it:
let cookieStorageFactory = () => {
return new CookieStorage();
}
..and then adding it to the providers array in @NgModule:
{ provide: Storage, useFactory: cookieStorageFactory }
Example using:
https://github.com/damienbod/AspNet5IdentityServerAngularImplicitFlow/tree/npm-lib-test/src/AngularClient
https://github.com/damienbod/angular-auth-oidc-sample-google-openid
Notes:
This npm package was created using the https://github.com/robisim74/angular-library-starter from Roberto Simonetti.
License
MIT