I have been determined to get an example of a Web App and Web Api working together with Azure AD B2C.
Much of the example is based on https://github.com/Azure-Samples/active-directory-b2c-dotnetcore-webapp. While this is an excellent example, I wanted and example with a separate Web App and Web Api.
The code can be found at https://github.com/mattruma/ADB2CWebAppWebApi.
I will highlight some of the steps to create this example, specifically the configuration settings.
Step 1 – Setup Azure AD B2C
First, you will need to create an Azure AD B2C tenant following these instructions. Note the directory name, it will be in the format of DIRECTORY_NAME.onmicrosoft.com.
Create two user flows (formerly called policies). You will need one for Sign Up/Sign In and another for Password Reset. Use the default settings for user attributes and claims, you can customize them later.
I named my user flows B2C_1_Default_SignUp_SignIn and B2C_1_Default_PasswordReset.
Step 2 – Create Web App
In the Azure AD B2C tenant, create an Application.
The Reply URL is a location to which Azure AD B2C will send an authentication response (a token in case of a successful authentication; an error otherwise).
For this example, use the URL for your Web App.
Create a Key from the WebApp Blade. We will use this key for configuring the Web App.
Step 3 – Create Web Api
In the Azure AD B2C tenant, create another Application.
Again, the Reply URL is the URL of the local Web Api. The Reply URL is not really used in this Application, but is required. Add your App ID, this is what enables scope publishing and application access.
Step 4 – Assign Web Api Access to Web App
We now have to give access to our Web Api to our Web App.
From the WebApp blade, click API access. Then click Add to add the Web Api.
The user_impersonation scope is added by default. This will come into play in our appsettings.json for the Web App.
Step 5 – Configure appsettings.json for Web App
Update the appsettings.json in the Web App.
Step 6 – Configure appsettings.json for Web Api
Update the appsettings.json in the Web Api.
That’s it! You should have a working example now.
When you run it, you will need to create a new user, use an email address that you have access to.
In the WebApp itself there are three pages that you can leverage to test the access.
- Claims – Displays a list of claims for the currently logged in user.
- Secure – Calls a route in the Web Api that requires authorization for the currently logged in user.
- Unsecure – Calls a route in the Web Api that DOES NOT require authorization for the currently logged in user.
One caveat I discovered, and am still working through. The token cache is leveraging session. So if your Web App restarts, it will lose the settings in the token cache to communicate with the Web Api, BUT it will still retain authentication to the Web App due to the cookie stored.
The code can be found at https://github.com/mattruma/ADB2CWebAppWebApi.
Hi Matt, thanks for the sample! A couple of comments..
Can you please explain the “OnTokenValidated” method in more detail? I couldn’t find the ValuesController.UserInformation() method mentioned in the comments.
Also, it seems many of the functions / classes implemented in the sample have actually been integrated into the ASP.Net Core framework. For example, the AccountController is now in-built, and the AzureAdB2COptions class is now also part of the framework. There are more, but currently it feels like there are so many changes going on regarding this AD B2C integration, that I can’t keep up.
I only wish we could get an official constantly-updated reference sample by Microsoft which would showcase the latest implementation in every version of .Net Core.
Thanks for the comment Daniel!
As far as the OnTokenValidated, I can probably take that out of there. This was a migration of a project that was originally using Auth0, and they had that in there.
I agree, I wish there was a more canonical example from Microsoft.
Great guide thanks!
Any idea of how I could use a WebApp with an Azure Function (using B2C)?
You are welcome Liam!
While I have not done this yet with an Azure Functions, I added it to my to do list, be a great learning exercise!
In the meantime, found some links that I can share with you – though you are probably already aware of them, but just in case someone else checks this article out:
Well done sir! After a week of trying to make sense of the actual product documentation, I’m finally up and running thanks to you!
Thanks for this, your sample code has the following comment in the startup.cs for the API:
” Have a look at the ValuesController.UserInformation() method to see how to retrieve it and use it to retrieve the user’s information from the /userinfo endpoint”.
But that method is missing from the controller. Do you have that available? I’d be keen to have a look at how you’ve implemented this.
Hi David!
Let me take a look … it might be just boiler plate code that I failed to remove.
Hi Matt
You mentioned “still retain authentication to the Web App due to the cookie stored”. I am having the exact opposite to this so when a user closes their browser and reopens the site, they are always forced to re-authenticate. How did you solve this? (I’ve tried SQL server token cache, memory cache, etc but nothing seems to work.) I am assuming it is a problem with my cookies. I have been through the SameSite stuff also, but still no joy. Do you have any definitive example?