diff --git a/README.md b/README.md index 88222b0..201c00e 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,8 @@ npm install ng-auth-oidc --save ## How to use You can always refer to the demo project, but it's pretty straightforward. -In your application html file all you need to do is to load the configuration file, (there is an example in `demo/assets/auth-oidc-config-template.js`). Example of config file: +Inside the `dist/` folder, you will find 2 files `auth-oidc-config-template.js` and `ng-auth-oidc.min.js`. +Check the content of the configuration file `auth-oidc-config-template.js`, and modify it accordingly to your application settings, maybe renaming it `auth-oidc-config.js`. Example of config file: ```javascript /* User client settings for OpenID Connect Server*/ var ngAuthOidcConfig = { @@ -34,7 +35,7 @@ var ngAuthOidcConfig = { silent_redirect_uri: 'url/to/this/app/silent-refresh.html' }; ``` -Right after you need to load the library you can find in `dist/ng-auth-oidc/assets/ng-auth-oidc.min.js`. The order is necessary. +Copy these two files where you think is appropriate. Right after you need to load both the configuration file and the library you can find in `ng-auth-oidc.min.js`. **The order is necessary**. #### This is how to load the library: ```html @@ -42,7 +43,19 @@ Right after you need to load the library you can find in `dist/ng-auth-oidc/asse ``` And then you are automatically able to use the Custom Elements in your html, which are the following: -* **ng-auth-guard** - this element will be needed in every private/protected page of your application. It will be responsible of verifying the current user is autheticated. If the user is not autheticated it will redirect to a specific configurable page or by default to the `/login.html` page of your website. If the user is authenticated it will provide silent refresh (for this you need to configure a silent-refresh.html page in your project). This accepts a param `signInUrl` and exposes an event `onVerified` you can listen to. +* **ng-auth-guard** - this element will be needed in every private/protected page of your application. It will be responsible of verifying the current user is autheticated: + - If the user is not autheticated it will redirect to a specific configurable page or by default to the `/login.html` page of your website. + - If the user is authenticated it will provide silent refresh (for this you need to configure a silent-refresh.html page in your project). + + This elements accepts a parameter `signInUrl` and exposes two events, `onVerified` and `onRefreshed`, you can listen to. The first is triggered on verification of an authenticated user, the latter after each subsequent token refresh. Both onVerified and onRefreshed `event.detail` property will be defined as follows: + ```javascript + { + identity: { ... } as User, // From oicd-client.js + headers: { + authorization: 'Bearer XXXYYYZZZ' + } + } + ``` * **ng-auth-login** - this element needs to be included in your `login.html` page. It renders a simple button, so you can style it the way you prefer, when clicked it triggers a redirection (with the configuration of your specific client) to the specified identity server uri. * **ng-auth-completed** - this element need to be included in your `auth-completed.html` page. Which you configured in the config file. * **ng-auth-signout** - this element needs to be included in every private/protected page where you want to give the user the ability to sign-out. It renders a simple button, so you can style it the way you prefer, when clicked it triggers a redirection (with the configuration of your specific client) to the specified identity server signout uri. @@ -96,13 +109,12 @@ And then you are automatically able to use the Custom Elements in your html, whi
Loading...
- - - - + + + + ``` diff --git a/gulpfile.js b/gulpfile.js index 266ba29..5095451 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -38,6 +38,7 @@ gulp.task('prod-clean', () => { './dist/ng-auth-oidc/runtime.js', './dist/ng-auth-oidc/polyfills.js', './dist/ng-auth-oidc/main.js', + './dist/ng-auth-oidc/styles.js', './dist/ng-auth-oidc/styles.css', './dist/ng-auth-oidc/*.html', './demo/main.html' diff --git a/package.json b/package.json index af1fee2..4ea7af7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ng-auth-oidc", "description": "OAuth2 Implicit Flow with OpenID Connect (e.g. identity-server4) implemented with Angular Elements", - "version": "1.0.1", + "version": "1.0.2", "author": { "name": "Diego Fernandez" }, @@ -80,6 +80,11 @@ "OpenID", "Connect", "Custom Elements", - "Angular" + "Angular", + "identity-server4", + "identity server", + "identity-server", + "identity", + "server" ] } diff --git a/src/app/ng-auth-guard/ng-auth-guard.component.ts b/src/app/ng-auth-guard/ng-auth-guard.component.ts index 6cbfcfb..17fb3c7 100644 --- a/src/app/ng-auth-guard/ng-auth-guard.component.ts +++ b/src/app/ng-auth-guard/ng-auth-guard.component.ts @@ -13,7 +13,8 @@ import { AuthService } from '../services/auth.service'; export class NgAuthGuardComponent implements OnInit { @Input() signInUrl: string; - @Output() onVerified = new EventEmitter(); + @Output() onVerified = new EventEmitter(); + @Output() onRefreshed = new EventEmitter(); constructor(private auth: AuthService) { } @@ -21,11 +22,31 @@ export class NgAuthGuardComponent implements OnInit { this.auth .verifyAuthentication() .then((identity: User) => { - console.debug(`Identity verified: ${JSON.stringify(identity)}`); - this.onVerified.emit('Identity verified'); + // on first authorisation verification + this.onVerified.emit({ + identity: identity, + headers: { + authorization: this.auth.getAuthorizationHeaderValue() + } + }); + + // on subsequent token refresh + this.auth + .identity$ + .subscribe((refreshedIdentity: User) => { + this.onRefreshed.emit({ + identity: refreshedIdentity, + headers: { + authorization: this.auth.getAuthorizationHeaderValue() + } + }); + }); }) .catch(err => { console.log(err); + if (window.location.href.indexOf(this.signInUrl || 'login.html') === -1) { + localStorage.setItem('redirectUrl', window.location.href); + } window.location.href = this.signInUrl || '/login.html'; }); } diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts index 18030c9..94f2287 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/auth.service.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpResponse } from '@angular/common/http'; import { UserManager, UserManagerSettings, User, WebStorageStateStore } from 'oidc-client'; -import { Observable, BehaviorSubject } from 'rxjs'; +import { Observable, BehaviorSubject, Subject } from 'rxjs'; @Injectable({ providedIn: 'root' @@ -11,7 +11,10 @@ export class AuthService { private usrMngrSettings: any; private manager: UserManager; + private identity: User = null; + private _identitySource: Subject = new Subject(); + public identity$: Observable = this._identitySource.asObservable(); private user: any = null; private _userSource: BehaviorSubject = new BehaviorSubject(null); @@ -48,7 +51,7 @@ export class AuthService { } completeAuthentication(): Promise { - console.debug('auth-completed'); + console.log('auth-completed'); return this.manager.signinRedirectCallback() .then(identity => { this.setIdentity(identity); @@ -66,13 +69,13 @@ export class AuthService { .getUser() .then((identity: User) => { if (identity) { - console.debug('manager.getUser with identity'); + console.log('manager.getUser with identity'); this.setIdentity(identity); resolve(identity); } else if (window.location.pathname.indexOf('auth-completed') === -1) { - console.debug('manager.getUser without identity and not on auth-completed'); - console.debug('trying manager.signinSilent to check if user is authenticated'); + console.log('manager.getUser without identity and not on auth-completed'); + console.log('trying manager.signinSilent to check if user is authenticated'); this.tryRetrieveIdentity(resolve, reject); } @@ -104,8 +107,9 @@ export class AuthService { private subscribeManagerEvents() { this.manager.events.addUserLoaded((identity) => { - console.debug('User Loaded Event Handler'); + console.log('User Loaded Event Handler'); this.setIdentity(identity); + this._identitySource.next(identity); }); this.manager.events.addAccessTokenExpired(() => this.logout()); } diff --git a/src/templates/private.html b/src/templates/private.html index ab8b57d..091c5ad 100644 --- a/src/templates/private.html +++ b/src/templates/private.html @@ -40,11 +40,10 @@

This is a private page

Loading...
- - + +