AZURE CLOUD PLATFORM -Integrate Angular Frond-End Application with Azure AD (Article 07)

Hi! Guys welcome to the continuous article set of my Azure cloud platform based on the shared cloud architecture. This is my 7th article. You can visit my previous articles from the below links:

• 1st article: AZURE CLOUD PLATFORM BASED ON THE SHARED CLOUD ARCHITECTURE
• 2nd article: AZURE CLOUD PLATFORM -Azure Active Directory
• 3rd article: AZURE CLOUD PLATFORM -Authentication
• 4th article: AZURE CLOUD PLATFORM -Subscription
• 5th article: AZURE CLOUD PLATFORM -CDN
• 6th article: AZURE CLOUD PLATFORM -Key Vaults

First i created a sample application in Angular with a simple login form and a home page. If you don’t know how to create an Angular application, open your visual studio code and select the terminal and type the following commands,

• npm install -g @angular/cli@8
• ng new my-application — routing=true — style=css
• cd my-application
• npm install @angular/material@8 @angular/cdk@8
• ng generate component page-name

The 1st command is to install the Angular CLI, 2nd one is for generate a new Angular app. From the 3rd command, can change the app directory and from the 4th command, we can install the Angular Material component library. Finally the last command is for create a new page.

Then i used a Microsoft Authentication Library for JavaScript Angular Wrapper called msal.js. It enables Angular (6+) applications to authenticate enterprise users by using Microsoft Azure Active Directory. Now i am going to install MSAL in my Angular application. In the visual studio code terminal type the following command,

npm install msal @azure/msal-angular

Now select your app.module.ts and add the following codes,

At the top of @NgModule

Inside the imports

So finally your app.module.ts will look like this,

While we created Azure AD we got a client ID and tenant ID like below:

So copy those client ID and tenant ID and paste inside the auth under MsalModule.forRoot.

For tenant info set use one of the following options: If your application supports accounts in this organizational directory, replace this value with the directory (tenant) ID or tenant name (for example, contoso.microsoft.com). If your application supports accounts in any organizational directory, replace this value with organizations. If your application supports accounts in any organizational directory and personal Microsoft accounts, replace this value with common. To restrict support to personal Microsoft accounts only, replace this value with consumers.

Here i used, https://login.microsoftonline.com as the tenant info. So i can use Microsoft login here.

Then set a redirect URL and in my case it is http://localhost:4200/home.

Now select your app-routing.modules.ts file and add the following lines,

You can add authentication to secure specific routes in your application by just adding canActivate : [MsalGuard] to your route definition. It can be added at the parent or child routes. When a user visits these routes, the library will prompt the user to authenticate.

In your app.components.ts add the following lines,

Top of the component

Inside class App Component

Inside class App Component to validate account

Inside class App Component to validate login

Inside class App Component to logout

Now call these login and logout functions through your HTML button click functions.

Finally run your angular application and see what happens,

When i click the login option,

So we can successfully login our SPA with a Microsoft login option.

Now let’s logout and see what happens.

After logout, we are back to the login page.

This is the end of Article 07 and hope you get a brief idea about Integrate Angular Frond-End Application with Azure AD.

Will see you on my next article Front Door.

Thank You!

REFERENCE:

Angular single-page app tutorial - Azure - Microsoft identity platform