Using ADAL with Angular2–Part 2

In this post,  Senior Application Development Manager, Vishal Saroopchand who follows up his first post to demonstrate how to pass and revalidate the JWT token.

In my last blog posting, I explained how to use Adaj.js with Angular2 and demonstrated how to retrieve the JWT token from AAD. I also stated you can supply the JWT to your back end WebAPI services. This blank statement caused several inquiries on how to pass the JWT from client’s HTTP requests and revalidating on the WebAPI service.

In this post, I have updated both the original source and added two WebAPI implementation that shows how to pass and revalidate the JWT token.

One implementation is for ASP.NET MVC, the other ASP.NET Core.

Here are the key points:

Client App

You must supply the JWT token as a Bearer token before invoking HTTP requests. You do this by constructing a Headers collection and adding an Authorization header.

You then supply the headers in the optional RequestOptionsArgs parameter on Http Service GET/PUT/POST/DELETE calls

AspNetCore

Install and configure CORS middleware (change the Origins, Headers and Methods to meet your security needs), Microsoft.AspNetCore.Mvc.Cors

Install and configure JwtBearer Authentication middleware (change settings to meet your security needs), Microsoft.IdentityModel.Clients.ActiveDirectory

You will also need the following middleware:

Microsoft.AspNetCore.Authentication.JwtBearer
Microsoft.IdentityModel.Tokens

Finally, secure your controllers by adding the Authorize attribute

AspNet5

Install the following NuGet packages

<package id="Owin" version="1.0" targetFramework="net462" />
<package id="Microsoft.Owin" version="3.1.0" targetFramework="net462" />
<package id="Microsoft.Owin.Host.SystemWeb" version="3.1.0" targetFramework="net462" />
<package id="Microsoft.Owin.Security" version="3.1.0" targetFramework="net462" />
<package id="Microsoft.Owin.Security.ActiveDirectory" version="3.1.0" targetFramework="net462" />
<package id="Microsoft.Owin.Security.Jwt" version="3.1.0" targetFramework="net462" />
<package id="Microsoft.Owin.Security.OAuth" version="3.1.0" targetFramework="net462" />

Add Startup class and configure AAD Authentication middleware. You will need to retrieve Tenant and ClientIDs from AppSettings.

Secure API controllers by adding the Authorize attribute.

You will find the updated client app code here and the services here.

Premier Support for Developers provides strategic technology guidance, critical support coverage, and a range of essential services to help teams optimize development lifecycles and improve software quality.  Contact your Application Development Manager (ADM) or email us to learn more about what we can do for you.