In this article, let’s have look at how a .NET Core WPF application can be protected using Azure AD B2C and how can it call the APIs which are also protected using the Azure AD B2C.

Prerequisites

For following all steps in this article, we will need Azure Subscription. If you don’t have an Azure subscription, create a free account before you begin.

We will also need instance of Azure AD B2C instance. We will also need API and Angular App already registered in that instance.

Below is the list of those posts which explains all the steps to get there:

• Create Azure AD B2C instance
• Create user flows in Azure AD B2C
• Protect .NET Core API Using Azure AD B2C and MSAL
• Azure AD B2C and MSAL with .NET Core WPF App

You should have Azure AD B2C instance, let’s say samplead.b2clogin.com and user flows B2C_1_SignUpSignIn for signing up or signing in the application.

You also have the the WPF application protected using Azure AD B2C and a separate web API application, which is also protected using Azure AD B2C.

Next, let’s try to make some modifications so that the WPF app can call the protected APIs.

Let’s discuss scopes !

You know that when WPF authenticates the users, it gets an ID Token and an Access Token in the result. The access token should be used to access the protected resources.

The access token can be used to access only those resources, whose scopes were specified while acquiring the tokens, i.e. at the time of logging.

So, you might have understood already that we need to specify additional scopes while sending the sign in request.

But before sending that additional scope, the scope must be added in the app registration corresponding to our WPF app. This step will enable the application to acquire the token which can be used to access the API.

API Permissions for App

So for this, let’s login to Azure Portal, switch to the Azure AD B2C tenant where both these applications are registered. Then search for Azure AD B2C in search box provided on top navigation menu.

Then go to App registrations and open the app registration corresponding to the WPF application and select API Permissions from the left navigation. Next, click on Add a permission button.

It should open a new panel on right side. Then select My APIs tab and select Web API that WPF app should call.

Immediately on next screen, select Delegated Permissions and then select the scope and click on Add permissions button.

Once this all is done, click on Grant admin consent for samplead button to allow users to use this scope while acquiring the tokens.

Sign in with Additional Scope

In app.xaml.cs, we have specified all the configurations in the form of static variables. So, in those configurations let’s modify three things:

• Add API Endpoint which WPF App should use
• Add a new static variable holding the API scope
• In login scopes, add the API scope too

The complete file should be as shown in below snippet.

Call API

As API is protected resource, the WPF app will need access token to access it. This access token can be acquired by calling AcquireTokenSilent API. If this API fails for some reason, then this method calls another API – AcquireTokenInteractive – to get the token.

Once the token is available, it is passed in the authorization header to access the API.

Below are the two methods from MainWindow.xaml.cs, which perform the above operations.

Run and Verify

When you run the application (both API and WPF App), the user can click on Call API or Sign In Buttons. Both will redirect user to Sign In page if user is not signed in yet.

This is because we have handled the MsalUiRequiredException while calling AcquireTokenSilent API. When this exception occurs, the WPF App calls AcquireTokenInteractive API and allowing users to sign in instead of breaking the application.

Once the user is signed in, the user can click on the Call API button (if not done already) which will call API and print the result in the upper text box.

I hope you enjoyed the post. Let me know your thoughts.