Azure AD B2C easy auth across frontend and backend

by DotNetNerd 2. April 2019 17:02

Recently I had the need to setup easy auth using Azure B2C to authenticate users across a frontend Azure Web App and an Azure Functions backend. Allthough it sounds like a regular scenario, the documentation I found could have been better. I don’t have the time to write the complete docs, but this blogpost will outline the steps, so I can remember it for next time, and hopefully to enable you to do the same kind of setup. Let’s get cracking.

Applications

I will assume the Azure AD B2C has been provisioned, and if it is not, there is pleanty of documentation on that part. From there you first need to set up the frontend and backend as seperate applications in the AD.

In the Azure portal go to the Azure AD B2C and select applications. Here we have to setup the frontend and the backend respectively. Click add and enter a name for the application and choose “include web app / web API” for both applications.

 

image

For each application select it in the application list and setup the reply URL to point to the call back. The url should point to https.//<mysitesurl>/.auth/login/aad/callback.

For the frontend select the keys section and generate a key. Write it down, as you cannot retrieve it later and it is needed at a later step.

For the backend provide an App Id URI

image

Published scopes and API Access

Next the backend is setup to define access scopes. To do this select the backend application and go to published scopes.

Enter a name for a new scope and write down the full scope value, which you will need later.

 

image

To require access to the backend the frontend needs to set up API Access. To do this select the frontend application and go to API acces.

Click add and select the api you you just published. Check the scopes you wish to have access to.

 

User flows custom design

As an optional step, but something you will most likely need we will now set up a custom design.

Upload the custom design to blob storage using the portal by going to the storage account and selecting blobs. Create one if it does not already exist. Upload the static design files and note down the url’s for the login and reset pages.

From the Azure AD B2C overview choose user flows.

Create a Sign in v2 flow. Select the identity providers you need to support. Select the claims that you need. Most often it would be display name, email addresses and identity provider.

Under Page Layouts select “Use custom page content”.

clip_image007

Enter the url for the customized layout for the login.

image

Setup easy auth from the CLI

Now everything is setup and we are ready to turn on easy auth.

Setting up easy auth is as simple as a oneliner using the Azure CLI. It needs to be run for both the frontend and backend application.

az webapp auth update --name $appname --resource-group $ResourceName --enabled true --action LoginWithAzureActiveDirectory --aad-client-id $aadClientId --aad-allowed-token-audiences $url + "/.auth/login/aad/callback" --aad-client-secret $secret --aad-token-issuer-url $issuerurl

 

$aadClientId is the Azure AD ClientId that must be obtained from the AD

$url is the url for the app

$secret is the key generated in the AD B2C

$issuerurl is the url for the user flow in the AD (e.g. https://myad.b2clogin.com/myad.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_SignInFlow)

Last kind of strange step

Lastly we need to set additionalLoginParams for the frontend app. Strangely this is not well supported via the CLI or Portal, so we need to use resource explorer to get the job done (https://resources.azure.com). Pick your subscription and navigate to resourceGroups/<resourcegroup>/providers/Microsoft.Web/sites/<fontendapp>/config/authsettings

Add an additionalLoginParams value with the required scopes. These are likely to be openid, offline_access and the full scope value defined in the AD B2C for the backend (e.g. "scope=openid%20offline_access%20https%3A%2F%2Fmyad.onmicrosoft.com%2Fapi%2FmyApi.ReadWrite"). Notice this needs to be url encoded.

Now you are all set. To make an http request to the backend you need to add a bearer token. This is retrieved from the /.auth/me route on the frontend. Here you also see refresh tokens and the claims that you requested.

 

And done…

Who am I?

My name is Christian Holm Diget, and I work as an independent consultant, in Denmark, where I write code, give advice on architecture and help with training. On the side I get to do a bit of speaking and help with miscellaneous community events.

Some of my primary focus areas are code quality, programming languages and using new technologies to provide value.

Microsoft Certified Professional Developer

Microsoft Most Valuable Professional

Month List

halk tv