{"id":14985,"date":"2017-10-08T20:58:00","date_gmt":"2017-10-08T20:58:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/premier_developer\/?p=14985"},"modified":"2019-03-04T15:11:44","modified_gmt":"2019-03-04T22:11:44","slug":"using-adal-with-angular2-part-2","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/using-adal-with-angular2-part-2\/","title":{"rendered":"Using ADAL with Angular2\u2013Part 2"},"content":{"rendered":"

In this post,\u00a0 Senior Application Development Manager, Vishal Saroopchand<\/a> who follows up his first post to demonstrate how to pass and revalidate the JWT token.<\/p>\n

\n

In my last<\/a> 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\u2019s HTTP requests and revalidating on the WebAPI service.<\/p>\n

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.<\/p>\n

One implementation is for ASP.NET MVC, the other ASP.NET Core.<\/p>\n

Here are the key points:<\/b><\/p>\n

Client App<\/h3>\n

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

\"adal1\"<\/a><\/p>\n

You then supply the headers in the optional RequestOptionsArgs<\/a> parameter on Http<\/a> Service GET\/PUT\/POST\/DELETE calls<\/p>\n

\"adal2\"<\/a><\/p>\n

AspNetCore<\/h3>\n

Install and configure CORS middleware (change the Origins, Headers and Methods to meet your security needs), Microsoft.AspNetCore.Mvc.Cors<\/p>\n

\"adal3\"<\/a><\/p>\n

Install and configure JwtBearer Authentication middleware (change settings to meet your security needs), Microsoft.IdentityModel.Clients.ActiveDirectory<\/p>\n

\"adal4\"<\/a><\/p>\n

You will also need the following middleware:<\/p>\n

Microsoft.AspNetCore.Authentication.JwtBearer\r\nMicrosoft.IdentityModel.Tokens\r\n<\/pre>\n
Finally, secure your controllers by adding the Authorize attribute<\/p>\n
\"adal5\"<\/a><\/p>\n
AspNet5<\/h3>\n
Install the following NuGet packages<\/p>\n
<package id=\"Owin\" version=\"1.0\" targetFramework=\"net462\" \/>\r\n<package id=\"Microsoft.Owin\" version=\"3.1.0\" targetFramework=\"net462\" \/>\r\n<package id=\"Microsoft.Owin.Host.SystemWeb\" version=\"3.1.0\" targetFramework=\"net462\" \/>\r\n<package id=\"Microsoft.Owin.Security\" version=\"3.1.0\" targetFramework=\"net462\" \/>\r\n<package id=\"Microsoft.Owin.Security.ActiveDirectory\" version=\"3.1.0\" targetFramework=\"net462\" \/>\r\n<package id=\"Microsoft.Owin.Security.Jwt\" version=\"3.1.0\" targetFramework=\"net462\" \/>\r\n<package id=\"Microsoft.Owin.Security.OAuth\" version=\"3.1.0\" targetFramework=\"net462\" \/>\r\n<\/pre>\n
Add Startup class and configure AAD Authentication middleware. You will need to retrieve Tenant and ClientIDs from AppSettings.<\/p>\n
\"adal6\"<\/a><\/p>\n
Secure API controllers by adding the Authorize attribute.<\/p>\n
\"adal7\"<\/a><\/p>\n
 <\/p>\n
You will find the updated client app code<\/strong> here<\/a> and the services here<\/a>.<\/p>\n
\n
Premier Support for Developers<\/strong><\/a> provides strategic technology guidance, critical support coverage, and a range of essential services to help teams optimize development lifecycles and improve software quality.\u00a0 Contact your Application Development Manager (ADM) or email us<\/a><\/b> to learn more about what we can do for you.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post,\u00a0 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 […]<\/p>\n","protected":false},"author":582,"featured_media":37840,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[84,51,3],"class_list":["post-14985","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-permierdev","tag-adal","tag-angular","tag-team"],"acf":[],"blog_post_summary":"
In this post,\u00a0 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 […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/14985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=14985"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/14985\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/37840"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=14985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=14985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=14985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}