This example shows how to use AD Auth with Angular 2.

Еhe project is based on the following libraries:

• Angular2 Webpack Starter
• Active Directory Authentication Library (ADAL) for JavaScript (damienpontifex's fork)

Make sure you have Node version >= 5.0 and NPM >= 3

Detailed instruction

# clone  repo
git clone --depth 1 https://github.com/Kuzq/ADAL-Angular2-Example

# change directory to our repo
cd ADAL-Angular2-Example

# install the repo with npm
npm install

# start the server
npm start

go to http://localhost:3000 in your browser

Project file structure is based on Angular 2 Webpack Starter. The redundant parts were removed. Added/changed files are listed below:

angular2-webpack-starter/
 │
 └──src/                       
    └──app/                   
         ├──app.routes.ts       
         │
         └──services/  
               ├──adlib
               │    └─ adal.js
               ├──adlib
               ├──adalHttp.ts              
               ├──adalWrapperService.ts  
               ├──authGuardArea.ts         
               └──sysConfig.ts

1. /src/app/services/sysConfig.ts Initialize adal with the AAD app coordinates at app config time

this.aDOptions = <AdalConfig>{
      tenant: '*TenantId*',
      clientId: '*ClientId (Audience) *',
      redirectUri: 'https://localhost:3000',
      instance: 'https://login.microsoftonline.com/'
    };

3. ./src/app/services/adalWrapperService.ts A simple AdalHttp wrapper. Useful when your app requires to request additional auth info from API (e.g. user permissions list)

4. /src/app/services/authGuardArea.ts The CanActivate guard that tries to acquire token from AD. If it successed, that means that user is authenticated. Due to AD premission restrinctions user may not have access to specified route. To to account this case the additional check of accessDenied variable is used.

• Authentication Scenarios for Azure AD
• Secure a Web API with Individual Accounts and Local Login in ASP.NET Web API 2.2

MIT