17 January, 2020

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

AAD-App registrations

  • 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
AAD App Registration - Authentication Settings


Get the following details from registered App that can be found under Overview sections
  • Client Id - (GUID)
  • Tenant Id - (GUID)
AAD - ClientId and TenantId


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)
environment.ts

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


App-component.ts


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.

No comments:

Post a Comment

Microservices vs Monolithic Architecture

 Microservices vs Monolithic Architecture Here’s a clear side-by-side comparison between Microservices and Monolithic architectures — fro...