Implementing Azure Active Directory and Azure cdn in my Expense Tracker.

7 min readAug 15, 2020

Hey Guys! Welcome back to my article series…

This is my sixth article on Distributed and cloud computing- sample environment in azure cloud platform series. If you have missed the previous article you can checkout in the below link.

Article 05: Deploy our backend (spring-boot) application using Azure Web App Service.

Now let us get to know what is Azure Active Directory and then jump back to the Azure cdn.

Azure Active Directory

Microsoft Windows Azure Active Directory (Windows Azure AD or Azure AD) may be a cloud service that gives administrators with the power to manage end-user identities and access privileges. Its services include core directory, access management and identity protection. because the name implies, Azure AD is a component of the Microsoft Azure public cloud computing platform.

The service gives administrators the liberty to settle on which information will stay within the cloud, who can manage or use the knowledge , which services or applications can access the knowledge , and which end users can have access. Azure AD can help to supply single sign-on (SSO), so end users do not have to enter passwords multiple times to access cloud applications.

Azure AD is employed by IT admins, app developers and Microsoft cloud service subscribers. IT admins use Azure AD to manage role permissions and control access to specific applications and resources for individual users. App developers may use Azure AD to feature single sign-on to apps that employment with preexisting user credentials. Azure AD also provides app developers with application interfaces (APIs) that use existing data within the organization. Subscribers to Microsoft cloud services, like Office 365, Dynamics CRM Online or Azure, are, by default, tenants of Azure AD.

Azure AD comes in four distinct tiers of service and pricing. Basic features, with limitations, are often accessed at no cost. Subscribers to Microsoft 365 Office apps obtain more functionality than the essential features. Azure AD Premium requires a further extra monthly subscription, and it comes in two tiers: P1 and P2 (highest tier).

Despite the similar name, Azure AD isn’t an equivalent as Windows Active Directory (Windows AD), another Microsoft product.

Now lets start with Azure AD.!

Go to the Azure portal search for Azure Active Directory or click the icon in the home page.

You will be redirected to the overview. Click App Registration in the navigation pane and select New Registration there.

Now its time to register a new application…

Enter your App name to be displayed, application access and redirect URI (Optional) and resgister your app.

Now you will be able to see the overview as below.

you will be able to see the client id ,tenant id here.

Now add a redirect URI by selecting the Add a Redirect URI in the overview.

You will be redirected as below and select “Add a Platform”

Now select “Single Page Application” and complete adding redirect URI as follow.

By configuring a redirect URI to which the client will be redirected and any security tokens will be sent. By selecting one or both of ID tokens and Access tokens, you’ve enabled the implicit grant flow.

Now lets go for angular side. I have used microsoft-adal-angular6 to connect Azure Active Directory.

To install the package execute the below command in your angular application terminal.

npm i microsoft-adal-angular6

2. To import MsAdalModule and configure Adal options add the below import in your app.module.ts file.

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

3. Now Configure Adal options while importing the module.

You can get the client id, tenant id and redirect URI from the overview.

4. Using AuthenticationGuard secure indivuadual routes in your application. Import AuthenticationGuard and add it as a provider

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

5. Now in your routing module, add it to the routes you want to secure.

Thats it!!!Now run your application.!

After signing in you will be redirected to the app. In my app I didn’t want a separate login page as i have authentication. So I later added a sign out function and a button as follow.

And when you click the sign out button, you will be sign out from your institutional account and application. You can do the same for the Login function too!!!!!!!

**The login function would be,

login(): void { this._adalService.login(); }

*****************************************************

**********************************************************

Now let us get to know what is Azure CDN.

Azure CDN

A content delivery network (CDN) may be a distributed network of servers which will efficiently deliver web page to users. CDNs store cached content jittery servers in point-of-presence (POP) locations that are on the brink of end users, to attenuate latency.

Azure Content Delivery Network (CDN) offers developers a worldwide solution for rapidly delivering high-bandwidth content to users by caching their content at strategically placed physical nodes across the planet . Azure CDN also can accelerate dynamic content, which can’t be cached, by leveraging various network optimizations using CDN POPs. for instance , route optimization to bypass Border Gateway Protocol (BGP).

The benefits of using Azure CDN to deliver internet site assets include:

Better performance and improved user experience for end users, especially when using applications during which multiple round-trips are required to load content.
Large scaling to raised handle instantaneous high loads, like the beginning of a product launch event.
Distribution of user requests and serving of content directly from edge servers in order that less traffic is shipped to the origin server.

If this is the first time using then you have to Register azure CDN. Go to Your Subscription> Resource Providers (See the navigation Pane)> Search for cdn>Register.

Now search for cdn profile from the portal or select the icon in the portal home page.

Now you will be redirected to CDN profile overview. You can create a new CDN profile here.

Select “Add” to create a new profile.

Now fill the fields..

Name: This name must be globally unique; if it’s already in use, enter a different name.
SubscriptionS: elect an Azure subscription from the drop-down list.
Resource group: I have used my already existing group.You can create a new one if you need.
Resource group location: Select a location near you from the drop-down list.
Pricing tier: Select a Standard Akamai option from the drop-down list. (Deployment time for the Akamai tier is about one minute. The Microsoft tier takes about 10 minutes and the Verizon tiers take about 90 minutes.)
Cdn end point name: Give an end point name. In my case, I have given expensetracker-cdn-endpoint-123. You can also create it later (what you have to do it is just uncheck the checkbox).

Adding end point later..