{"id":2786,"date":"2014-04-28T07:48:33","date_gmt":"2014-04-28T14:48:33","guid":{"rendered":"http:\/\/www.cloudidentity.com\/blog\/?p=2786"},"modified":"2014-04-28T23:40:46","modified_gmt":"2014-04-29T06:40:46","slug":"use-owin-azure-ad-to-secure-both-mvc-ux-and-web-api-in-the-same-project","status":"publish","type":"post","link":"https:\/\/www.cloudidentity.com\/blog\/2014\/04\/28\/use-owin-azure-ad-to-secure-both-mvc-ux-and-web-api-in-the-same-project\/","title":{"rendered":"Use OWIN & Azure AD to Secure Both MVC UX and Web API in The Same Project"},"content":{"rendered":"

Mixing and matching multiple authentication styles in a single web application has always been difficult with WIF.
\nThe new OWIN security components in ASP.NET change that, thanks to the finer grained control they grant over request processing pipelines.<\/p>\n

One of the most common requests I have been hearing in the last couple of years is \u2013 how can one secure both UX controllers and API controllers within the same app? This post is meant to show you how to do exactly that.<\/p>\n

I will start from an MVC app, already configured to handle web sign in via Azure AD thru OpenId Connect. I will add to the app a web API controller, show how to configure it to accepts calls secured via OAuth2 bearer token access from Azure AD, put together a quick test client and demonstrate how OpenID Connect and OAuth2 can coexist in the very same VS project. Pretty cool!<\/p>\n

Set Up an App to Use OpenId Connect and Azure AD<\/h2>\n

Rather than starting from scratch, I recommend that you clone our basic web sign on sample from WebApp-OpenIDConnect-DotNet<\/a>. Clone it and follow the instructions in the \u201cHow to run this sample\u201d section in the readme. Once done, confirm that everything went well by hitting F5 and doing a test sign in. If everything works as described, you are ready to move to the next phase.<\/p>\n

Add a Web API Controller<\/h2>\n

Next, we are going to add to the app\u2019s controllers an ApiController and configure the app to correctly route requests through it. No identity work yet.<\/p>\n

Right-click on the project in the solution explorer, choose add new\/controller.<\/p>\n

Choose Web API 2 Controller \u2013 Empty<\/strong>. I named mine AphorismController.<\/p>\n

The scaffolding system goes as far as it can for adding the necessary bits to the project (the AphorismController.cs file, the WebApiConfig.cs file in App_Start) but it does not do everything for you; namely, there are some required changes in the global.asax.cs file that you have to apply manually. The good news is that the scaffolding helps you by listing those changes in a readme.txt that gets displayed as soon as it\u2019s done updating the project. Specifically, you have to add to the Application_Start the following lines<\/span><\/strong>:<\/p>\n

using<\/span> System;\r\nusing<\/span> System.Collections.Generic;\r\nusing<\/span> System.Linq;\r\nusing<\/span> System.Web;\r\nusing<\/span> System.Web.Mvc;\r\nusing<\/span> System.Web.Optimization;\r\nusing<\/span> System.Web.Routing;\r\nusing<\/span> System.Web.Http;<\/span><\/strong>\r\n\r\nnamespace<\/span> WebApp_OpenIDConnect_DotNet\r\n{\r\n    public<\/span> class<\/span> MvcApplication : System.Web.HttpApplication\r\n    {\r\n        protected<\/span> void<\/span> Application_Start()\r\n        {            \r\n            AreaRegistration.RegisterAllAreas();\r\n            GlobalConfiguration.Configure(WebApiConfig.Register);<\/span><\/strong>\r\n            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);\r\n            RouteConfig.RegisterRoutes(RouteTable.Routes);\r\n            BundleConfig.RegisterBundles(BundleTable.Bundles);\r\n        }\r\n    }\r\n}<\/pre>\n
Once you\u2019ve done that, we need to add an action to our new controller \u2013 just to see some action (no pun intended). Here there\u2019s mine:<\/p>\n
public<\/span> class<\/span> AphorismController : ApiController\r\n{\r\n    public<\/span> string<\/span> Get()\r\n    {\r\n        string<\/span> [] aphorisms = \r\n            new<\/span> [] {\"Non ci sono piu' le mezze stagioni\"<\/span>,\r\n                    \"Tanto va la gatta al lardo che ci lascia lo zampino\"<\/span>,\r\n                    \"La twingo e' una macchina terribile\"<\/span>};\r\n        return<\/span> (aphorisms[new<\/span> Random().Next(3)]);\r\n    }\r\n}\r\n<\/pre>\n
This web API will dispense a random tidbit of ancient Italian wisdom to anybody hitting via the browser the URL https:\/\/localhost:44320\/API\/Aphorism<\/a>\u00a0\"Winking.<\/p>\n
Go ahead, hit F5 and give it a try now – before we start playing with identity\u00a0 -to ensure that the controller was correctly added . Note that you can hit the API endpoint anonymously and get results regardless of whether you signed in the app via web sign in or not \u2013 that\u2019s because the API controller we added is not secured yet.<\/p>\n
Securing the Web API with Azure AD<\/h2>\n
Aaand here the fun begins. We know from past entries<\/a> that the ASP.NET OWIN components include middleware specifically designed to secure web API via Azure AD and OAuth2 bearer token access. All we need to do here is to add the relevant middleware to the pipeline \u2013 ensuring that it does not step on the toes of the middleware already there (the OpenId Connect one, handling requests to the controllers which serve UX to the browser). That boils down to ensuring that the OpenId Connect middleware fires when the request involves UX, and that the Azure AD OAuth2 bearer token middleware fires only when the request is for a web API.<\/p>\n
From the Package Manger Console, run<\/p>\n
PM> Install-Package Microsoft.Owin.Security.ActiveDirectory -Pre
\nPM> Install-Package Microsoft.AspNet.WebApi.Owin -Pre<\/span><\/p>\n
The first package contains the Azure AD OAuth2 middleware; the second contains classes used for using OWIN components with web API.<\/p>\n
That done, head to Startup.Auth.cs and add the following highlighted code:<\/p>\n
\/\/ ...<\/span><\/pre>\n
using<\/span> Microsoft.Owin.Security.ActiveDirectory;<\/span><\/strong>\r\n\/\/ ...<\/span>\r\npublic<\/span> void<\/span> ConfigureAuth(IAppBuilder app)\r\n{\r\n    app.SetDefaultSignInAsAuthenticationType(CookieAuthenticationDefaults.AuthenticationType);\r\n\r\n    app.UseCookieAuthentication(new<\/span> CookieAuthenticationOptions());\r\n\r\n    app.UseOpenIdConnectAuthentication(\r\n        new<\/span> OpenIdConnectAuthenticationOptions\r\n        {\r\n            Client_Id = clientId,\r\n            Authority = authority,\r\n            Post_Logout_Redirect_Uri = postLogoutRedirectUri\r\n        });\r\n    app.UseWindowsAzureActiveDirectoryBearerAuthentication(\r\n        new<\/span> WindowsAzureActiveDirectoryBearerAuthenticationOptions\r\n        {\r\n            Audience = \"https:\/\/developertenant.onmicrosoft.com\/WebUXplusAPI\"<\/span>,\r\n            Tenant = \"developertenant.onmicrosoft.com\"<\/span>,\r\n            AuthenticationType = \"OAuth2Bearer\"<\/span>,                               \r\n        });<\/span><\/strong>\r\n}<\/pre>\n
The call to UseWindowsActiveDirectoryBearerAuthentication adds the relevant middleware to the pipeline. The tenant is the same we\u2019ve used so far, and the Audience value comes straight from the App Id URI entry for the app in the Azure AD portal.
\nThe notable bit here is the value assigned to AuthenticationType. Both the cookie and the OpenId Connect middlewares stick with the same default, assigned in the first line of ConfigureAuth; but the OAuth2 middleware gets a different value, to ensure that the activation paths of the two middleware groups remain distinct.<\/p>\n
Here there\u2019s how we take advantage of that. Head to your API controller class and add the following:<\/p>\n
[HostAuthentication(\"OAuth2Bearer\"<\/span>)]\r\n[Authorize]<\/span>\r\npublic<\/span> class<\/span> AphorismController : ApiController\r\n{\r\n<\/pre>\n
The [Authorize] attribute establishes that only authenticated users are allowed to request any of the resources served by the controller. The value of HostAuthentication reflects the value specified in the initialization of the Azure AD OAuth2 web API middleware, creating a tie between the two and determining what middleware will fire upon receiving a request for this controller.<\/p>\n
Go ahead and try hitting again the endpoint via browser: this time you\u2019ll get back a 401.<\/p>\n
Update the Azure AD Portal to Provision the Web API and Its Client<\/h2>\n
Currently we have a regression which requires you to do a bit of extra work for AD to recognize that, besides the UX, your web app exposes a web API. You can follow the instructions for adding a manifest entry to the API as presented in https:\/\/github.com\/AzureADSamples\/NativeClient-DotNet<\/a>, step #3, register service.<\/p>\n
Once that\u2019s done, you have to create an entry for a client app to securely exercise the web API end point. You can follow the instructions in https:\/\/github.com\/AzureADSamples\/NativeClient-DotNet<\/a>, step #, register client.<\/p>\n
Create the Client Project<\/h2>\n
This is standard ADAL usage. Add to the solution a new project: I used a console app to kame things faster, but of course you can choose any time of client you like.<\/p>\n
Once you have the project, get in the package manager console and run the two commands below.<\/p>\n
PM> Install-Package Microsoft.IdentityModel.Clients.ActiveDirectory \u2013Pre
\n<\/span>PM> Install-Package Microsoft.Net.Http -Pre<\/span><\/p>\n
That\u2019s pretty much it. The client is all boilerplate code, you can just paste the below in your project and simply change the AuthenticationContext construction and AccessToken call to use your actual settings.<\/p>\n
using<\/span> System;\r\nusing<\/span> Microsoft.IdentityModel.Clients.ActiveDirectory;\r\nusing<\/span> System.Net.Http;\r\nusing<\/span> System.Net.Http.Headers;\r\n\r\nnamespace<\/span> Client1\r\n{\r\n    class<\/span> Program\r\n    {\r\n        static<\/span> void<\/span> Main(string<\/span>[] args)\r\n        {\r\n            AuthenticationContext ac = \r\n                new<\/span> AuthenticationContext(\"https:\/\/login.windows.net\/developertenant.onmicrosoft.com\"<\/span>);\r\n            AuthenticationResult ar = \r\n                ac.AcquireToken(\"https:\/\/developertenant.onmicrosoft.com\/WebUXplusAPI\"<\/span>, \r\n                                \"71aefb3b-9218-4dea-91f2-8b23ce93f387\"<\/span>, \r\n                                new<\/span> Uri(\"http:\/\/any\"<\/span>));\r\n\r\n            string<\/span> result = string<\/span>.Empty;\r\n            HttpClient httpClient = new<\/span> HttpClient();\r\n            httpClient.DefaultRequestHeaders.Authorization = \r\n                new<\/span> AuthenticationHeaderValue(\"Bearer\"<\/span>, ar.AccessToken);\r\n            HttpResponseMessage response = \r\n                httpClient.GetAsync(\"https:\/\/localhost:44320\/API\/Aphorism\"<\/span>).Result;\r\n\r\n            if<\/span> (response.IsSuccessStatusCode)\r\n            {\r\n                result = response.Content.ReadAsStringAsync().Result;\r\n            }\r\n            Console.WriteLine(result);\r\n            Console.ReadLine();\r\n        }\r\n    }\r\n}<\/pre>\n
Test Run<\/h2>\n
Hit F5. The web app project will start. Either leave it as is or sign in, it makes no difference for the web API.<\/p>\n
Next, right-click on your client project and choose debug\/start new instance.<\/p>\n
You\u2019ll be prompted right away.<\/p>\n
\"image\"<\/a><\/p>\n
Sign in with a user from your development tenant, and voila\u2019! You securely accessed via OAuth2 bearer token a web API, hosted alongside UX secured via OpenId Connect.<\/p>\n
\"image\"<\/a><\/p>\n
Wrap<\/h2>\n
This is one of the many scenarios that were difficult to achieve with the former programming model, but that we explicitly designed for in the new OWIN security components. In fact, as you have seen achieving peaceful coexistence of UX and API controllers in the same project is trivial with the new middleware.
\nI know for a fact that many of you will be super happy to read this \"Smile\" if you have feedback on how we can improve this further, don\u2019t be shy!<\/p>\n","protected":false},"excerpt":{"rendered":"
Mixing and matching multiple authentication styles in a single web application has always been difficult with WIF. The new OWIN security components in ASP.NET change that, thanks to the finer grained control they grant over request processing pipelines. One of the most common requests I have been hearing in the last couple of…<\/p>\n","protected":false},"author":1,"featured_media":2782,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2786","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cloudidentity.com\/blog\/wp-json\/wp\/v2\/posts\/2786","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cloudidentity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cloudidentity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cloudidentity.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cloudidentity.com\/blog\/wp-json\/wp\/v2\/comments?post=2786"}],"version-history":[{"count":2,"href":"https:\/\/www.cloudidentity.com\/blog\/wp-json\/wp\/v2\/posts\/2786\/revisions"}],"predecessor-version":[{"id":2788,"href":"https:\/\/www.cloudidentity.com\/blog\/wp-json\/wp\/v2\/posts\/2786\/revisions\/2788"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cloudidentity.com\/blog\/wp-json\/wp\/v2\/media\/2782"}],"wp:attachment":[{"href":"https:\/\/www.cloudidentity.com\/blog\/wp-json\/wp\/v2\/media?parent=2786"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cloudidentity.com\/blog\/wp-json\/wp\/v2\/categories?post=2786"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cloudidentity.com\/blog\/wp-json\/wp\/v2\/tags?post=2786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}