Azure AD B2C can be used for consumer applications where any user can signup for the application and use the functionality. These users can also view their profile, update it and can also use forgot password functionality to reset their own password. Azure AD B2C enables such application behaviors through user flows.
If you are working on a consumer application and you want to run the APIs under the logged-in user’s context, then you will have to register your APIs in Azure AD B2C. In this article, let’s see how to register Web APIs.
What we need ?
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.
After creating Azure AD B2C, make sure you create the user flows as described in this post.
Create Web API Project
Create a ASP .NET Core Web API project using Visual Studio 2019. As shown in below snapshot, make sure that .NET Core and ASP .NET Core 3.1 is selected in the dialog and API type of project is selected.
Now, we can run the application using Visual Studio to check the URL of the web API and ensure that the GET call returns you the result with 200 OK status as shown in below snapshot.
Now, we have a working Web API.
Azure AD App Registration
Login to Azure Portal and switch the directory and select the Azure AD B2C directory. Then search for “Azure AD B2C” in the search box provided in the top navigation. Select it from the search result. A panel as shown in below snapshot should be shown. Select App registrations.
Next click on New registrations, a new screen will open as shown below. Enter below details:
- Name, a readable name for the app registration, e.g. My Web API
- Supported account types, let it be the default selected value. It means you are using Azure AD B2C for authenticating users and cannot access Azure resources e.g. Portal.
- Redirect URI, this is the URL of the Web API.
- Permissions, keep the default.
Then click on Register button.
A unique Application ID is generated once the app registration is complete. Make sure you note down the Application ID. It would be required in the API configurations.
Azure AD Expose an API
In this step, we are going to create a scope. For acquiring the access token required to access this API, this scope needs to be used.
Next, from App registrations, select
My Web API, registration and click on it. It should open a panel as shown below.
Then click on Expose an API and then click on Add a scope. It will open a panel on right side. This panel shows the default Application ID URI. This default URI ends with GUID. Change the GUID and enter text
sample-api as shown below and click on Save and continue.
Next, below screen will be shown where we need to specify the scope name (
api-scope). We also need to specify the consent name and consent description text. This name and description will be shown to admin users when they grant permission for this scope on any other app registration.
Click on Add scope button and scope will be saved.
Now, let’s move to Visual Studio and open the Web API project which was created in first step.
We are going to use MSAL (Microsoft Authentication Library) for protecting Web API. For this purpose, a NuGet package reference needs to be added to the web API project:
This package internally using MSAL.NET library. It has authentication middlewares which can be used with .NET Core APIs and Web applications.
Next thing, we have got to specify the Azure AD B2C identifier (tenant Id), the Application ID and user flows in the API configurations. Below is the sample configuration section specifying everything.
Make sure that you use
b2clogin.com in the instance URL. The older instances might use
login.microsoftonline.com, but is going to be retired soon.
We need to enable the authentication middleware in Startup.CS file. There are two steps
- AddProtectedApi, which will read the configurations from config section and registers JWT authentication scheme with Azure AD B2C.
- UseAuthentication, which will make sure that only authenticated users can get access to the API
Also optionally, as this is an API project, this API may be getting called via different web application (e.g. Angular app or .NET Core MVC Web App). The default configuration will not allow cross domain calls.
Hence the CORS policy needs to be added which will allow calls from the application domain. In below snippet, I have added CORS to allow calls from http://localhost:4200 which is used by Angular application.
The completed startup file would be as below:
Let’s not forget to add
AuthorizeAttribute on the API controller. This attribute will mark the API as protected and allow access to API only if the user has appropriate access token.
Run and Verify
Now, if we run the API project, we will not be able to see the returned result. If we open the chrome debugging tools, we can see that the API GET call is returning 401 Unauthorized.
We will need access token which is allowed to access the scope we created in this article. How to get this access token ? Probably, we will have a look at it in the next article.
I hope you enjoyed this article. Let me know your thoughts.