Integrate Azure Active Directory with Angular Applications : Article 01

Paul issack minoltan
4 min readAug 11, 2020

--

Hello Everyone this is my First Article in Azure Series. If you missed to read my introduction article please click here.

What is Azure Active Directory?

Azure Active Directory (Azure AD) is Microsoft’s cloud-based identity and access management service, which helps your users sign in and access resources.

Lets see How to create a new tenant in Azure Active Directory.

Step 1: If you don’t have an Azure subscription, create a free account before you start.

Step 2: Here I am going to create single-page application (Using Angular) : For the app registration:
Angular Project on GitHub

Go to App registration in Azure portal

Go to New Registration

Note: Provide the Name for the application (Here i created faq)

Configure authentication

Step 1: Select Authentication at the left navigation bar

Step 2: Click Add a platform

Step 3: Select Single Page Application

Step 4: Provide redirect URI (http://localhost:4200)

Step 5 : This is the view

Sign-In & Sign-Out : click here
Reference : click here

Let’s see the configuration in Angular to connect with AD.

Here I have used microsoft-adal-angular6.

npm install microsoft-adal-angular6

To do the configuration please click

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { MatButtonModule } from '@angular/material/button';
import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { MsalModule, MsalInterceptor } from '@azure/msal-angular';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';


const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;

@NgModule({
declarations: [
AppComponent,
LoginComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
HttpClientModule,
MatToolbarModule,
MatButtonModule,
MatListModule,
AppRoutingModule,
MsalModule.forRoot({
auth: {
clientId: '5575a7a3-c80f-474a-acba-59f98a630d0c', // This is your client ID
authority: 'https://login.microsoftonline.com/aa232db2-7a78-4414-a529-33db9124cba7', // This is your tenant ID
redirectUri: 'http://localhost:4200/home', // This is your redirect URI
postLogoutRedirectUri: 'http://localhost:4200/home' // your_app_logout_redirect_uri
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: isIE, // set to true for IE 11
},
},
{
popUp: !isIE,
consentScopes: [
'user.read',
'openid',
'profile',
],
unprotectedResources: [],
protectedResourceMap: [
['Enter_the_Graph_Endpoint_Herev1.0/me', ['user.read']]
],
extraQueryParameters: {}
})
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MsalInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }

Once you finish the configuration load, http://localhost:4200/ you will see this Home Page, the click login and provide user credentials

This is the end of this article. See you in the next article..!

Thank you…!

Next Article: Azure Key vault

--

--