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,
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
All right, now we are good to go. Let's get started.
Step 1
Install Microsoft adal package.
  1. npm install microsoft-adal-angular6
Step 2
Import the adal module in your application's app.module.
  1. MsAdalAngular6Module.forRoot({
  2. tenant: 'angular application tenant id',
  3. clientId: 'angular application client id',
  4. redirectUri: 'URI on which you want to redirect user after login',
  5. endpoints: {
  6. 'api application url': 'api application client id', // this is for feteching the access token
  7. },
  8. navigateToLoginRequestUrl: false,
  9. cacheLocation: '<localStorage / sessionStorage>',
  10. postLogoutRedirectUri: 'URI on which you want to redirect user after logout',
  11. }),
After importing your app module should look like,
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  4. import { AppRoutingModule } from './app-routing.module';
  5. import { AppComponent } from './app.component';
  6. import { MsAdalAngular6Module } from 'microsoft-adal-angular6';
  8. @NgModule({
  9. declarations: [
  10. AppComponent
  11. ],
  12. imports: [
  13. BrowserModule,
  14. AppRoutingModule,
  15. MsAdalAngular6Module.forRoot({
  16. tenant: 'angular application tenant id',
  17. clientId: 'angular application client id',
  18. redirectUri: 'URI on which you want to redirect user after login',
  19. endpoints: {
  20. 'api application url': 'api application client id', // this is for feteching the access token
  21. },
  22. navigateToLoginRequestUrl: false,
  23. cacheLocation: '<localStorage / sessionStorage>',
  24. postLogoutRedirectUri: 'URI on which you want to redirect user after logout',
  25. }),
  26. ],
  27. providers: [],
  28. bootstrap: [AppComponent]
  29. })
  30. 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:
  1. import { Component } from '@angular/core';
  2. import { MsAdalAngular6Service } from 'microsoft-adal-angular6';
  3. import { Observable } from 'rxjs';
  5. @Component({
  6. selector: 'app-root',
  7. templateUrl: './app.component.html',
  8. styleUrls: ['./app.component.css']
  9. })
  10. export class AppComponent {
  12. title = 'angular-client';
  13. accessToken: string;
  15. constructor(private adalService: MsAdalAngular6Service) {
  17. }
  20. login(): void {
  21. this.adalService.login();
  22. }
  24. logout(): void {
  25. this.adalService.logout();
  26. }
  28. getLoggedInUser(): any {
  29. return this.adalService.LoggedInUserEmail;
  30. }
  32. getAccessToken(): Observable<any> {
  33. return this.adalService.acquireToken('backend-api-uri');
  34. }
  36. getToken(): string {
  37. return this.adalService.accessToken;
  38. }
  39. }
This is it. Thanks for reading this article. Feel free to comment if you have any queries.