How to Integrate Azure AD with Angular application

How to Integrate Azure AD with Angular application

Here I will explain what code is required to integrate Azure AD with your Angular application. Setup Angular Application To Use Azure AD Authentication

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.

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. 

This is image title

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.

angular angular8 Azure AD

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

How to Upload multiple files to Azure Blob storage from Angular 8

Upload to Azure Blob Storage with Angular 8. How to upload multiple files to blob storage in a browser with a Shared Access Signature (SAS) token generated from your back-end.

Angular Workspace: No Application for You!

The how and why of using the --create-application flag with Angular CLI to create a Workspace without the initial application A nice addition to Angular CLI 7.0.0 was the --create-application flag. In this article I will discuss how and when to use this new feature. It will be especially useful when creating Angular libraries. NOTE: Angular CLI accepts both camelCase and kebab-case for this option. So, anywhere you see --create-application, you can also use --createApplication. For more detail

Announcing Azure Private Link

Azure Private Link is a secure and scalable way for Azure customers to consume Azure Services like Azure Storage or SQL, Microsoft Partner Services or their own services privately from their Azure Virtual Network (VNet). The technology is based on...

Flutter - How to Add AdMob Real Ads in Flutter App | Flutter AdMob Tutorial

Hello Whats is up Everyone So, Today I am going to show u How to Add Admob Real ads in Flutter apps which are very Easy Implement After watching this video u...

How To Create an Optical Character Reader with Angular and Azure

We will create an optical character recognition app using Angular and the Azure Computer Vision Cognitive Service. We will use the OCR feature of Computer Vision to detect the printed text in an image. The application will extract the text from the image and detects the language of the text.