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.
npm install msal @azure/msal-angular
Now select your app.module.ts and add the following codes,
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,
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.