aspnetcore/blazor/security/webassembly/standalone-with-microsoft-accounts.md
This article explains how to create a standalone Blazor WebAssembly app that uses Microsoft Accounts with Microsoft Entra (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 Application (client) ID (for example, 00001111-aaaa-2222-bbbb-3333cccc4444).
In Authentication > Platform configurations > Single-page application:
https://localhost/authentication/login-callback is present.Create the app. Replace the placeholders in the following command with the information recorded earlier and execute the following command in a command shell:
dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" --tenant-id "common" -o {PROJECT NAME}
| Placeholder | Azure portal name | Example |
|---|---|---|
{PROJECT NAME} | — | BlazorSample |
{CLIENT ID} | Application (client) ID | 00001111-aaaa-2222-bbbb-3333cccc4444 |
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 all of 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/common",
"ClientId": "{CLIENT ID}",
"ValidateAuthority": true
}
}
Example:
{
"AzureAd": {
"Authority": "https://login.microsoftonline.com/common",
"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 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 sections of the Additional scenarios article:
:::moniker range=">= aspnetcore-5.0"
:::moniker-end
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
...