1.0.3 • Published 6 years ago
gungnir-oidc v1.0.3
gungnir-oidc
Based on oidc-client. Library to provide OpenID Connect (OIDC) and OAuth2 protocol support for client-side, browser-based JavaScript client applications. Also included is support for user session and access token management.
Install
NPM
npm install gungnir-oidc
Docs
How to Use:
Install npm gungnir-oidc on your angular project
On angular project, at directory src, create folder configs
On folder src/configs, create file app.config.ts
On file app.config.ts, write this code:
import { InjectionToken } from '@angular/core';
export let APP_CONFIG = new InjectionToken('app.config');
export interface IApiEndPoint {
token: string;
}
export interface IAppConfig {
AuthorityUri: string;
ClientId: string;
RedirectUri: string;
PostLogoutRedirectUri: string;
ResponseType: string;
Scope: string;
}
export const AppConfig: IAppConfig = {
AuthorityUri: '<Your OIDC Application Address Link>',
ClientId: '<Your OIDC Client ID>',
RedirectUri: '<Your Web Address Link>/auth-callback',
PostLogoutRedirectUri: '<Your Web Address Link>',
ResponseType: '<Your OIDC ResponseType>',
Scope: '<Your OIDC Scopes>'
};
- Create service that extends to GungnirOidcService, and write this code below
import { Injectable, Inject } from '@angular/core';
import { GungnirOidcService } from 'gungnir-oidc/lib';
import { APP_CONFIG, IAppConfig } from '../configs/app.config';
@Injectable()
export class <Your Service Name> extends GungnirOidcService {
constructor(@Inject(APP_CONFIG) private config: IAppConfig) {
super(config.AuthorityUri,config.ClientId,config.RedirectUri,config.PostLogoutRedirectUri,config.ResponseType,config.Scope);
}
}
- Create auth-callback component and write this code below
import { Component, OnInit } from '@angular/core';
import { <Your Service Name - extends to GungnirOidcService> } from '<Path of Your Service>';
@Component({
selector: 'app-auth-callback',
templateUrl: './auth-callback.component.html',
styleUrls: ['./auth-callback.component.css']
})
export class AuthCallbackComponent implements OnInit {
constructor(private <Your Service Name - extends to GungnirOidcService>: <Your Service Name - extends to GungnirOidcService>) { }
ngOnInit() {
this.<Your Service Name - extends to GungnirOidcService>.completeAuthentication().then(() => {
//action can be redirect to homepage or anything else
});
}
}
- on app.module.ts, add this import:
import { APP_CONFIG, AppConfig } from './configs/app.config';
on providers, add this code:
providers: [{ provide: APP_CONFIG, useValue: AppConfig }]
Authentification Action: To check user token when open application
- Create auth.guard and write this code below:
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { <Your Service Name - extends to GungnirOidcService> } from '<Path of Your Service>';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private <Your Service Name - extends to GungnirOidcService>: <Your Service Name - extends to GungnirOidcService>) {
}
canActivate(): boolean {
if(this.<Your Service Name - extends to GungnirOidcService>.isLoggedIn()) {
return true;
}
this.<Your Service Name - extends to GungnirOidcService>.startAuthentication();
return false;
}
}
- implement this auth guard on your routing
Access Data on API Action with OIDC authentification
- Implement on your service, ex:
import { Injectable } from '@angular/core';
import { Http, Response, Headers, URLSearchParams, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { <Your Service Name - extends to GungnirOidcService> } from '<Path of Your Service>';
import { Data } from '../models/data';
@Injectable()
export class <Your Service Name> {
dataUrl: string = '';
header: any = '';
options: any = '';
//constructor
constructor(private http:Http, private <Your Service Name - extends to GungnirOidcService>: <Your Service Name - extends to GungnirOidcService>) {
this.dataUrl = <Your API Address>;
this.header = new Headers({ 'Authorization': this.<Your Service Name - extends to GungnirOidcService>.getAuthorizationHeaderValue() });
this.options = new RequestOptions({ headers: this.header });
}
getData(): Observable<Data[]> {
return this.http.get(this.dataUrl, this.options)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body;
}
private handleError (error: Response | any) {
return Observable.throw(error);
}
}
Logout Action
- Create component for logout, ex:
import { Component, OnInit } from '@angular/core';
import { <Your Service Name - extends to GungnirOidcService> } from '<Path of Your Service>';
@Component({
selector: 'app-logout',
templateUrl: './logout.component.html',
styleUrls: ['./logout.component.css']
})
export class LogoutComponent implements OnInit {
constructor(private <Your Service Name - extends to GungnirOidcService>: <Your Service Name - extends to GungnirOidcService>) { }
ngOnInit() {
this.<Your Service Name - extends to GungnirOidcService>.startLogout();
}
}
References
NPM oidc-client