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