Proteger um aplicativo autônomo Blazor WebAssembly do ASP.NET Core com contas Microsoft

Este artigo explica como criar um aplicativo Blazor WebAssembly autônomo que usa a Contas da Microsoft com o Microsoft Entra (ME-ID) para autenticação.

Para obter cobertura adicional do cenário de segurança depois de ler este artigo, confira Cenários de segurança adicional do Blazor WebAssembly ASP.NET Core.

Passo a passo

As subseções do passo a passo explicam como:

• Criar um locatário no Azure
• Registrar um aplicativo no Azure
• Criar o aplicativo Blazor
• Executar o aplicativo

Criar um locatário no Azure

Siga as diretrizes no Início Rápido: Configurar um locatário para criar um locatário no ME-ID.

Registrar um aplicativo no Azure

Registre um aplicativo ME-ID:

1. Navegue até o Microsoft Entra ID no portal do Azure. Selecione Registros de aplicativo na barra lateral. Selecione o botão Novo registro.
2. Forneça um Nome ao aplicativo (por exemplo, Blazor Contas MS do AAD Autônomas).
3. Em Tipos de conta com suporte, selecione Contas em qualquer diretório organizacional (Qualquer diretório do Microsoft Entra ID – Multilocatário).
4. Defina a lista suspensa de URI de Redirecionamento como SPA (aplicativo de página única) e forneça o seguinte URI de redirecionamento: https://localhost/authentication/login-callback. Se você souber o URI de redirecionamento da produção do host padrão do Azure (por exemplo, azurewebsites.net) ou o host de domínio personalizado (por exemplo, contoso.com), também poderá adicionar o URI de redirecionamento de produção ao mesmo tempo em que fornece o URI de redirecionamento localhost. Certifique-se de incluir o número da porta para portas não :443 em URIs de redirecionamento da produção que você vá adicionar.
5. Se você estiver usando um domínio de editor não verificado, desmarque as caixas de seleção Permissões>Conceder autorização de administrador para permissões openid e offline_access. Se o domínio do editor for verificado, essa caixa de seleção não estará presente.
6. Selecione Registrar.

Registre o ID do aplicativo (cliente) (por exemplo, 00001111-aaaa-2222-bbbb-3333cccc4444).

Em Autenticação>Configurações da plataforma>Aplicativo de página única:

1. Confirme se o URI de redirecionamento de https://localhost/authentication/login-callback está presente.
2. Na seção Concessão implícita, verifique se as caixas de seleção Tokens de acesso e Tokens de ID não estão marcadas. A concessão implícita não é recomendada para aplicativos Blazor que usam MSAL v2.0 ou posterior. Para obter mais informações, confira Proteger o ASP.NET Core Blazor WebAssembly.
3. Os padrões restantes para o aplicativo são aceitáveis para essa experiência.
4. Selecione o botão Salvar se você fez alterações.

Criar o aplicativo Blazor

Criar o aplicativo. Substitua os espaços reservados no comando a seguir pelas informações registradas anteriormente e execute o seguinte comando em um shell de comando:

dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" --tenant-id "common" -o {PROJECT NAME}

A localização de saída especificada com a opção -o|--output criará uma pasta de projeto, se ela não existir, e se tornará parte do nome do projeto.

Adicione um par de MsalProviderOptions para openid e offline_access DefaultAccessTokenScopes:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add("openid");
    options.ProviderOptions.DefaultAccessTokenScopes.Add("offline_access");
});

Executar o aplicativo

Use uma das seguintes abordagens para executar o aplicativo:

• Visual Studio
  • Selecione o botão Executar.
  • Use Depurar>Iniciar Depuração no menu.
  • Pressione F5.
• Shell de comando da CLI do .NET: Execute o comando dotnet watch (ou dotnet run) na pasta do aplicativo.

Partes do aplicativo

Esta seção descreve as partes de um aplicativo geradas a partir do modelo de projeto do Blazor WebAssembly e como o aplicativo é configurado. Não há diretrizes específicas a serem seguidas nesta seção para um aplicativo de trabalho básico se você criou o aplicativo usando as diretrizes na seção Passo a passo. As diretrizes nesta seção são úteis para atualizar um aplicativo para autenticar e autorizar usuários. No entanto, uma abordagem alternativa para atualizar um aplicativo é criar um novo aplicativo a partir das diretrizes na seção Passo a passo e mover os componentes, classes e recursos do aplicativo para o novo aplicativo.

Pacote de autenticação

Quando um aplicativo é criado para usar contas corporativas ou de estudante (SingleOrg), o aplicativo recebe automaticamente uma referência de pacote para a Biblioteca de Autenticação da Microsoft (Microsoft.Authentication.WebAssembly.Msal). O pacote fornece um conjunto de primitivos que ajudam o aplicativo a autenticar usuários e obter tokens para chamar APIs protegidas.

Se for adicionar autenticação a um aplicativo, adicione manualmente o pacote Microsoft.Authentication.WebAssembly.Msal ao aplicativo.

O pacote Microsoft.Authentication.WebAssembly.Msal adiciona transitivamente o pacote Microsoft.AspNetCore.Components.WebAssembly.Authentication ao aplicativo.

Suporte ao serviço de autenticação

O suporte à autenticação de usuários é registrado no contêiner de serviço com o método de extensão AddMsalAuthentication fornecido pelo pacote Microsoft.Authentication.WebAssembly.Msal. Esse método configura todos os serviços necessários para que o aplicativo interaja com o IP (Identity Provider).

No arquivo Program:

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
});

O método AddMsalAuthentication aceita um retorno de chamada para configurar os parâmetros necessários para autenticar um aplicativo. Os valores necessários para configurar o aplicativo podem ser obtidos na configuração ME-ID quando você registra o aplicativo.

Configuração de wwwroot/appsettings.json

A configuração é fornecida pelo arquivo wwwroot/appsettings.json:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  }
}

Exemplo:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "00001111-aaaa-2222-bbbb-3333cccc4444",
    "ValidateAuthority": true
  }
}

Escopos do token de acesso

O modelo do Blazor WebAssembly não configura automaticamente o aplicativo para solicitar um token de acesso para uma API segura. Para provisionar um token de acesso como parte do fluxo de entrada, adicione o escopo aos escopos de token de acesso padrão do MsalProviderOptions:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

Especifique escopos adicionais com AdditionalScopesToConsent:

options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");

Para obter mais informações, consulte as seções a seguir do artigo Cenários adicionais:

• Solicitar tokens de acesso adicionais
• Anexar tokens a solicitações de saída
• Início Rápido: configurar um aplicativo para expor as APIs

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.LoginMode = "redirect";
});

Importa o arquivo

O namespace Microsoft.AspNetCore.Components.Authorization é disponibilizado em todo o aplicativo por meio do arquivo _Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using {APPLICATION ASSEMBLY}
@using {APPLICATION ASSEMBLY}.Shared

Página de índice

A página Índice (wwwroot/index.html) inclui um script que define o AuthenticationService em JavaScript. O AuthenticationService manipula os detalhes de baixo nível do protocolo OIDC. O aplicativo chama internamente métodos definidos no script para executar as operações de autenticação.

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>

Componente do aplicativo

O componente App (App.razor) é semelhante ao componente App encontrado nos aplicativos do Blazor Server:

Devido a alterações na estrutura em versões do ASP.NET Core, a marcação do Razor para o componente App (App.razor) não é mostrada nesta seção. Para inspecionar a marcação do componente para uma determinada versão, use uma das seguintes abordagens:

• Crie um aplicativo provisionado para autenticação do modelo de projeto padrão do Blazor WebAssembly para a versão do ASP.NET Core que você pretende usar. Inspecione o componente App (App.razor) no aplicativo gerado.

• Inspecione o componente App (App.razor) na fonte de referência. Selecione a versão do seletor de branch e pesquise o componente na pasta ProjectTemplates do repositório porque ele se moveu ao longo dos anos.

  Observação

  Os links de documentação para a fonte de referência do .NET geralmente carregam o branch padrão do repositório, que representa o desenvolvimento atual da próxima versão do .NET. Para selecionar uma marca para uma versão específica, use a lista suspensa para Alternar branches ou marcas. Para saber mais, confira Como selecionar uma marca de versão do código-fonte do ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Componente RedirectToLogin

O componente RedirectToLogin (RedirectToLogin.razor):

• Gerencia o redirecionamento de usuários não autorizados para a página de logon.
• A URL atual que o usuário está tentando acessar é mantida para que ele possa ser retornado a essa página se a autenticação for bem-sucedida usando:
  • Estado do histórico de navegação do ASP.NET Core no .NET 7 ou posterior.
  • Uma cadeia de consulta do ASP.NET Core no .NET 6 ou anterior.

Inspecione o componente RedirectToLogin na fonte de referência. O local do componente mudou com o tempo, portanto, portanto, use as ferramentas de pesquisa do GitHub para localizar o componente.

Componente LoginDisplay

O componente LoginDisplay (LoginDisplay.razor) é renderizado no componente MainLayout (MainLayout.razor) e gerencia os seguintes comportamentos:

• Para usuários autenticados:
  • Exibe o nome de usuário atual.
  • Oferece um link para a página de perfil do usuário na Identity do ASP.NET Core.
  • Oferece um botão para sair do aplicativo.
• Para usuários anônimos:
  • Oferece a opção de se registrar.
  • Oferece a opção de fazer logon.

Devido a alterações na estrutura em versões do ASP.NET Core, a marcação do Razor para o componente LoginDisplay não é mostrada nesta seção. Para inspecionar a marcação do componente para uma determinada versão, use uma das seguintes abordagens:

• Crie um aplicativo provisionado para autenticação do modelo de projeto padrão do Blazor WebAssembly para a versão do ASP.NET Core que você pretende usar. Inspecione o componente LoginDisplay no aplicativo gerado.

• Inspecione o componente LoginDisplay na fonte de referência. O local do componente mudou com o tempo, portanto, portanto, use as ferramentas de pesquisa do GitHub para localizar o componente. O conteúdo com modelo para Hosted igual a true é usado.

  Observação

  Os links de documentação para a fonte de referência do .NET geralmente carregam o branch padrão do repositório, que representa o desenvolvimento atual da próxima versão do .NET. Para selecionar uma marca para uma versão específica, use a lista suspensa para Alternar branches ou marcas. Para saber mais, confira Como selecionar uma marca de versão do código-fonte do ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Componente de autenticação

A página produzida pelo componente Authentication (Pages/Authentication.razor) define as rotas necessárias para lidar com diferentes estágios de autenticação.

O componente RemoteAuthenticatorView:

• É fornecido pelo pacote Microsoft.AspNetCore.Components.WebAssembly.Authentication.
• Gerencia a execução das ações apropriadas em cada estágio de autenticação.

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@Action" />

@code {
    [Parameter]
    public string? Action { get; set; }
}

Solucionar problemas

Logging

Para habilitar o registro em log de depuração ou rastreamento para autenticação Blazor WebAssembly, confira a seção Logs de autenticação do lado do cliente de Logs do Blazor no ASP.NET Core com o seletor de versão do artigo definido como ASP.NET Core 7.0 ou posterior.

Erros comuns

• Configuração incorreta do aplicativo ou provedor Identity (IP)

  Os erros mais comuns são causados pela configuração incorreta. A seguir, estão alguns exemplos:

  • Dependendo dos requisitos do cenário, uma Autoridade, Instância, ID do Locatário, Domínio do Locatário, ID do Cliente ou URI de Redirecionamento ausente ou incorreto impede um aplicativo autenticar clientes.
  • Escopos de solicitação incorretos impedem que os clientes acessem pontos de extremidade da API Web do servidor.
  • Permissões incorretas ou ausentes da API do servidor impedem os clientes de acessar pontos de extremidade da API Web do servidor.
  • Executar o aplicativo em uma porta diferente da configurada no URI de Redirecionamento do registro de aplicativo do IP. Observe que uma porta não é necessária para o Microsoft Entra ID e um aplicativo em execução em um endereço de teste de desenvolvimento localhost, mas a configuração da porta do aplicativo e a porta em que o aplicativo está sendo executado devem corresponder a endereços que não sejam localhost.

  As seções de configuração das diretrizes deste artigo mostram exemplos da configuração correta. Verifique cuidadosamente cada seção do artigo em busca de configurações incorretas de aplicativo e IP.

  Se a configuração aparecer correta:

  • Analisar logs de aplicativos.

  • Examine o tráfego de rede entre o aplicativo cliente e o aplicativo IP ou servidor com as ferramentas de desenvolvedor do navegador. Muitas vezes, uma mensagem de erro exata ou uma mensagem com uma pista do que está causando o problema é retornada ao cliente pelo aplicativo IP ou servidor depois de fazer uma solicitação. As diretrizes das ferramentas de desenvolvedor são encontradas nos seguintes artigos:

    • Google Chrome (Documentação do Google)
    • Microsoft Edge
    • Mozilla Firefox (Documentação do Mozilla)

  • Para versões de Blazor em que um JWT (Token Web JSON) é usado, decodifique o conteúdo do token usado para autenticar um cliente ou acessar uma API Web do servidor, dependendo de onde o problema estiver ocorrendo. Para obter mais informações, consulte Inspecionar o conteúdo de um JWT (Token Web JSON).

  A equipe de documentação responde a comentários de documentos e bugs em artigos (abra um problema na seção de comentários desta página), mas não consegue fornecer suporte ao produto. Vários fóruns de suporte público estão disponíveis para ajudar na solução de problemas de um aplicativo. Recomendamos o seguinte:

  • Stack Overflow (marca: blazor)
  • Equipe do Slack do ASP.NET Core
  • Blazor Gitter

  Os fóruns anteriores não são de propriedade ou controlados pela Microsoft.

  Para relatórios de bugs de estrutura reproduzível não confidenciais e não confidenciais, abra um problema com a unidade do produto do ASP.NET Core. Não abra um problema com a unidade do produto até que você investigue completamente a causa de um problema e não possa resolvê-lo por conta própria e com a ajuda da comunidade em um fórum de suporte público. A unidade do produto não é capaz de solucionar problemas de aplicativos individuais que estão não estão funcionando devido a uma simples configuração incorreta ou casos de uso envolvendo serviços de terceiros. Se um relatório for confidencial ou de natureza confidencial ou descrever uma potencial falha de segurança no produto que possa ser explorada por invasores cibernéticos, confira Relatar problemas e bugs de segurança (Repositório GitHub dotnet/aspnetcore).

• Cliente não autorizado para o ME-ID

  informação: falha na autorização do Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2]. Esses requisitos não foram atendidos: DenyAnonymousAuthorizationRequirement: requer um usuário autenticado.

  Erro de retorno de chamada de logon do ME-ID:

  • Erro: unauthorized_client
  • Descrição: AADB2C90058: The provided application is not configured to allow public clients.

  Para resolver o erro:

  1. No portal do Azure, acesse o manifesto do aplicativo.
  2. Defina o atributo allowPublicClient como null ou true.

Cookies e dados do site

Cookies e dados do site podem persistir nas atualizações do aplicativo e interferir em testes e solução de problemas. Desmarque o seguinte ao fazer alterações no código do aplicativo, alterações na conta de usuário com o provedor ou alterações na configuração do aplicativo do provedor:

• Cookies de login do usuário
• Cookies de aplicativos
• Dados do site armazenados e em cache

Uma abordagem para impedir que cookies e dados do site persistentes interfiram no teste e na solução de problemas é:

• Configurar um navegador
  • Use um navegador para testar se você consegue configurar a exclusão de todos os dados de cookies e sites sempre que o navegador é fechado.
  • Verifique se o navegador está fechado manualmente ou pelo IDE para qualquer alteração no aplicativo, usuário de teste ou configuração do provedor.
• Use um comando personalizado para abrir um navegador no modo InPrivate ou Incógnito no Visual Studio:
  • Abra a caixa de diálogo Procurar com no botão Executar do Visual Studio.
  • Selecione o botão Adicionar.
  • Forneça o caminho para o navegador no campo Programa. Os seguintes caminhos executáveis são locais de instalação típicos para Windows 10. Se o navegador estiver instalado em um local diferente ou você não estiver usando Windows 10, forneça o caminho para o executável do navegador.
    • Microsoft Edge: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
    • Google Chrome: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
    • Mozilla Firefox: C:\Program Files\Mozilla Firefox\firefox.exe
  • No campo Argumentos, forneça a opção de linha de comando que o navegador usa para abrir no modo InPrivate ou Incógnito. Alguns navegadores exigem a URL do aplicativo.
    • Microsoft Edge: use -inprivate.
    • Google Chrome: use --incognito --new-window {URL}, onde o espaço reservado {URL} é a URL a ser aberta (por exemplo, https://localhost:5001).
    • Mozilla Firefox: Use -private -url {URL}, onde o {URL} espaço reservado é a URL para abrir (por exemplo, https://localhost:5001).
  • Forneça um nome no campo Nome amigável. Por exemplo, Firefox Auth Testing.
  • Selecione o botão OK.
  • Para evitar a necessidade de selecionar o perfil do navegador para cada iteração de teste com um aplicativo, defina o perfil como o padrão com o botão Definir como Padrão.
  • Verifique se o navegador está fechado pelo IDE para qualquer alteração no aplicativo, usuário de teste ou configuração do provedor.

Atualizações de aplicativos

Um aplicativo em funcionamento pode falhar imediatamente depois de atualizar o SDK do .NET Core no computador de desenvolvimento ou alterar as versões do pacote dentro do aplicativo. Em alguns casos, pacotes incoerentes podem interromper um aplicativo ao executar atualizações principais. A maioria desses problemas pode ser corrigida seguindo estas instruções:

1. Limpe os caches do pacote NuGet do sistema local executando dotnet nuget locals all --clear de um shell de comando.
2. Exclua as pastas bin e obj do projeto.
3. Restaure e recompile o projeto.
4. Exclua todos os arquivos na pasta de implantação no servidor antes de reimplantar o aplicativo.

Inspecionar o usuário

O componente User a seguir pode ser usado diretamente em aplicativos ou servir como base para personalização adicional.

User.razor:

@page "/user"
@attribute [Authorize]
@using System.Text.Json
@using System.Security.Claims
@inject IAccessTokenProvider AuthorizationService

<h1>@AuthenticatedUser?.Identity?.Name</h1>

<h2>Claims</h2>

@foreach (var claim in AuthenticatedUser?.Claims ?? Array.Empty<Claim>())
{
    <p class="claim">@(claim.Type): @claim.Value</p>
}

<h2>Access token</h2>

<p id="access-token">@AccessToken?.Value</p>

<h2>Access token claims</h2>

@foreach (var claim in GetAccessTokenClaims())
{
    <p>@(claim.Key): @claim.Value.ToString()</p>
}

@if (AccessToken != null)
{
    <h2>Access token expires</h2>

    <p>Current time: <span id="current-time">@DateTimeOffset.Now</span></p>
    <p id="access-token-expires">@AccessToken.Expires</p>

    <h2>Access token granted scopes (as reported by the API)</h2>

    @foreach (var scope in AccessToken.GrantedScopes)
    {
        <p>Scope: @scope</p>
    }
}

@code {
    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationState { get; set; }

    public ClaimsPrincipal AuthenticatedUser { get; set; }
    public AccessToken AccessToken { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        var state = await AuthenticationState;
        var accessTokenResult = await AuthorizationService.RequestAccessToken();

        if (!accessTokenResult.TryGetToken(out var token))
        {
            throw new InvalidOperationException(
                "Failed to provision the access token.");
        }

        AccessToken = token;

        AuthenticatedUser = state.User;
    }

    protected IDictionary<string, object> GetAccessTokenClaims()
    {
        if (AccessToken == null)
        {
            return new Dictionary<string, object>();
        }

        // header.payload.signature
        var payload = AccessToken.Value.Split(".")[1];
        var base64Payload = payload.Replace('-', '+').Replace('_', '/')
            .PadRight(payload.Length + (4 - payload.Length % 4) % 4, '=');

        return JsonSerializer.Deserialize<IDictionary<string, object>>(
            Convert.FromBase64String(base64Payload));
    }
}

Inspecionar o conteúdo de um JWT (Token Web JSON)

Para decodificar um JWT (Token Web ON), use a ferramenta jwt.ms da Microsoft. Os valores na interface do usuário nunca saem do navegador.

Exemplo de JWT codificado (abreviado para exibição):

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q

Exemplo de JWT decodificado pela ferramenta para um aplicativo que se autentica no Azure AAD B2C:

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1610059429,
  "nbf": 1610055829,
  "ver": "1.0",
  "iss": "https://mysiteb2c.b2clogin.com/11112222-bbbb-3333-cccc-4444dddd5555/v2.0/",
  "sub": "aaaaaaaa-0000-1111-2222-bbbbbbbbbbbb",
  "aud": "00001111-aaaa-2222-bbbb-3333cccc4444",
  "nonce": "bbbb0000-cccc-1111-dddd-2222eeee3333",
  "iat": 1610055829,
  "auth_time": 1610055822,
  "idp": "idp.com",
  "tfp": "B2C_1_signupsignin"
}.[Signature]

Recursos adicionais

• Cenários de segurança adicionais do ASP.NET Core Blazor WebAssembly
• Criar uma versão personalizada da biblioteca JavaScript Authentication.MSAL
• Solicitações de API Web não autenticadas ou não autorizadas em um aplicativo com um cliente padrão seguro
• ASP.NET Core Blazor WebAssembly com funções e grupos do Microsoft Entra ID
• Início Rápido: registrar um aplicativo na plataforma de identity da Microsoft
• Início Rápido: configurar um aplicativo para expor as APIs