BC Adal Angular Library

$3

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

How to use library

Step 1: Install the package

``bash
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.

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

Configure Adal Options while importing the module.

`typescript
@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

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

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

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

`typescript
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:

`typescript
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:

`typescript
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