NIEMatron

No-Code App Service Authorization using AAD B2C

While seemingly simple, it was difficult to find a solid how-to on the topic of how to use the native Azure App Service (aka WebApp) Authorization functionality to fence-off an application from the general public with an Azure AD (AAD) B2C directory. After some stumbles, I came across this blog by CGillum that proved it could be done, which gave me hope. Since the article was older, it did not have more recent screenshots and instructions, so I needed to adapt it some to fit the current services.

Part 1 - Create an App Service

Locate or create an Azure App Service that will be connected to Azure B2C. Once it is created, obtain the App URL and save it somewhere. It will be required in the App Registration later.

Part 2 - Create an Azure AD B2C Directory

This tutorial will assume you have already established an Azure AD B2C Directory (B2C) that you wish to leverage, however if needed, please create a B2C first by following one of the tutorials on the Microsoft Docs website.

Part 3 - Register your Application in the B2C Directory

Step 1. Switch Directories to AD B2C

If not already in the same directory as your B2C, change directories in Azure by selecting the directory filter icon in the header

Step 2. Create a New Registration

Navigate to App Registrations screen and add a new registration. Be sure to choose Web Application if prompted.

Step 3. Specify the Correct Redirect URI

In the new registration, navigate to the Authentication screen and add new Redirect URI with the URL to your application. *IMPORTANT* Be sure to add the following to the end of that URL: `/.auth/login/aad/callback`. This is the built-in AAD callback for Azure App Services and is required in order to authenticate your app through AAD.

Step 4. Allow Implicit Grants

As this tutorial is working under the premise there is no logic in your app doing the authentication, be sure the "Access Tokens" and "ID Tokens" check boxes are marked on that same Authorizations page.

Step 5. Generate a Client Secret

To keep the application secure (and to ensure other parties can't use this directory for their applications), generate a client secret and save it for later.

Part 4 - Update the Web App Authorization

Step 1. Obtain the OpenID Configuration URL

In order to have the correct URL configured in the Web App Authorization section, we need the OpenID Configuration URL for the Sign-In/Sign-Up policy we will be using. This can be found in the B2C Resource under "User Flows(Policies)" by selecting the Sign up and Sign in policy you wish to use, and hitting the "Run user flow" button. Copy the URL from the top of the page as shown below (do NOT use the endpoint URL listed at the bottom of the page).

Step 2. Enable Authorization on App Service

Open the App Service you would like to protect using the AAD, and navigate to the Authentication/Authorization page. From there, enable App Service Authentication, choose Log in with Azure Active Directory on the drop-down box and choose Advanced configuration on the AAD Authentication Provider.

Step 3. Enter AAD Login Details

Now all the items copied from prior steps can be placed in their respective places, as shown in the following screenshot. You must choose Advanced configuration as, presumably, you will be authenticating against an AAD that is NOT the same AAD you logged into the Azure Portal.

Next Steps

Now that this B2C fence has been established, individuals must authenticate with the B2C directory before they can access your Azure App Service. This was a no-code approach, however the next steps would be to modify your App Service source code to make use of the authentication just completed. It could be as simple as leveraging the

System.Threading.Thread.CurrentPrincipal.Identity.Name

to access the currently logged in user, or if you would rather go further, use the B2C documentation and sample code to access more attributes surrounding the user.