Setup Angular Application To Use Azure AD Authentication

What are we going to do?

 

This is the third article in the series on how to integrate a web application that is built using Angular and ASP.NET core web APIs, with Azure Active Directory. You can see all the parts below,

• Part 1: Set up the Azure Active Directory
• Part 2: Set up Asp.net core web APIs to use Azure AD Authentication.
• Part 3: Set up an Angular application to use Azure AD Authentication.

This is Part 3, Set up an Angular application to use Azure AD Authentication. Here I will explain what code is required to integrate Azure AD with your Angular application.

 

Prerequisites

• Must have followed what we covered in Part 1: Set up the Azure Active Directory, Part 2: Set up Asp.net core web APIs to use Azure AD Authentication.
  and should have the client and tenant Id created in the first part.
• Basic knowledge of Angular.
• Must have an Angular application setup.

All right, now we are good to go. Let's get started.

 

Step 1

 

Install Microsoft adal package.

npm install microsoft-adal-angular6

Step 2

 

Import the adal module in your application's app.module.

MsAdalAngular6Module.forRoot({
  tenant: 'angular application tenant id',
  clientId: 'angular application client id',
  redirectUri: 'URI on which you want to redirect user after login',
  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',
}),

After importing your app module should look like,

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MsAdalAngular6Module } from 'microsoft-adal-angular6';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MsAdalAngular6Module.forRoot({
      tenant: 'angular application tenant id',
      clientId: 'angular application client id',
      redirectUri: 'URI on which you want to redirect user after login',
      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',
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You can find ClientId, tenantId from Azure ad's registered application's overview page. 

 

 

We are done with configuration, now we are ready to use Azure AD's functionality. Following are some examples:

import { Component } from '@angular/core';
import { MsAdalAngular6Service } from 'microsoft-adal-angular6';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'angular-client';
  accessToken: string;

  constructor(private adalService: MsAdalAngular6Service) {

  }


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

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

  getLoggedInUser(): any {
    return this.adalService.LoggedInUserEmail;
  }

  getAccessToken(): Observable<any> {
    return this.adalService.acquireToken('backend-api-uri');
  }

  getToken(): string {
    return this.adalService.accessToken;
  }
}

This is it. Thanks for reading this article. Feel free to comment if you have any queries.