Integrate Azure Active Directory with Angular Applications : Article 01

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 { }