Azure Active Directory Labs Series – Protect Web App


Back in June I had the pleasure of delivering a training on Azure Active Directory to two customer crowds.  I say pleasure because not only do I love to share knowledge but also, the preparation of the training forces me to go deep on some aspects of what I’m going to teach.

In that training there were 8 labs and I thought it would be great to share them to the more general public.  The labs follow each other and build on each other.

You can find the exhaustive list in Cloud Identity & Azure Active Directory page.

In the current lab we create an Azure Web App and force authentication against an Azure AD application (created in a previous lab) in order to access it.  You can read Securing REST API using Azure Active Directory for something similar but with a REST API as opposed to a Web App.

Create Resource Group

  1. Go to the Azure portal @ https://portal.azure.com
  2. In the left column menu, select Resource Groups
    clip_image002
  3. Select Add
    clip_image004
  4. In Resource Group name, type AAD-Web-App and in location, select East US 2
    clip_image006
  5. Press the create button
  6. In the resource group pane, click refresh until you can see your newly created group

Create App Service Plan

  1. Select the newly create group
  2. In the top menu of the resource group pane, select +ADD
    clip_image008
  3. In the search box, type App Service Plan
    clip_image010
  4. In the results, select the one published by Microsoft with the name App Service Plan
    clip_image012
  5. Click Create
  6. For the name of your app service plan, type MyAppPlan, use the existing resource group you just created and select East US 2 as a location
    clip_image014
  7. Select Pricing Tier
  8. Select view all in the top right corner to show all pricing tier
    clip_image016
  9. Scroll down until you find F1 Free
    clip_image018
  10. Select the free tier and click the select button down the pane
  11. Press the create button in the App Service Plan pane

Create Web App

  1. In the left column menu, select Resource Groups
    clip_image019
  2. Select the resource group you created, i.e. AAD-Web-App
  3. In the top menu of the resource group pane, select +ADD
    clip_image020
  4. In the search box type Web App
  5. In the results, select the one published by Microsoft with name Web App
  6. Click the create button
  7. For the App name, you’ll need something unique as it is mapped to a domain name, e.g. webdemovpl
  8. Use the existing resource AAD-Web-App
  9. Select the existing App Plan you created in the previous section, i.e. MyAppPlan
  10. Press the Create button

Configure Web App

  1. In the left column menu, select Resource Groups
    clip_image019[1]
  2. Select the resource group you created, i.e. AAD-Web-App
  3. Select the web app you just created
    clip_image022
  4. You should see the Web App pane
    clip_image024
  5. Make sure the settings are open (otherwise, click the Settings option in the menu)
  6. In the settings pane, scroll down until the Features section (towards the bottom)
  7. Click Authentication / Authorization
    clip_image026
  8. Turn the App Service Authentication on
    clip_image028
  9. Leave the default action there
    clip_image030
    This will force user to authenticate against Azure AD when they hit you site the first time
  10. In Authentication Providers, select the first provider, i.e. Azure AD
    clip_image032
  11. Select the Advanced option
    clip_image034
  12. The client id can be found in the Azure AD application
    1. In order to get your client ID, Go to the legacy portal @ https://manage.windowsazure.com
    2. Scroll down the left menu to the bottom and select Active Directory
      clip_image036
    3. You should see the following screen
      clip_image038
    4. Select a tenant you created for this lab & enter it
      clip_image040
    5. Select the Applications sub menu
      clip_image042
    6. Select the application you’ve created in a previous lab (i.e. WebDemo)
    7. Select the configure menu within the application
      clip_image044
    8. Scroll down until you find the client ID
      clip_image046
  13. The issuer id will be the concatenation of https://sts.windows.net/ & your tenant ID
    1. In order to get your tenant ID, Go to the legacy portal @ https://manage.windowsazure.com
    2. Scroll down the left menu to the bottom and select Active Directory
      clip_image036[1]
    3. You should see the following screen
      clip_image038[1]
    4. Select a tenant you created for this lab & enter it
      clip_image040[1]
    5. Select the Applications sub menu
      clip_image042[1]
    6. Select the application you’ve created in a previous lab (i.e. WebDemo)
    7. At the bottom of the screen select View Endpoints
      clip_image048
    8. In any of the text box, extract the GUID ; this is your tenant ID
      clip_image050
  14. You should have filled the fields like this
    clip_image052
  15. Click OK
  16. Click Save in the Authentication / Authorization pane

Configure Reply URL

We need to match the application’s reply URL with the web app we just created.

When we created the AAD application we did enter http://nowhere.com because we didn’t know the web application URL.

The Reply URL will be <your web app root URL>/.auth/login/aad/callback (for instance https://webdemovpl.azurewebsites.net/.auth/login/aad/callback). The App Service gateway handles the authentication for the Web App.

  1. Go to the legacy portal @ https://manage.windowsazure.com
  2. Scroll down the left menu to the bottom and select Active Directory
    clip_image053
  3. You should see the following screen
    clip_image054
  4. Select a tenant you created for this lab & enter it
    clip_image055
  5. Select the Applications sub menu
    clip_image056
  6. Select the application you’ve created in a previous lab (i.e. WebDemo)
  7. Select the configure menu within the application
    clip_image044[1]
  8. Scroll down until you find the reply url list
    clip_image058
  9. Remove http://nowhere.com
  10. Add <your web app root URL>/.auth/login/aad/callback (for instance https://webdemovpl.azurewebsites.net/.auth/login/aad/callback)

Deploy Web App

We could test the authentication at this point. It would land us to an empty Web app page.

clip_image060

But instead, we’ll deploy an ASP.NET web app to have some web content.

  1. Open Visual Studio 2015
  2. Create a web application named DemoWebApp
  3. There are two modifications to do from the vanilla template:
    1. Open Global.asax.cs. In method Application_Start, add the line AntiForgeryConfig.UniqueClaimTypeIdentifier = ClaimTypes.NameIdentifier
      This ensures only that claim is looked up for when testing for forgery (see https://brockallen.com/2012/07/08/mvc-4-antiforgerytoken-and-claims/ for details).
    2. Open \Views\Home\Index.cshtml.  In order to output the claims, add the following HTML after <h1>ASP.NET</h1>
      
      <h2>Claims</h2>
      
      
      <table border=”1″>
      
      <thead>
      
      <tr>
      
      <th>Issuer</th>
      
      
      <th>Type</th>
      
      
      <th>Value</th>
      
              </tr>
      
          </thead>
      
      
      <tbody>
              @foreach (var c in ((ClaimsIdentity)User.Identity).Claims.OrderBy(c => c.Type))
              {
      
      <tr>
      
      <td>@c.Issuer</td>
      
      
      <td>@c.Type</td>
      
      
      <td>@c.Value</td>
      
                  </tr>
      
              }
          </tbody>
      
      </table>
      
      
  4. Right click on the web project and click Publish
    clip_image062
  5. Select Microsoft Azure App Service
    clip_image064
  6. Make sure to select your subscription and find the web app under the AAD-Web-App resource group
    clip_image066
  7. Select the web app
  8. Click OK
  9. On the connection tab, click Publish
  10. The project should deploy to Azure in your web app
  11. Your web app should open in your browser
  12. If you aren’t logged in yet, you should be invited to
  13. You should see your user name in the top right corner
  14. You can see the claims Azure AD provided to your web app

Test Web App

  1. Open an in-private session on your browser
    This will allow you to start a session afresh without Azure AD remembering your account
  2. Navigate to your web app
  3. You’ll be redirected to https://login.microsoftonline.com/
  4. In Email or Phone, type the full user name as it appear in the Azure AD console (users tab)
    clip_image068
    The user name should be suffixed by @<name of your tenant>.onmicrosoft.com
  5. You’ll notice that when you tab away from the email textbox, the browser does an online validation. This is because Azure AD now knows in which tenant you want to login (which could be different than then tenant your application is using since you can bring users from other tenants) and it could apply policies of that tenant, e.g. requiring a PIN.
  6. In password, type the password of the user you’ve copied when you created it
    (If you didn’t note the password, you can reset it)
  7. Click the sign in button
    clip_image070
  8. You’ll be prompted to change your password ; do so
  9. You’ll be redirected to your web app
  10. You’ll see that Alan Scott is logged in & you can see its claims
  11. Repeat the same process (starting by opening a new in-private session) with the Harley Quinn user, which we didn’t assign to the application
  12. You should be denied access
    clip_image072

Post Lab

Let’s look at a few claims sent by AAD

Name Claim Type Value
Audience aud The client ID of the application
Issuer iss The issuer Url you configured for the web app
Issued at iat The time at which the token was issued ; JSON time notation (i.e. integer number of seconds since January 1st 1970)
Not before nbf Time the token was issued (in JSON time notation)
Not on after exp Time when the token will be expired (in JSON time notation)
Name http:/…/name Full name of the account (with @<directory name>)

See https://azure.microsoft.com/en-us/documentation/articles/active-directory-token-and-claims/ for details.

Advertisements

5 thoughts on “Azure Active Directory Labs Series – Protect Web App

  1. hello, I am not a developer so apologies but I’m not familiar at all with Visual Studio. when I add “AntiForgeryConfig.UniqueClaimTypeIdentifier = ClaimTypes.NameIdentifier;” I have a red line and it says that “‘claimtypes’ does not exist in the current contex”. Do I have to install anything on top of VS?
    Thanks!

  2. I used VS2015 as well. Not sure if I have some libraries missing. Did you install anything after VS?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s