angular-auth-oidc-client
OpenID Connect Implicit Flow
Features
Get the Changelog.
Latest docs : https://github.com/damienbod/angular-auth-oidc-client
Using the package
Add the npm package to your package.json
"angular-auth-oidc-client": "0.0.8"
jsrsasign
The npm depends on jsrsasign. You need to download this, the full lib, and add it to your main html file.
https://github.com/kjur/jsrsasign
https://cdnjs.com/libraries/jsrsasign
<!doctype html>
<html>
<head>
<base href="./">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ASP.NET Core 1.0 Angular IdentityServer4 Client</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="assets/jsrsasign.min.js"></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
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.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);
}
}
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