aspnetcore/blazor/security/webassembly/standalone-with-microsoft-entra-id.md
This article explains how to create a standalone Blazor WebAssembly app that uses Microsoft Entra ID (ME-ID) for authentication.
For additional security scenario coverage after reading this article, see xref:blazor/security/webassembly/additional-scenarios.
The subsections of the walkthrough explain how to:
Follow the guidance in Quickstart: Set up a tenant to create a tenant in ME-ID.
Register an ME-ID app:
https://localhost/authentication/login-callback. If you know the production redirect URI for the Azure default host (for example, azurewebsites.net) or the custom domain host (for example, contoso.com), you can also add the production redirect URI at the same time that you're providing the localhost redirect URI. Be sure to include the port number for non-:443 ports in any production redirect URIs that you add.[!NOTE] Supplying the port number for a
localhostME-ID redirect URI isn't required. For more information, see Redirect URI (reply URL) restrictions and limitations: Localhost exceptions (Entra documentation).
Record the following information:
00001111-aaaa-2222-bbbb-3333cccc4444)aaaabbbb-0000-cccc-1111-dddd2222eeee)In Authentication > Platform configurations > Single-page application:
https://localhost/authentication/login-callback is present.Create the app in an empty folder. Replace the placeholders in the following command with the information recorded earlier and execute the command in a command shell:
dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" -o {PROJECT NAME} --tenant-id "{TENANT ID}"
| Placeholder | Azure portal name | Example |
|---|---|---|
{PROJECT NAME} | — | BlazorSample |
{CLIENT ID} | Application (client) ID | 00001111-aaaa-2222-bbbb-3333cccc4444 |
{TENANT ID} | Directory (tenant) ID | aaaabbbb-0000-cccc-1111-dddd2222eeee |
The output location specified with the -o|--output option creates a project folder if it doesn't exist and becomes part of the project's name.
Use one of the following approaches to run the app:
dotnet watch (or dotnet run) command from the app's folder.This section describes the parts of an app generated from the Blazor WebAssembly project template and how the app is configured. There's no specific guidance to follow in this section for a basic working application if you created the app using the guidance in the Walkthrough section. The guidance in this section is helpful for updating an app to authenticate and authorize users. However, an alternative approach to updating an app is to create a new app from the guidance in the Walkthrough section and moving the app's components, classes, and resources to the new app.
When an app is created to use Work or School Accounts (SingleOrg), the app automatically receives a package reference for the Microsoft Authentication Library (Microsoft.Authentication.WebAssembly.Msal). The package provides a set of primitives that help the app authenticate users and obtain tokens to call protected APIs.
If adding authentication to an app, manually add the Microsoft.Authentication.WebAssembly.Msal package to the app.
The Microsoft.Authentication.WebAssembly.Msal package transitively adds the Microsoft.AspNetCore.Components.WebAssembly.Authentication package to the app.
Support for authenticating users is registered in the service container with the xref:Microsoft.Extensions.DependencyInjection.MsalWebAssemblyServiceCollectionExtensions.AddMsalAuthentication%2A extension method provided by the Microsoft.Authentication.WebAssembly.Msal package. This method sets up the services required for the app to interact with the Identity Provider (IP).
In the Program file:
builder.Services.AddMsalAuthentication(options =>
{
builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
});
The xref:Microsoft.Extensions.DependencyInjection.MsalWebAssemblyServiceCollectionExtensions.AddMsalAuthentication%2A method accepts a callback to configure the parameters required to authenticate an app. The values required for configuring the app can be obtained from the ME-ID configuration when you register the app.
wwwroot/appsettings.json configurationConfiguration is supplied by the wwwroot/appsettings.json file:
{
"AzureAd": {
"Authority": "https://login.microsoftonline.com/{TENANT ID}",
"ClientId": "{CLIENT ID}",
"ValidateAuthority": true
}
}
Example:
{
"AzureAd": {
"Authority": "https://login.microsoftonline.com/e86c78e2-...-918e0565a45e",
"ClientId": "00001111-aaaa-2222-bbbb-3333cccc4444",
"ValidateAuthority": true
}
}
The Blazor WebAssembly template doesn't automatically configure the app to request an access token for a secure API. To provision an access token as part of the sign-in flow, add the scope to the default access token scopes of the xref:Microsoft.Authentication.WebAssembly.Msal.Models.MsalProviderOptions:
builder.Services.AddMsalAuthentication(options =>
{
...
options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});
Specify additional scopes with AdditionalScopesToConsent:
options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");
[!NOTE] xref:Microsoft.Authentication.WebAssembly.Msal.Models.MsalProviderOptions.AdditionalScopesToConsent%2A isn't able to provision delegated user permissions for Microsoft Graph via the Microsoft Entra ID consent UI when a user first uses an app registered in Microsoft Azure. For more information, see xref:blazor/security/webassembly/graph-api?pivots=graph-sdk-5#defaultaccesstokenscopes-versus-additionalscopestoconsent.
For more information, see the following resources:
The xref:Microsoft.AspNetCore.Components.Authorization?displayProperty=fullName namespace is made available throughout the app via the _Imports.razor file:
...
@using Microsoft.AspNetCore.Components.Authorization
...