ezcodeuts

This library is a Azure Active Directory Authentication Library (adal.js) wrapper package for Angular 5. It can be used to authenticate Angular 5 application for Azure Active Directory and generate token to communicate to MS Graph API and 3rd party Web API secured by Azure AD.

Usage no npm install needed!

<script type="module">
  import ezcodeuts from 'https://cdn.skypack.dev/ezcodeuts';
</script>

README

EZCodeAdalAngular5

This library is a Azure Active Directory Authentication Library (adal.js) wrapper package for Angular 5. It can be used to authenticate Angular 5 application for Azure Active Directory and generate token to communicate to MS Graph API and 3rd party Web API secured by Azure AD.

Installation

Run the following command to install the package. npm install ezcode-adal-angular5 --save

Authenticate Usage

  1. Create a adal configuration file ezcodeadalconfig.ts under service folder
import {IEZCodeAdalConfig} from 'ezcode-adal-angular5/lib/IEZCodeAdalConfig';

export const ezcodeAdalConfigLocal: IEZCodeAdalConfig={
    tenant: '[your tenant name/id]',
    clientId: '[your client id]',
    redirectUri: window.location.href.substring(0, window.location.href.lastIndexOf("/")+1), 
    postLogoutRedirectUri: window.location.origin + '/',
    endpoints: {
        'https://graph.microsoft.com/v1.0/me': 'https://graph.microsoft.com',
        '[webapi url]': '[webapi resource id]'

    }
};
  1. You can change the adal configuration via code at the runtime.
export class MsgraphComponent implements OnInit {
    constructor(
        private auth: EZCodeAdalService
    ) { }

    ngOnInit() {
    }
    initConfig(){
        const adalConfig={
            tenant: '[tenant id]',
            clientId: '[client id]',
            redirectUri: window.location.href.substring(0, window.location.href.lastIndexOf("/")+1), //window.location.origin + '/',
            postLogoutRedirectUri: window.location.origin + '/',
            endpoints: {
                'https://graph.microsoft.com/v1.0/me': 'https://graph.microsoft.com'
            }
        };
        //set adal configuration via Config property.
        this.auth.Config=adalConfig;
    }
}
  1. Update app.module.ts to include the ezcode-adal-angular5 library. Make sure you set useHash to true because adal relies on hash to return the token.
import { EZCodeAdalService} from 'ezcode-adal-angular5/lib/ezcode-adal.service';

//import config for local.
import { ezcodeAdalConfig } from './services/ezcodeAdalConfig';



@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        EZCodeAdalModule.forRoot(ezcodeAdalConfigLocal),
        RouterModule.forRoot(rootRouterConfig, { useHash: true })
    ],
    providers: [
        EZCodeAdalService,
        ...
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
  1. Add EZCodeAdalComponentGuard to secure your component. When users click the secured components, application will redirect them to Azure AD login page.
// import { ValueComponent } from './values/value.controller';
import { Component } from '@angular/core';

import { Routes } from '@angular/router';

import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { OrderComponent } from './order/order.component';
import {MsgraphComponent} from './msgraph/msgraph.component';

import {EZCodeAdalComponentGuard} from 'ezcode-adal-angular5/lib/ezcode-adal-component.guard';

export const rootRouterConfig: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent }, //, canActivate: [EZCodeAdalComponentGuard]
  { path: 'order', component: OrderComponent, canActivate: [EZCodeAdalComponentGuard]},
  { path: 'msgraph', component: MsgraphComponent, canActivate: [EZCodeAdalComponentGuard]},
  { path: 'about', component: AboutComponent }
];

Usage for consuming a web api

  1. If you need to call MS Graph API or 3rd party Web API, You need to add your MS Graph API endpoint and resource id to ezcodeadalconfig.ts
import {IEZCodeAdalConfig} from 'ezcode-adal-angular5/lib/IEZCodeAdalConfig';

export const ezcodeAdalConfigLocal: IEZCodeAdalConfig={
    tenant: '[your tenant name/id]',
    clientId: '[your client id]',
    redirectUri: window.location.href.substring(0, window.location.href.lastIndexOf("/")+1), 
    postLogoutRedirectUri: window.location.origin + '/',
    endpoints: {
        'https://graph.microsoft.com/v1.0/me': 'https://graph.microsoft.com',
        '[webapi url]': '[webapi resource id]'

    }
};
  1. Call a MS Graph API
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders,HttpResponse } from '@angular/common/http';

import { Observable } from 'rxjs/Rx';
import { of } from 'rxjs/observable/of';
import { catchError, map, tap } from 'rxjs/operators';
import 'rxjs/add/observable/throw';
import { IAllowance } from './IAllowance';
import { BaseService } from './base.service';
import { IJsonObject } from './IJsonObject';


@Injectable()
export class MsgraphService  {
    private _headers: HttpHeaders;
    constructor(httpClient: HttpClient) {
        this._headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    }
    /**
     * getOrders
     */
    public getMe(): Observable<IJsonObject[]> {
        const url = "https://graph.microsoft.com/v1.0/me";

        //return the body json text. 
        return this.httpClient.get<any>(url, { headers: this._headers, observe: 'response' })
            .pipe(
                tap(result => this.log('fetched heroes')),
                catchError(this.handleError('getMe', [])),
                map((response:HttpResponse<any>)=>{
                    return this.getJsonObject(response.body);
                })
            );
            
    }

}

Sample solution

you can find an sample solution from ezcode-adal-angular5-sample which was built based on Angular 5 and Bootstrap 4. The application itself was secured by a Azure AD App using implicit authentication flow. "MS Graph" route view is secured by EZCodeAdalComponentGuard. If an unauthenticated user accesses this view, the application will redirect to the Azure AD Login page. alt text

Change log