How to Deploy an Angular Application in Azure:Azure Active Directory

What is Azure Active Directory(ad)?

Azure Active Directory (Azure AD) is Microsoft’s cloud-based identity and access management service, which helps to organization’s employees sign-in and access the external and internal resources such as Microsoft Office 365, the Azure portal, SaaS applications, apps on the corporate network and intranet, along with any cloud apps developed by the own organization.

for example if I decided to allow only my university staffs and students along with our university mail id then I can deploy my Application within our University Ad. so who has that university mail id they only can see and access my application if I allow them. so here I can manage it.

Let’s see…

Step 03: Interact Azure Active Directory with Angular application.

As before mentioned, through the link https://portal.azure.com open the Azure portal. then we need to create Azure Active Directory but I already have an ad for my university because I used university mail id but no worries i’ll guide you How to create ad for Your Organization.

First We need to select Azure Active Directory inside the menu bar or in the home you can see or you can search and click on it.

azure active Directory

click on create tenant, then we have select tenant type then click on next →configuration

In the Organization name field, Enter the Organization’s name.

In the Initial domain name field, Enter the domain name what we want.

In the Country/Region field, select our country because it will select the data center location based on our selected location.

then click Review and Create.

yes, we created the Active directory for our company successfully..

now we going to register our application in our Active directory, so go to our Active Directory and the scroll down the left panel inside the manage can find the App registrations and click on it.

then we need select who can use our application or who can access. as before said i’m going to give permission to only for my university so I go with first one.

then want give redirect url of our application.

then click register..

Let’s check our Active directory to confirm that our application registered.

If you want more owners to manage can add through click on Add owners

then go to authentication, select the our configure platforms in here i choose Single- page application..

we registered our application in Azure Active Directory.

Let’s move to the Application to connect the angular application with azure Active Directory. for that i’m going to use microsoft-adal-angular6. In terminal execute npm update then execute the command.

npm install microsoft-adal-angular6

then inside the app.module.ts import and add above code.

import { MsAdalAngular6Module } from ‘microsoft-adal-angular6’;

@NgModule({
imports: [
MsAdalAngular6Module.forRoot({
tenant: ‘<tenant id>’,
clientId: ‘<application(client)id>’,
redirectUrl: enter_url_here_same_as_given_on_application_registration,
endpoints: {
‘api application url’: ‘api application client id’, // this is for feteching the access token
},
navigateToLoginRequestUrl: false,
cacheLocation: ‘<localStorage /sessionStorage>’,
postLogoutRedirectUri: ‘URI on which you want to redirect user after logout’,
}),
],
})

then we going to Use the AuthenticationGuard to secure indivuadual routes in our application. This ensures that users navigating to them must be authenticated with Azure Active Directory to view them.

Import AuthenticationGuard and add it as a provider in your root module.

import { AuthenticationGuard } from ‘microsoft-adal-angular6’;

@NgModule({providers: [AuthenticationGuard], — — — })

In your routing module, add it to the routes you want to secure -

const routes: Routes = [{ path: ‘expenses’, component: ExpensesComponent, pathMatch:’full’, canActivate: [AuthenticationGuard]}];

When you click Login button you are redirected to the Organizations login page directly.

to logout

logout() {this.adalService.logout();}

bind this to logout button.

That’s it.. we Interacted our application with Azure Active Directory Successfully… let’s see you in My next one. that is about the “Azure Front Doors and Azure CDN”..

Thank You….

Final year Software Engineering Student at University of Kelaniya.