Overview

Let’s face it … security is HARD. Implementing authentication and authorization into applications has always been a challenge and a chore for developers. Building a secure application requires strong knowledge across a number of areas.

Thanks to the power of Microsoft Azure, it now doesn’t have to be like this anymore. Thanks to the power of Easy Auth it’s easier than ever to setup secure authentication for your web application with the click of a few buttons. Yep, I’m not kidding!

So what are we waiting for … lets get started.

Azure App Service Logo

Introducing Easy Auth …

The area of security, specifically authentication and authorisation has always been a challenge for developers. Not only do we need to implement these features but they also need to be maintained going forward to ensure they provide the utmost security.

If you’re already using the Azure cloud to host your web apps, then you are in luck because Microsoft has come to the rescue and has made it easier than ever to enable an Authentication wrapper around your Azure App Service at the click of a few buttons using a technology commonly known as “Easy Auth”.

Sounds good, right?

How does it Work?

When you enable “Easy Auth” in Azure, behind the scenes Azure sets a number of environment variables within your app services sandbox environment which enables the Easy Auth module.

Azure allows you to authenticate with various third party identity providers including Azure AD, Microsoft accounts, Facebook, Google and Twitter.

All you need to do is configure the authentication settings and Azure will take care of the rest for you. This decouples the authentication function from your application, therefore minimising time and effort, and helps ensure your application is more portable by reducing third party dependencies.

Azure Easy Auth Architecture Diagram

How do I Enable Authentication for my App?

Now we’ll walk through the process of enabling authentication for an existing Azure App Service. In this example, I’ll specifically be focusing on authenticating with Azure AD, as it is the most common use-case. I’ll demonstrate the bare minimum steps to get it up and running as quickly as possible.

1. Navigate to your App Service within Azure and select the SETTINGS > AUTHENTICATION / AUTHORIZATION blade.

To demonstrate how it works I’ve created a brand new App Service. The below screenshot shows the default landing page for the site.

Azure Web App Screenshot

2. Set ‘App Service Authentication’ to ‘On’ and select ‘Log in with Azure Active Directory’ as the identity provider to enforce Azure AD authentication for anonymous users.

Azure App Service Configuration Screenshot

3. Next, click the ‘Azure Active Directory’ section below to access the configuration screen.

Azure App Service Configuration Screenshot

4. Set the ‘Management Mode’ to ‘Express’.

Azure App Service Configuration Screenshot

5. We’ll need to associate this App Service with an Azure AD Application Registration. You can either select an existing Azure AD App Registration, or you can create a brand new one. In this case, I’m creating a brand new app.

6. That's it! It’s now time to test our web application…

Now when I access my web application I am now prompted to authenticate with Azure AD before I can access the website.

Note: In the above example, my Azure AD account already has access to the new Azure App Registration I created. You’ll need to make sure your account has access to the Azure App Registration, otherwise you will be denied access to the web application.

Azure Authentication Permissions Request Prompt Screenshot
Azure Web App Screenshot

How to Access the Claim Information?

User claims can be accessed through specific request headers that are passed across to your app by the Azure App Service.

  • X-MS-CLIENT-PRINCIPAL-NAME
  • X-MS-CLIENT-PRINCIPAL-ID
  • X-MS-TOKEN-AAD-EXPIRES-ON
  • X-MS-TOKEN-AAD-REFRESH-TOKEN

More information can be found here about these headers:
https://docs.microsoft.com/en-us/azure/app-service/app-service-authentication-how-to#access-user-claims

To demonstrate, I’ve created a simple dotnet core web app to display these headers back to the end user. Source code can be found here – https://github.com/sbartholomeusz/aad-auth-demo.

  1. First, I'll create a shell web application using the command line.
> cd C:\Temp\
> dotnet new webapp --name "az-auth-demo"

The template "ASP.NET Core Web App" was created successfully.
This template contains technologies from parties other than Microsoft, see https://aka.ms/aspnetcore/3.1-third-party-notices for details.

Processing post-creation actions...
Running 'dotnet restore' on az-auth-demo\az-auth-demo.csproj...
  Determining projects to restore...
  Restored C:\Temp\az-auth-demo\az-auth-demo.csproj (in 202 ms).

Restore succeeded.

2. Next I need to replace /Pages/Index.cshtml with the below code which displays the headers contained in the web request:

@page
@model IndexModel
@{
	ViewData["Title"] = "Home page";
}

<div class="text-center">
	<h1 class="display-4">Request Header Inspector</h1>
	<div>
    	<p>
        	<b>X-MS-CLIENT-PRINCIPAL-NAME:</b><br />
        	@Request.Headers["X-MS-CLIENT-PRINCIPAL-NAME"]
    	</p>
    	<p>
        	<b>X-MS-CLIENT-PRINCIPAL-ID:</b><br />
        	@Request.Headers["X-MS-CLIENT-PRINCIPAL-ID"]
    	</p>
    	<p>
        	<b>X-MS-TOKEN-AAD-REFRESH-TOKEN:</b><br />
        	@Request.Headers["X-MS-TOKEN-AAD-ID-TOKEN"]
    	</p>
    	<p>
        	<b>X-MS-TOKEN-AAD-ACCESS-TOKEN:</b><br />
        	@Request.Headers["X-MS-TOKEN-AAD-ACCESS-TOKEN"]
    	</p>

    	<p>
        	<b>X-MS-TOKEN-AAD-EXPIRES-ON:</b><br />
        	@Request.Headers["X-MS-TOKEN-AAD-EXPIRES-ON"]
    	</p>

    	<p>
        	<b>X-MS-TOKEN-AAD-REFRESH-TOKEN:</b><br />
        	@Request.Headers["X-MS-TOKEN-AAD-REFRESH-TOKEN"]
    	</p>
	</div>
</div>
Visual Studio Screenshot

3. Publish the app to Azure. Make sure you enable authentication with Azure AD for the App Service.

Now when I launch the web app, I now see the users claim information displayed directly on the web page.

Obviously you shouldn't display the claims information to end users, but you can see how easy it is to access this information.

Web Application Screenshot

Want to Know More?

Final Thoughts

I hope this article demonstrates how easy to is to enable authentication for your Azure web application using Azure Easy Auth.

Azure Easy Auth is ideal for simple scenarios where you just need some basic authentication for your existing Azure web application. However if you have more advanced needs than you may need to look at alternative solutions.

Shane Bartholomeusz