Angular 8 Azure Active Directory Authentication

Angular 8 App With Azure Active Directory Authentication

Today we are going to use the Active Directory Authentication Library (ADAL) for angular 8/JavaScript (ADAL.JS) that offers Azure AD authentication services that can be incorporated in the single-page applications(SPA).

if you are new to Angular 8 so ahead have a look into the first angular 8 projects and then go through the step by steps and instructions to implement authentication.

Step 1: Configuring Azure Active Directory (App Registrations)

• Login to Azure Portal
• Click on Azure Active Directory >> App Registrations >> New Registrations
• Enter the display name
• Select the supported account type(in my case Single Tenant App)
• Enter the Redirect URI( default URL for the angular https://localhost:4200/)
• Click on Register button

• Find newly created app under app registrations "angular-app-web-dev" and click on Authentication in left panel >> under Implicit grant >>  ID tokens tick the checkbox >> click on the Save Button

Get the following details from registered App that can be found under Overview sections

• Client Id - (GUID)
• Tenant Id - (GUID)

Step 2 - Angular Project Updates for ADAL

Open the angular app in vscode and open the terminal  

Install the microsoft-adal-angular6 npm package

Run the following command to install ADAL package and this package will be added to your dependencies section in package.json:

 npm i microsoft-adal-angular6 --save

Update environment.ts file with the following details

Just the end of step -1 we got the tenant id and client Id

    

    tenantId: 'c71b45bc-73d9-4208-95bb-1f5b7dd22cbf',  // replace with yours one here

    clientId: '73d9-4208-95bb-49cd-c71b45bc-73d9-4208', // replace with yours one here

    redirectUri: 'https://localhost:4200', // replace with the yours one here

    postLogoutRedirectUri: 'https://localhost:4200/logout', // replace with yours one here

    extraQueryParameter: 'nux=1' //(optional)

Update app-routing.module.ts  to secure individual route (your route modules)

Import the AuthenticationGuard  into your file

import { AuthenticationGuard } from 'microsoft-adal-angular6';

const routes: Routes = [

  { path: '', component: EmployeeComponent, canActivate: [AuthenticationGuard] } }

];

Update app.module.ts time with followings

Import the MsAdalAngular6Module, AuthenticationGuard into your file

import { MsAdalAngular6Module, AuthenticationGuard } from 'microsoft-adal-angular6';

add imports with the following configuration details

imports: [

    MsAdalAngular6Module.forRoot({

      tenant: environment.tenantId,

      clientId: environment.clientId,

      redirectUri: window.location.origin,

      // endpoints: environment.endpoints,

      navigateToLoginRequestUrl: false,

      extraQueryParameter: environment.extraQueryParameter,

      cacheLocation: 'sessionStorage'

    })

  ],

and also update the providers for the authentication gurad

  providers: [ 

    AuthenticationGuard

  ],

Display the Logged-in User Details

if you want to show the logged-in user details use the these properties

this.adalSvc.LoggedInUserEmail // Get the Logged In User Email

this.adalSvc.LoggedInUserName // Get the Logged In User Name

this.adalSvc.logout() // Logs out the signed in user

You have done all the possible required steps, You do not have to call the login method it will be called implicitly.

Next >> Azure Active Directory- Restrict Application Access To Users or A Group