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
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'
})
],
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
You have done all the possible required steps, You do not have to call the login method it will be called implicitly.
