Azure Active Directory Integration In Angular 9 And Web API Core 3.1

Introduction

In this article, we will integrate the Azure Active Directory into an Angular application and get data from a secured web API using a JWT bearer token. There will be 3 steps to integrate the Azure Active Directory into our application.

Configure Azure active directory for our application:

Please log into the Azure portal using your credentials.
Select the Azure Active Directory icon/blade.
Select the App registration blade and then click new registration. Enter your application name.
In my case, the name was “azure-ad-integration”. Select the support account types. I selected “Accounts in this directory only”.
Then you can set “Redirect URI”, although it is an optional field. For my case, I selected “Web” and set its value to http://localhost:4200
Then click the “Register” button. You'll see the application's Overview or the main registration page.
The important details here are the client and tenant ids. Note these down in Notepad or similar, you'll need them later.
Then go to the "Authentication" blade and select "Access Tokens" and "ID tokens" from the implicit grant.
Then go to "Expose an API" then select "Add a scope" from Scopes defined by this API. Put all the necessary information and save it.
Your Azure application is ready for production.

Create an Angular 9 application

Create an angular application using the following command

ng new azure-ad-client

Add a package using the following command:

npm install --s @azure/msal-angular

In your app.module.ts, add following code:

const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
@NgModule({
declarations: [
AppComponent,
ProfileComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
MsalModule.forRoot({
auth: {
clientId: environment.clientId,
authority: environment.authority,
redirectUri: environment.redirectUrl,
postLogoutRedirectUri: environment.postLogoutRedirectUri,
navigateToLoginRequestUrl: true
}, cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: isIE, // set to true for IE 11
},
}, {
popUp: !isIE,
consentScopes: [
'user.read',
'openid',
'profile',
],
protectedResourceMap: [
['https://graph.microsoft.com/v1.0/me', ['user.read']]
]
}),
],
providers: [
{
provide: LocationStrategy,
useClass: HashLocationStrategy
},
{
provide: HTTP_INTERCEPTORS,
useClass: MsalInterceptor,
multi: true
},
MsalService,
ApiService
],
bootstrap: [AppComponent]
})

In your app-routing.module.ts file, add the following line:

const routes: Routes = [
{
path: '',
component: ProfileComponent,
canActivate: [MsalGuard]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})

Create a new component called profile.

Create a new service in the called api.service.ts into an app/shared folder and add the following code:

@Injectable({ providedIn: 'root' })
export class ApiService {
private baseUrl = environment.apiEndpoint;
constructor(private http: HttpClient) { }
getWeathers(): Observable<IWeatherForecast[]> {
// console.log('Token is ', localStorage.getItem('msal.idtoken'));
const reqHeader = new HttpHeaders({
'Content-Type': 'application/json',
Authorization: 'Bearer ' + localStorage.getItem('msal.idtoken')
});
return this.http.get<IWeatherForecast[]>(this.baseUrl + 'home', { headers: reqHeader }).pipe(
retry(1),
catchError(this.errorHandl)
);
}
// Error handling
errorHandl(error) {
let errorMessage = '';
if (error.error instanceof ErrorEvent) {
errorMessage = error.error.message;
} else {
errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
}
return throwError(errorMessage);
}
}

In your newly created component, please add the following lines of code:

export class ProfileComponent implements OnInit {
name: string;
username: string;
public weatherData: IWeatherForecast[] = [];
constructor(private msalService: MsalService, private apiService: ApiService) { }
ngOnInit(): void {
const account = this.msalService.getAccount();
this.name = account.name;
this.username = account.userName;
this.getWeatherinformation();
}
getWeatherinformation() {
this.apiService.getWeathers().subscribe(res => {
// console.log('data: ', res);
this.weatherData = res as IWeatherForecast[];
});
}
logout() {
localStorage.clear();
this.msalService.logout();
}
}

In your profile.component.html, please add the following code:

Name: {{name}}<br/>
Username: {{username}}
<br/>
<h3>Data From Web API</h3>
<ul>
<li *ngFor="let element of weatherData" [type]="element">
{{element.date}}, {{element.summary}}, {{element.temperatureC}}, {{element.temperatureF}}
</li>
</ul>
<button type='button' name='logOut' id='logout' (click)="logout()">Log Out</button>

The client application is ready.

Create a Web API project:

After creating your API project, please add the following package:
1. Microsoft.AspNetCore.Authentication.JwtBearer
3. Microsoft.AspNetCore.Cors
Add the following code into the Startup.cs file:
1. public void ConfigureServices(IServiceCollection services)
2. {
3. services.AddControllers();
5. // Add Cors
6. services.AddCors(o => o.AddPolicy("default", builder =>
7. {
8. builder.AllowAnyOrigin()
9. .AllowAnyMethod()
10. .AllowAnyHeader();
11. }));
13. services.AddAuthentication(o =>
14. {
15. o.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
16. o.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
17. o.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
18. }).AddJwtBearer(opt =>
19. {
20. opt.IncludeErrorDetails = true;
21. opt.Authority = "https://login.microsoftonline.com/c1ec3067-d41e-4053-b90c-d7619dae7650/v2.0";
22. opt.Audience = "b9535469-bbe7-4a66-8823-4fef098be78e";
23. });
24. }
26. // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
27. public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
28. {
29. if (env.IsDevelopment()) app.UseDeveloperExceptionPage();
30. // Enable Cors
31. app.UseCors("default");
32. app.UseRouting();
34. app.UseAuthentication();
35. app.UseAuthorization();
37. app.UseEndpoints(endpoints => { endpoints.MapControllers(); });
38. }
Add a Controller and add the following code into that controller:
1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using Microsoft.AspNetCore.Authentication.JwtBearer;
5. using Microsoft.AspNetCore.Authorization;
6. using Microsoft.AspNetCore.Mvc;
7. using Microsoft.Extensions.Logging;
9. namespace azure_ad_webapi.Controllers
10. {
11. [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
12. [Route("api/home")]
13. [Consumes("application/json")]
14. [Produces("application/json")]
15. [ApiController]
16. public class HomeController : ControllerBase
17. {
18. private static readonly string[] Summaries =
19. {
20. "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
21. };
23. // private readonly ILogger<HomeController> _logger;
25. public HomeController()
26. {
27. //_logger = logger;
28. }
30. [HttpGet]
31. public IEnumerable<WeatherForecast> Get()
32. {
33. var rng = new Random();
34. return Enumerable.Range(1, 5).Select(index => new WeatherForecast
35. {
36. Date = DateTime.Now.AddDays(index),
37. TemperatureC = rng.Next(-20, 55),
38. Summary = Summaries[rng.Next(Summaries.Length)]
39. })
40. .ToArray();
41. }
42. }
43. }

All code is hosted in GitHub. You can check it for a better understanding.

5 Comments

Join the conversation! Your thoughts help the community grow.

Weng Ng5y ago
Salam, bro. Thanks for the article. Very helpful and easy to understand. Bless you.
Craig Simon5y ago
Thank you for this. I'll be investigating how to adapt this AD-based approach for AD B2C. The differences look challenging. If you've got a similar boilerplate for B2C, I'd be delighted to see it.
- Abusaleh Md Nayeem5y ago
  Yes all most similar. I will share it very soon
Hamid Khan6y ago
Very good concept that you explain................
- Abusaleh Md Nayeem6y ago
  Thank you, sir. Keep me in your prayer