Azure Active Directory B2C (Azure AD B2C) is a cloud identity and access management service that allows you to easily customize and control the authentication and authorization of users in your applications. In this guide, we will walk you through the steps to integrate Azure AD B2C with a Blazor Web App.
Prerequisites
- An active Azure subscription
- An Azure AD B2C tenant
- A Blazor Web App
Create an Azure AD B2C tenant
If you don't already have an Azure AD B2C tenant, you can create one by following these steps:
- Sign in to the Azure portal.
- Click on the Create a resource button in the top left corner of the dashboard.
- Search for Azure AD B2C and click on the result.
- Click on the Create button.
- Fill in the required fields, such as the name, organization name, and initial domain name.
- Select your subscription and resource group.
- Click on the Create button to create the tenant.
Create an application in Azure AD B2C
Once you have created an Azure AD B2C tenant, you will need to create an application in the tenant to represent your Blazor Web App. To do this, follow these steps:
- Sign in to the Azure portal.
- Click on the Directory + subscription filter in the top menu and select the Azure AD B2C tenant that you created earlier.
- Click on the Azure AD B2C service.
- Click on the Applications blade.
- Click on the New application button.
- Fill in the required fields, such as the name, and select the application type.
- Click on the Create button to create the application.
Configure Azure AD B2C policies
After you have created an application in Azure AD B2C, you will need to configure the authentication and authorization policies for the application. These policies define the user flow for signing up, signing in, and managing user accounts. To configure the policies, follow these steps:
- Sign in to the Azure portal.
- Click on the Directory + subscription filter in the top menu and select the Azure AD B2C tenant that you created earlier.
- Click on the Azure AD B2C service.
- Click on the Identity experience framework blade.
- Click on the User flows blade.
- Click on the New user flow button.
- Select the policy type, such as sign up or sign in.
- Configure the policy settings, such as the user attributes and claims.
- Click on the Create button to create the policy.
Integrate Azure AD B2C with Blazor Web App
Now that you have created an Azure AD B2C tenant, an application in the tenant, and configured the authentication and authorization policies, you can integrate Azure AD B2C with your Blazor Web App. To do this, follow these steps:
- Open your Blazor Web App in Visual Studio.
- Install the
Microsoft.AspNetCore.Authentication.OpenIdConnectpackage from NuGet. - Open the Startup.cs file and add the following code to the ConfigureServices method:
services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
.AddOpenIdConnect(options =>
{
options.SignInScheme = "Cookies";
options.Authority = $"https://{Configuration["AzureAdB2C:Tenant"]}.b2clogin.com/{Configuration["AzureAdB2C:Tenant"]}.onmicrosoft.com/{Configuration["AzureAdB2C:Policy"]}";
options.ClientId = Configuration["AzureAdB2C:ClientId"];
options.ResponseType = "code";
options.SaveTokens = true;
options.GetClaimsFromUserInfoEndpoint = true;
options.Scope.Add("openid");
options.Scope.Add("profile");
options.Scope.Add("email");
options.TokenValidationParameters = new TokenValidationParameters
{
NameClaimType = "name",
RoleClaimType = "roles"
};
});
- Add the following code to the Configure method:
app.UseAuthentication();
app.UseAuthorization();
- Open the appsettings.json file and add the following configuration:
"AzureAdB2C": {
"Tenant": "your-tenant-name",
"ClientId": "your-client-id",
"Policy": "your-policy-name"
}
- Replace the placeholders with the appropriate values for your Azure AD B2C tenant, application, and policy.
Test the integration
To test the integration, run your Blazor Web App and try to sign in with an Azure AD B2C account. If everything is set up correctly, you should be able to sign in and see the user's information displayed on the page.
In this guide, we have shown you how to integrate Azure AD B2C with a Blazor Web App. By following these steps, you can easily add authentication and authorization to your Blazor Web App and provide a secure and seamless user experience for your customers.
References
| Title | Description | Link |
|---|---|---|
| Azure Active Directory B2C | Overview of Azure AD B2C | https://docs.microsoft.com/en-us/azure/active-directory-b2c/overview |
| Create an Azure AD B2C tenant | Steps to create an Azure AD B2C tenant | https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant |
| Create an application in Azure AD B2C | Steps to create an application in Azure AD B2C | https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-register-applications |
| Configure Azure AD B2C policies | Steps to configure Azure AD B2C policies | https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-user-flows |
| Integrate Azure AD B2C with Blazor Web App | Steps to integrate Azure AD B2C with Blazor Web App | https://docs.microsoft.com/en-us/azure/active-directory-b2c/identity-provider-azure-ad-b2c-custom |