BC Adal Angular Library

Active Directory Authentication Library (ADAL) for Angular6

Library wrapper for Angular 6+, development over Microsoft ADAL (Azure Active Directory Authentication Library) - https://github.com/AzureAD/azure-activedirectory-library-for-js that helps you integrate with Microsoft's AAD (Azure Active Directory).

For information on how to configure Azure Active Directory refer - https://docs.microsoft.com/en-us/azure/app-service/app-service-mobile-how-to-configure-active-directory-authentication

Step 1: Install the package

npm i --save bc-adal-angular

Step 2: Import BcAdalAngularModule and configure Adal Options

In the root module of your application, import the BcAdalAngularModule module.

import { BcAdalAngularModule } from 'bc-adal-angular';

Configure Adal Options while importing the module.

@NgModule({
  imports: [
    BcAdalAngularModule.forRoot({
      tenant: '[Enter your tenant]',
      clientId: '[Enter your client_id here, e.g. g075edef-0efa-453b-997b-de1337c29185]',
      redirectUri: window.location.origin,
      // ...
    }),
    // ...
  ],
  // ...
})

For a list of all available adal configuration options, refer: https://github.com/AzureAD/azure-activedirectory-library-for-js/wiki/Config-authentication-context#configurable-options

Step 3: Secure individual routes of Angular

Use the AdalAccessGuard to secure indivuadual routes in your application. Import AdalAccessGuard and add it as a provider in your root module.

Note: This step it's optional, because the BcAdalAngularModule import the guard provider automatically

import { AdalAccessGuard } from 'bc-adal-angular';

@NgModule({
    providers: [
        // ...
        AdalAccessGuard,
        // ...
    ],
    // ...
})

In your routing module, add it to the routes you want to secure

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    pathMatch: 'full',
    canActivate: [AdalAccessGuard]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
  /* ... */
}

Step 4 (Optional): Generating resource tokens

To generate resource level tokens for APIs your website may consume, specify the resources in your endpoints array while injecting AdalOptions into BcAdalAngularModule via root. Then to generate token, use getAccessToken() of BcAdalAngularService:

constructor(private adalService: BcAdalAngularService) {
  this.adalService
    .getAccessToken(
        endpoint: string,
        callbacks: (message: string, token: string) => any)
    .subscribe((resToken: string) => {
      console.log(resToken);
    });
}

Step 5 (Optional): Getting logged-in user info

At any point in you application, to get the logged-in user info, use:

this.adalService.userInfo;

With these steps your application should be up and running with ADAL.

Important links

1. Azure Active Directory Overview
2. Configure Azure Active Directory
3. Azure Active Directory Pricing
4. Active Directory Authentication Library (ADAL) for JavaScript