Setup Angular Application To Use Azure AD Authentication

Naveen Motwani

6y58.2k15100Article

Azure AD Angular 8Angular Azure AD integration

15 Comments

Join the conversation! Your thoughts help the community grow.

raj kumar4y ago
Endpoints: { 'api application url': 'api application client id', // this is for feteching the access token }
raj kumar4y ago
Need pass any thing inside this one
Harkirat Singh4y ago
Hey how to dynamically route user after login to different redirectUri based on condition?
Karan Shah6y ago
In backend-api-uri,what do we need to mention?our .net core api endpoint or something else
- Nishan Chathuranga6y ago
  I have the same question
Fabio Ciconi6y ago
HI I am receiving the following error from backend: www-authenticate: Bearer error="invalid_token", error_description="The audience 'xxxxxxxxxxxxxxxxxxxxxxxx' is invalid"". The API only works when I use the FrontEnd's ClientId(angular) in the application.json, and it is supposed to be the API clientid, right?
- Fabio Ciconi6y ago
  Which Client Id I should use in the API? This is not working "ClientId": "put your api application's tenant id". It is giving the error above.
Sandeep Thomas6y ago
Thats really nice. But I need my application to have Azure AD Single SignOn. It would be great if you can share some hints how to achieve that. Thanks a lot
Shubham Kumar6y ago
Hey, how to implement ADAL along with Oauh2 implicit flow ?
deepak karma6y ago
If i am keeping endpoints: { 'api application url': '', // this is for feteching the access token }, blank then still i am able to get token... so how it will authenticate webapi after login to angular?
- Naveen Motwani6y ago
  It's giving you the access token for client application which is not useful you need to mention the api application url, once you get it then use it to call the api. To make sure the api is only allow authorized user use [Authorize] attribute to your end point.
deepak karma6y ago
When i wanted to deploy my core web api then where i will deploy it?
- Naveen Motwani6y ago
  Sorry, I do not understand your question correctly. You can deploy on Azure web app, on VM, Godaddy
Vitalii Monko6y ago
Failed to load resource: the server responded with a status of 401 ().Bearer error="invalid_token", error_description="The audience 'XXXXXXXXXXXXX' is invalid". I have a token, but I got this error. Can you help with this? Thank you in advance!
- Naveen Motwani6y ago
  It seems something wrong with the client ids you have used in your solution, make sure you use the correct api and client application's client ids

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.