Protección de una aplicación independiente Blazor WebAssembly de ASP.NET Core con Azure Active Directory B2C

En este artículo se trata cómo crear una aplicación Blazor WebAssembly independiente que usa Azure Active Directory (AAD) B2C para la autenticación.

Para obtener cobertura de escenarios de seguridad adicionales después de leer este artículo, consulte los escenarios de seguridad adicionales de ASP.NET Core Blazor WebAssembly.

Tutorial

En las subsecciones del tutorial se explica cómo:

• Crear un inquilino en Azure
• Registrar una aplicación en Azure
• Crear la aplicación Blazor
• Ejecutar la aplicación

Crear un inquilino en Azure

Siga las instrucciones que encontrará en Tutorial: Creación de un inquilino de Azure Active Directory B2C para crear un inquilino de AAD B2C.

Antes de continuar con las instrucciones de este artículo, confirme que ha seleccionado el directorio correcto para el inquilino de AAD B2C.

Registrar una aplicación en Azure

Registre una aplicación AAD B2C:

1. Vaya a Azure AD B2C en Azure Portal. Seleccione Registros de aplicaciones en la barra lateral. Seleccione el botón Nuevo registro.
2. Indique un Nombre para la aplicación (por ejemplo, Blazor Standalone AAD B2C).
3. En Tipos de cuenta compatibles, seleccione la opción multiinquilino: Cuentas de cualquier directorio de la organización o proveedor de identidades. Elija esta opción para realizar la autenticación con Azure AD B2C.
4. Establezca la lista desplegable URI de redireccionamiento en Aplicación de página única (SPA) y proporcione el siguiente URI de redireccionamiento: https://localhost/authentication/login-callback. Si conoce el URI de redirección de producción para el host predeterminado de Azure (por ejemplo, azurewebsites.net) o el host de dominio personalizado (por ejemplo, contoso.com), también puede agregar el URI de redirección de producción al mismo tiempo que proporciona el URI de localhost redireccionamiento. Asegúrese de incluir el número de puerto para los puertos que no sean puertos:443 en los URI de redirección de producción que agregue.
5. Si usa un dominio del publicador no comprobado, asegúrese de que la opción Permisos>Conceda consentimiento del administrador a los permisos openid y offline_access está seleccionada. Si el dominio del publicador está comprobado, esta casilla no se muestra.
6. Seleccione Registrar.

Nota

No es necesario proporcionar el número de puerto de un localhost URI de redirección de AAD B2C. Para más información, consulte Restricciones y limitaciones del URI de redirección (URL de respuesta): excepciones de Localhost (documentación de Entra).

Registre la siguiente información:

• Id. de aplicación (cliente) (por ejemplo, 41451fa7-82d9-4673-8fa5-69eff5a761fd).
• Instancia de AAD B2C (por ejemplo, https://contoso.b2clogin.com/, barra diagonal final incluida): La instancia es el esquema y el host de un registro de la aplicación de Azure B2C, que se puede encontrar abriendo la ventana Puntos de conexión de la página Registros de aplicaciones de Azure Portal.
• Dominio de AAD B2C Principal/Publicador/Inquilino (por ejemplo, contoso.onmicrosoft.com): El dominio está disponible como Dominio del publicador en la hoja Personalización de marca de Azure Portal de la aplicación registrada.

En Autenticación>Configuraciones de plataforma>Aplicación de página única:

1. Confirme que el URI de redirección de https://localhost/authentication/login-callback está presente.
2. En la sección Concesión implícita, asegúrese de que las casillas Tokens de acceso y Tokens de id. no están seleccionadas. La concesión implícita no se recomienda para las aplicaciones Blazor que usan MSAL v2.0 o posterior. Para más información, vea Protección de Blazor WebAssembly en ASP.NET Core.
3. Los valores predeterminados restantes de la aplicación son aceptables en esta experiencia.
4. Seleccione el botón Guardar si realizó cambios.

En Home>Azure AD B2C>Flujos de usuario:

Creación de un flujo de usuario de registro e inicio de sesión

Como mínimo, seleccione el atributo de usuario Notificaciones de la aplicación>Nombre para mostrar para rellenar context.User.Identity?.Name/context.User.Identity.Name en el componente LoginDisplay (Shared/LoginDisplay.razor).

Registre el nombre de flujo de usuario de inicio de sesión y de registro creado para la aplicación (por ejemplo, B2C_1_signupsignin).

Crear la aplicación Blazor

Reemplace los marcadores de posición del siguiente comando por la información registrada anteriormente y ejecute el comando en un shell de comandos:

dotnet new blazorwasm -au IndividualB2C --aad-b2c-instance "{AAD B2C INSTANCE}" --client-id "{CLIENT ID}" --domain "{TENANT DOMAIN}" -o {PROJECT NAME} -ssp "{SIGN UP OR SIGN IN POLICY}"

Marcador de posición	Nombre de Azure Portal	Ejemplo
{AAD B2C INSTANCE}	Instancia	https://contoso.b2clogin.com/ (incluye la barra diagonal final)
{PROJECT NAME}	—	BlazorSample
{CLIENT ID}	Id. de aplicación (cliente)	41451fa7-82d9-4673-8fa5-69eff5a761fd
{SIGN UP OR SIGN IN POLICY}	Flujo de usuario de registro o de inicio de sesión	B2C_1_signupsignin1
{TENANT DOMAIN}	Dominio Principal/Publicador/Inquilino	contoso.onmicrosoft.com

La ubicación de salida especificada con la opción -o|--output crea una carpeta de proyecto si no existe y se convierte en parte del nombre del proyecto.

Agregue un par de MsalProviderOptions para openid y offline_accessDefaultAccessTokenScopes:

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

Después de crear la aplicación, debe poder hacer lo siguiente:

• Inicie sesión en la aplicación con una cuenta de usuario de Id. de Microsoft Entra.
• Solicitar tokens de acceso para API de Microsoft Para obtener más información, consulte:
  • Ámbitos de token de acceso
  • Inicio rápido: Configuración de una aplicación para exponer las API web.

Ejecutar la aplicación

Use uno de los enfoques siguientes para ejecutar la aplicación:

• Programa para la mejora
  • Haga clic en el botón Ejecutar.
  • En el menú, seleccione Depurar>Iniciar depuración.
  • Presione F5.
• Shell de comandos de la CLI de .NET: ejecute el comando dotnet run desde la carpeta de la aplicación.

Partes de la aplicación

En esta sección se describen las partes de una aplicación generada a partir de la plantilla de proyecto Blazor WebAssembly y cómo se configura la aplicación. No hay ninguna guía específica que se debe seguir en esta sección para una aplicación operativa básica si creó la aplicación con las instrucciones de la sección Tutorial. Las instrucciones de esta sección son útiles para actualizar una aplicación a fin de autenticar y autorizar a los usuarios. Pero un enfoque alternativo para actualizar una aplicación consiste en crear una aplicación a partir de las instrucciones de la sección Tutorial y mover los componentes, clases y recursos de la aplicación a la nueva aplicación.

Paquete de autenticación

Cuando una aplicación se crea para usar una cuenta de B2C individual (IndividualB2C), la aplicación recibe automáticamente una referencia de paquete de la Biblioteca de autenticación de Microsoft (Microsoft.Authentication.WebAssembly.Msal). El paquete proporciona un conjunto de primitivas que ayudan a la aplicación a autenticar usuarios y a obtener tokens para llamar a API protegidas.

Si agrega autenticación a una aplicación, agregue el paquete Microsoft.Authentication.WebAssembly.Msal manualmente a la aplicación:

Nota

Para obtener instrucciones sobre cómo agregar paquetes a aplicaciones .NET, consulte los artículos de Instalación y administración de paquetes en Flujo de trabajo de consumo de paquetes (NuGet documentación). Confirme las versiones correctas del paquete en NuGet.org.

El paquete Microsoft.Authentication.WebAssembly.Msal agrega el paquete Microsoft.AspNetCore.Components.WebAssembly.Authentication a la aplicación de forma transitiva.

Compatibilidad con el servicio de autenticación

La compatibilidad para autenticar usuarios se registra en el contenedor de servicios con el método de extensión AddMsalAuthentication proporcionado por el paquete Microsoft.Authentication.WebAssembly.Msal. Este método configura todos los servicios necesarios para que la aplicación interactúe con el proveedor de Identity.

En el archivo Program:

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

El método AddMsalAuthentication acepta una devolución de llamada para configurar los parámetros necesarios para autenticar una aplicación. Los valores necesarios para configurar la aplicación se pueden obtener de la configuración de AAD al registrar la aplicación.

La configuración se suministra a través del archivo wwwroot/appsettings.json:

{
  "AzureAdB2C": {
    "Authority": "{AAD B2C INSTANCE}{TENANT DOMAIN}/{SIGN UP OR SIGN IN POLICY}",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": false
  }
}

En la configuración anterior, {AAD B2C INSTANCE} incluye una barra diagonal final.

Ejemplo:

{
  "AzureAdB2C": {
    "Authority": "https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_signupsignin1",
    "ClientId": "41451fa7-82d9-4673-8fa5-69eff5a761fd",
    "ValidateAuthority": false
  }
}

Ámbitos de token de acceso

La plantilla de Blazor WebAssembly no configura la aplicación automáticamente para solicitar un token de acceso relativo a una API segura. Para aprovisionar un token de acceso como parte del flujo de inicio de sesión, agregue el ámbito a los ámbitos de token de acceso predeterminados de MsalProviderOptions:

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

Especifique ámbitos adicionales con AdditionalScopesToConsent:

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

Nota:

AdditionalScopesToConsent no puede aprovisionar permisos de usuario delegado para Microsoft Graph a través de la interfaz de usuario de consentimiento de Microsoft Entra ID cuando un usuario utiliza por primera vez una aplicación registrada en Microsoft Azure. Para obtener más información, consulte Uso de Graph API con ASP.NET Core Blazor WebAssembly.

Para más información, vea las siguientes secciones del artículo Otros escenarios:

• Solicitar tokens de acceso adicionales
• Adjuntar tokens a solicitudes salientes

Modo de inicio de sesión

El marco tiene como valor predeterminado el modo de inicio de sesión emergente y vuelve al modo de inicio de sesión de redireccionamiento si no se puede abrir un elemento emergente. Configure MSAL para usar el modo de inicio de sesión de redireccionamiento mediante el establecimiento de la propiedad LoginMode de MsalProviderOptions en redirect:

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

La configuración predeterminada es popup y el valor de cadena no distingue entre mayúsculas y minúsculas.

Archivo Imports

El espacio de nombres Microsoft.AspNetCore.Components.Authorization está disponible en toda la aplicación a través del archivo _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

La página de índice (wwwroot/index.html) incluye un script que define AuthenticationService en JavaScript. AuthenticationService controla los detalles de bajo nivel del protocolo OIDC. La aplicación llama internamente a métodos definidos en el script para realizar las operaciones de autenticación.

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

Componente App

El componente App (App.razor) es similar al componente App que se encuentra en las aplicaciones Blazor Server:

• El componente AuthorizeRouteView se asegura de que el usuario actual está autorizado para tener acceso a una página determinada o, de lo contrario, representa el componente RedirectToLogin.
• El componente RedirectToLogin administra el redireccionamiento de usuarios no autorizados a la página de inicio de sesión.

Debido a los cambios del marco en las versiones de ASP.NET Core, el marcado de Razor del componente App (App.razor) no se muestra en esta sección. Para inspeccionar el marcado del componente para una versión determinada, use cualquiera de los enfoques siguientes:

• Cree una aplicación aprovisionada para la autenticación a partir de la plantilla de proyecto Blazor WebAssembly predeterminada para la versión de ASP.NET Core que va a usar. Inspeccione el componente App (App.razor) en la aplicación generada.

• Inspeccione el componente App (App.razor) en el origen de referencia. Seleccione la versión del selector de rama y busque el componente en la carpeta ProjectTemplates del repositorio porque se ha movido a lo largo de los años.

  Nota:

  Los vínculos de la documentación al origen de referencia de .NET cargan normalmente la rama predeterminada del repositorio, que representa el desarrollo actual para la próxima versión de .NET. Para seleccionar una etiqueta de una versión específica, use la lista desplegable Cambiar ramas o etiquetas. Para obtener más información, vea Procedimientos para seleccionar una etiqueta de versión de código fuente de ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Componente RedirectToLogin

El componente RedirectToLogin (RedirectToLogin.razor):

• Administra el redireccionamiento de usuarios no autorizados a la página de inicio de sesión.
• La dirección URL actual a la que el usuario intenta tener acceso se conserva para que pueda volver a esa página si la autenticación se realiza correctamente con:
  • Estado del historial de navegación en ASP.NET Core en .NET 7 o posterior.
  • Cadena de consulta en ASP.NET Core en .NET 6 o una versión anterior.

Inspeccione el componente RedirectToLogin en el origen de referencia. La ubicación del componente ha cambiado con el tiempo, use las herramientas de búsqueda de GitHub para localizar el componente.

Nota:

Los vínculos de la documentación al origen de referencia de .NET cargan normalmente la rama predeterminada del repositorio, que representa el desarrollo actual para la próxima versión de .NET. Para seleccionar una etiqueta de una versión específica, use la lista desplegable Cambiar ramas o etiquetas. Para obtener más información, vea Procedimientos para seleccionar una etiqueta de versión de código fuente de ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Componente LoginDisplay

El componente LoginDisplay (LoginDisplay.razor) se representa en el componente MainLayout (MainLayout.razor) y administra los siguientes comportamientos:

• En el caso de los usuarios autenticados:
  • Muestra el nombre de usuario actual.
  • Proporciona un vínculo a la página de perfil de usuario en Identity de ASP.NET Core.
  • Proporciona un botón para cerrar la sesión de la aplicación.
• En el caso de los usuarios anónimos:
  • Ofrece la opción de registrarse.
  • Ofrece la opción de iniciar sesión.

Debido a los cambios de marco en las versiones de ASP.NET Core, el marcado Razor del componente LoginDisplay no se muestra en esta sección. Para inspeccionar el marcado del componente para una versión determinada, use cualquiera de los enfoques siguientes:

• Cree una aplicación aprovisionada para la autenticación a partir de la plantilla de proyecto Blazor WebAssembly predeterminada para la versión de ASP.NET Core que va a usar. Inspeccione el componente LoginDisplay en la aplicación generada.

• Inspeccione el componente LoginDisplay en el origen de referencia. La ubicación del componente ha cambiado con el tiempo, use las herramientas de búsqueda de GitHub para localizar el componente. Se usa el contenido con plantilla para Hosted igual a true.

  Nota

  Los vínculos de la documentación al origen de referencia de .NET cargan normalmente la rama predeterminada del repositorio, que representa el desarrollo actual para la próxima versión de .NET. Para seleccionar una etiqueta de una versión específica, use la lista desplegable Cambiar ramas o etiquetas. Para obtener más información, vea Procedimientos para seleccionar una etiqueta de versión de código fuente de ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Componente Authentication

La página generada por el componente Authentication (Pages/Authentication.razor) define las rutas necesarias para controlar diferentes fases de autenticación.

El componente RemoteAuthenticatorView:

• Se proporciona mediante el paquete Microsoft.AspNetCore.Components.WebAssembly.Authentication.
• Administra la realización de las acciones adecuadas en cada fase de autenticación.

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

<RemoteAuthenticatorView Action="Action" />

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

Nota:

Los tipos de referencia que admiten un valor NULL (NRT) y el análisis estático de estado NULL del compilador de .NET se admiten en ASP.NET Core en .NET 6 o posterior. Antes de la versión de ASP.NET Core en .NET 6, el tipo string aparece sin la designación de tipo NULL (?).

Directivas personalizadas

La biblioteca de autenticación de Microsoft (Microsoft.Authentication.WebAssembly.Msal, paquete NuGet) no admite los flujos de usuario de AAD B2C de forma predeterminada.

Solución de problemas

Registro

Para habilitar el registro de depuración o rastreo para la autenticación de Blazor WebAssembly, consulte la sección Registro de autenticación del lado del cliente del Registro de Blazor de ASP.NET Core con el selector de versión del artículo establecido en ASP.NET Core 7.0 o posterior.

Errores comunes

• Error de configuración de la aplicación o del proveedor de Identity (IP)

  Los errores más comunes se deben a una configuración incorrecta. Estos son algunos ejemplos:

  • En función de los requisitos del escenario, la disponibilidad o no de una autoridad, una instancia, un identificador o dominio de inquilino, un identificador de cliente o un URI de redireccionamiento, o bien que estos no elementos no sean correctos, impide a una aplicación autenticar clientes.
  • Los ámbitos de solicitud incorrectos impiden a los clientes acceder a los puntos de conexión de la API web del servidor.
  • Faltan permisos de la API de servidor o estos son incorrectos, lo cual impide a los clientes acceder a los puntos de conexión de API web.
  • Ejecutar la aplicación en un puerto diferente al configurado en el URI de redirección del registro de aplicación de la IP. Tenga en cuenta que no se requiere ningún puerto para Microsoft Entra ID y una aplicación que se ejecute en una dirección de pruebas de desarrollo localhost, pero la configuración del puerto de la aplicación y el puerto en el que se ejecuta la aplicación deben coincidir para las direcciones que no sean localhost.

  En las secciones de configuración de la guía de este artículo se muestran ejemplos de la configuración correcta. Compruebe detenidamente cada sección del artículo en busca de la configuración de la aplicación y la de IP.

  Si la configuración parece correcta:

  • Analice los registros de la aplicación.

  • Examine el tráfico de red entre la aplicación cliente y la de servidor, o la dirección IP con las herramientas de desarrollo del explorador. A menudo, la aplicación de servidor o la dirección IP devuelve al cliente un mensaje de error exacto o un mensaje con una pista sobre la causa del problema. En los siguientes artículos encontrará instrucciones sobre las herramientas de desarrollo:

    • Google Chrome (documentación de Google)
    • Microsoft Edge
    • Mozilla Firefox (documentación de Mozilla)

  • Para las versiones de Blazor en las que se utiliza un token web de JSON (JWT), descodifique el contenido del token utilizado para autenticar a un cliente o acceder a una API web del servidor, dependiendo de dónde se esté produciendo el problema. Para obtener más información, consulte Inspección del contenido de un JSON Web Token (JWT).

  El equipo de documentación responde a los comentarios y los errores en los artículos (abra una incidencia en la sección de comentarios de esta página), pero no puede proporcionar soporte técnico para el producto. Existen varios foros de soporte técnico públicos que ayudan a solucionar los problemas de una aplicación. Se recomienda lo siguiente:

  • Stack Overflow (etiqueta: blazor)
  • Equipo de Slack de ASP.NET Core
  • Blazor Gitter

  Microsoft no posee ni controla ninguno de los foros anteriores.

  Respecto a los informes de errores del marco que no son de seguridad ni confidenciales, o que no se pueden reproducir, abra una incidencia con la unidad de producto ASP.NET Core. No abra una incidencia con la unidad de producto hasta que haya investigado exhaustivamente su causa y no pueda resolverlo por su cuenta o con la ayuda de la comunidad en un foro de soporte técnico público. La unidad de producto no puede solucionar problemas de aplicaciones individuales cuyo funcionamiento se haya interrumpido debido a errores de configuración o casos de uso sencillos que involucren servicios de terceros. Si un informe es confidencial o delicado por naturaleza o describe un posible error de seguridad en el producto que los atacantes pueden aprovechar, vea Informes de problemas de seguridad y errores (repositorio de GitHub dotnet/aspnetcore).

• Cliente no autorizado para ME-ID

  Información: Error de autorización de Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2]. No se cumplen estos requisitos: DenyAnonymousAuthorizationRequirement: se requiere un usuario autenticado.

  Error de devolución de llamada de inicio de sesión de ME-ID:

  • Error: unauthorized_client
  • Description (Descripción): AADB2C90058: The provided application is not configured to allow public clients.

  Para resolver el error:

  1. En Azure Portal, acceda al manifiesto de la aplicación.
  2. Establezca el atributo allowPublicClient en null o true.

Cookies y datos del sitio

Las Cookies y los datos del sitio pueden persistir entre las actualizaciones de la aplicación e interferir con las pruebas y la solución de problemas. Borre los elementos siguientes al realizar cambios en el código de la aplicación, cambios en la cuenta de usuario con el proveedor o cuando el proveedor modifique la configuración de la aplicación:

• cookies de inicio de sesión del usuario
• cookies de aplicaciones
• Datos de sitios almacenados y en caché

El enfoque siguiente sirve para evitar que las cookies persistentes y los datos del sitio interfieran con las pruebas y la solución de problemas:

• Configuración de un explorador
  • Use un explorador para las pruebas, y configúrelo para que elimine todas las cookies y los datos del sitio cada vez que se cierre.
  • Asegúrese de que el explorador se cierra manualmente o mediante el IDE siempre que se produzca cualquier cambio en la aplicación, el usuario de prueba o la configuración del proveedor.
• Use un comando personalizado para abrir un explorador en el modo incógnito o privado en Visual Studio:
  • Abra el cuadro de diálogo Examinar con mediante el botón Ejecutar de Visual Studio.
  • Seleccione el botón Agregar.
  • Proporcione la ruta de acceso al explorador en el campo Programa. Las siguientes rutas de acceso del archivo ejecutable son ubicaciones de instalación típicas para Windows 10. Si el explorador está instalado en una ubicación diferente o no usa Windows 10, proporcione la ruta de acceso al archivo ejecutable del explorador.
    • 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
  • En el campo Argumentos, proporcione la opción de línea de comandos que utiliza el explorador para abrirse en el modo incógnito o privado. Algunos exploradores requieren la dirección URL de la aplicación.
    • Microsoft Edge: Use -inprivate.
    • Google Chrome: Use --incognito --new-window {URL}, donde el marcador de posición {URL} es la dirección URL que se va a abrir (por ejemplo, https://localhost:5001).
    • Mozilla Firefox: Use -private -url {URL}, donde el marcador de posición {URL} es la dirección URL que se va a abrir (por ejemplo, https://localhost:5001).
  • Proporcione un nombre en el campo Nombre descriptivo. Por ejemplo: Firefox Auth Testing.
  • Seleccione el botón Aceptar.
  • Para evitar tener que seleccionar el perfil de explorador para cada iteración de pruebas con una aplicación, establezca el perfil como predeterminado con el botón Establecer como predeterminado.
  • Asegúrese de que el explorador se cierra mediante el IDE siempre que se produzca cualquier cambio en la aplicación, el usuario de prueba o la configuración del proveedor.

Actualizaciones de aplicaciones

Una aplicación en funcionamiento deja de ejecutarse inmediatamente después de actualizar el SDK de .NET Core en la máquina de desarrollo o de cambiar las versiones del paquete en la aplicación. En algunos casos, los paquetes incoherentes pueden interrumpir una aplicación al realizar actualizaciones importantes. La mayoría de estos problemas puede corregirse siguiendo estas instrucciones:

1. Borre las memorias caché del paquete NuGet del sistema local ejecutando dotnet nuget locals all --clear desde un shell de comandos.
2. Elimine las carpetas bin y obj del proyecto.
3. Restaure el proyecto y vuelva a compilarlo.
4. Elimine todos los archivos de la carpeta de implementación del servidor antes de volver a implementar la aplicación.

Nota

No se pueden usar versiones de paquetes que no sean compatibles con la plataforma de destino de la aplicación. Para obtener información sobre un paquete, use la galería de NuGet o el explorador de paquetes FuGet.

Inspección del usuario

El siguiente componente User se puede usar directamente en las aplicaciones, o bien servir como base para una mayor personalización.

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));
    }
}

Inspección del contenido de un JSON Web Token (JWT)

Para descodificar un JSON Web Token (JWT), use la herramienta jwt.ms de Microsoft. Los valores de la interfaz de usuario nunca salen del explorador.

Ejemplo de JWT codificado (se muestra una versión abreviada):

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q

Ejemplo de JWT descodificado por la herramienta para una aplicación que se autentica en Azure AAD B2C:

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1610059429,
  "nbf": 1610055829,
  "ver": "1.0",
  "iss": "https://mysiteb2c.b2clogin.com/5cc15ea8-a296-4aa3-97e4-226dcc9ad298/v2.0/",
  "sub": "5ee963fb-24d6-4d72-a1b6-889c6e2c7438",
  "aud": "70bde375-fce3-4b82-984a-b247d823a03f",
  "nonce": "b2641f54-8dc4-42ca-97ea-7f12ff4af871",
  "iat": 1610055829,
  "auth_time": 1610055822,
  "idp": "idp.com",
  "tfp": "B2C_1_signupsignin"
}.[Signature]

Recursos adicionales

• Otros escenarios de seguridad de Blazor WebAssembly en ASP.NET Core
• Creación de una versión personalizada de la biblioteca de JavaScript Authentication.MSAL
• Solicitudes de API web no autenticadas o no autorizadas en una aplicación con un cliente predeterminado seguro
• Autenticación en la nube Azure Active Directory B2C en ASP.NET Core
• Tutorial: Creación de un inquilino de Azure Active Directory B2C
• Tutorial: Registro de una aplicación en Azure Active Directory B2C
• Documentación de la plataforma de identidad de Microsoft