Compartir a través de

Protección de una aplicación independiente Blazor WebAssembly de ASP.NET Core con la biblioteca de autenticación

  • Artículo

Nota

Esta no es la versión más reciente de este artículo. Para la versión actual, consulta la versión .NET 8 de este artículo.

Advertencia

Esta versión de ASP.NET Core ya no se admite. Para obtener más información, consulta la Directiva de soporte técnico de .NET y .NET Core. Para la versión actual, consulta la versión .NET 8 de este artículo.

Importante

Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.

Para la versión actual, consulta la versión .NET 8 de este artículo.

En este artículo se explica cómo proteger una aplicación independiente Blazor WebAssembly de ASP.NET Core con la biblioteca de autenticación Blazor WebAssembly.

La biblioteca de autenticación de Blazor WebAssembly (Authentication.js) solo admite el flujo del código de autorización de la clave de prueba para el intercambio de código (PKCE) a través de la Biblioteca de autenticación de Microsoft (MSAL, msal.js). Para implementar otros flujos de concesión, accede a la guía de MSAL para implementar MSAL directamente, pero ten en cuenta que no se admite ni se recomienda el uso de flujos de concesión distintos de PKCE para aplicaciones de Blazor.

No sigas las instrucciones de este tema en relación con Microsoft Entra (ME-ID) ni Azure Active Directory B2C (AAD B2C). Consulta la Protección de una aplicación independiente de ASP.NET CoreBlazor WebAssembly con Microsoft Entra ID o Protección de una aplicación independiente de ASP.NET CoreBlazor WebAssembly con Azure Active Directory B2C.

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

Tutorial

En las subsecciones del tutorial se explica cómo:

  • Registrar una aplicación
  • Crear la aplicación Blazor
  • Ejecutar la aplicación

Registrar una aplicación

Registra una aplicación con un proveedor (IP) de OpenID Connect (OIDC)Identity siguiendo las instrucciones que proporciona el mantenedor de la IP.

Registra la siguiente información:

  • Autoridad (por ejemplo, https://accounts.google.com/).
  • Id. de aplicación (cliente) (por ejemplo, 2...7-e...q.apps.googleusercontent.com).
  • Configuración de IP adicional (vea la documentación de la IP).

Nota:

La IP debe usar OIDC. Por ejemplo, la dirección IP de Facebook no es un proveedor compatible con OIDC, por lo que las instrucciones de este tema no funcionan con la dirección IP de Facebook. Para obtener más información, consulta Protección de Blazor WebAssembly en ASP.NET Core.

Crear la aplicación Blazor

Para crear una aplicación Blazor WebAssembly independiente que use la biblioteca Microsoft.AspNetCore.Components.WebAssembly.Authentication, sigue las instrucciones para sus herramientas elegidas. Si vas a agregar compatibilidad con la autenticación, consulta la sección Partes de la aplicación de este artículo para obtener instrucciones sobre cómo instalar y configurar la aplicación.

Para crear un nuevo proyecto de Blazor WebAssembly con un mecanismo de autenticación:

Después de elegir la plantilla Aplicación de Blazor WebAssembly, establece el Tipo de autenticación en Cuentas individuales.

Después de elegir la plantilla Aplicación de Blazor WebAssembly, establece el Tipo de autenticación en Cuentas individuales. Confirma que la casilla ASP.NET Core hospedado no está activada.

La selección Cuentas individuales usa el sistema Identity de ASP.NET Core. Esta selección agrega compatibilidad con la autenticación y no conlleva el almacenamiento de usuarios en una base de datos. En las siguientes secciones de este artículo se proporcionan más detalles.

Configuración de la aplicación

Configure la aplicación siguiendo las instrucciones de la IP. Como mínimo, la aplicación requiere los valores de configuración Local:Authority y Local:ClientId en el archivo wwwroot/appsettings.json de la aplicación:

{
  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"
  }
}

Ejemplo de OIDC de Google OAuth 2.0 para una aplicación que se ejecuta en la dirección localhost en el puerto 5001:

{
  "Local": {
    "Authority": "https://accounts.google.com/",
    "ClientId": "2...7-e...q.apps.googleusercontent.com",
    "PostLogoutRedirectUri": "https://localhost:5001/authentication/logout-callback",
    "RedirectUri": "https://localhost:5001/authentication/login-callback",
    "ResponseType": "code"
  }
}

El URI de redireccionamiento (https://localhost:5001/authentication/login-callback) se registra en la consola de API de Google en Credenciales>{NAME}>URIs de redirección autorizados, donde {NAME} es el nombre de cliente de la aplicación en la lista IDs de cliente de OAuth 2.0 de la consola de API de Google.

Nota:

No es necesario proporcionar el número de puerto para un URI de redireccionamiento localhost de algunas direcciones IP de OIDC según las especificaciones de OAuth 2.0. Algunas IP permiten que el URI de redireccionamiento para las direcciones de bucle invertido omita el puerto. Otras permiten el uso de un carácter comodín para el número de puerto (por ejemplo, *). Para obtener más información, vea la documentación de la IP.

Ejecutar la aplicación

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

  • Visual Studio
    • Haz clic en el botón Ejecutar.
    • En el menú, selecciona Depurar>Iniciar depuración.
    • Presiona F5.
  • Shell de comandos de la CLI de .NET: ejecuta el comando dotnet watch (o 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 creaste 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 cuentas de usuario individuales, dicha aplicación recibe automáticamente una referencia de paquete del paquete Microsoft.AspNetCore.Components.WebAssembly.Authentication. 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 agregas autenticación a una aplicación, agregue el paquete Microsoft.AspNetCore.Components.WebAssembly.Authentication manualmente a la aplicación:

Nota

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

Compatibilidad con el servicio de autenticación

La compatibilidad para autenticar usuarios mediante OpenID Connect (OIDC) se registra en el contenedor de servicios con el método de extensión AddOidcAuthentication proporcionado por el paquete Microsoft.AspNetCore.Components.WebAssembly.Authentication.

El método AddOidcAuthentication acepta una devolución de llamada para configurar los parámetros necesarios para autenticar una aplicación por medio de OIDC. Los valores necesarios para configurar la aplicación se pueden obtener a partir del proveedor de identidades compatible con OIDC. Obtenga los valores cuando registre la aplicación, lo que suele realizarse en el portal en línea del proveedor de identidades en cuestión.

Para una nueva aplicación, proporcione valores para los marcadores de posición {AUTHORITY} y {CLIENT ID} en la siguiente configuración. Proporcione otros valores de configuración que sean necesarios para su uso con la dirección IP de la aplicación. El ejemplo es para Google, que requiere PostLogoutRedirectUri, RedirectUri y ResponseType. Si incluye autenticación en una aplicación, agregue manualmente el código y la configuración siguientes a la aplicación con valores para los marcadores de posición y otros valores de configuración.

En el archivo Program:

builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("Local", options.ProviderOptions);
});

Configuración de wwwroot/appsettings.json

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

{
  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"
  }
}

Ámbitos de token de acceso

La plantilla Blazor WebAssembly configura automáticamente los ámbitos predeterminados para openid y profile.

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 predeterminados de OidcProviderOptions. Si incluye autenticación en una aplicación, agregue manualmente el código siguiente y configure el URI de ámbito.

En el archivo Program:

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

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

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.AspNetCore.Components.WebAssembly.Authentication/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.
  • El componente CascadingAuthenticationState administra la exposición de AuthenticationState a rest de la aplicación.
  • 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, usa cualquiera de los enfoques siguientes:

  • Crea 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. Inspecciona 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, usa la lista desplegable Cambiar ramas o etiquetas. Para obtener más información, consulta 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:

Inspecciona el componente RedirectToLogin en el origen de referencia. La ubicación del componente ha cambiado con el tiempo, usa 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, usa la lista desplegable Cambiar ramas o etiquetas. Para obtener más información, consulta 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, usa cualquiera de los enfoques siguientes:

  • Crea 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. Inspecciona el componente LoginDisplay en la aplicación generada.

  • Inspecciona el componente LoginDisplay en el origen de referencia. La ubicación del componente ha cambiado con el tiempo, usa 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, usa la lista desplegable Cambiar ramas o etiquetas. Para obtener más información, consulta 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:

@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 (?).

Solución de problemas

Registro

Para habilitar el registro de depuración o rastreo para la autenticación de Blazor WebAssembly, consulta 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. Ten 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. Consulta 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:

    • Analiza los registros de la aplicación.

    • Examina 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ás instrucciones sobre las herramientas de desarrollo:

    • Para las versiones de Blazor en las que se utiliza un JSON Web Token (JWT), descodifica 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, vea 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 (abre 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:

    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, abre una incidencia con la unidad de producto ASP.NET Core. No abras una incidencia con la unidad de producto hasta que hayas investigado exhaustivamente su causa y no puedas resolverlo por tu 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 ciberdelincuentes puedan aprovechar, consulta 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
    • Descripción: AADB2C90058: The provided application is not configured to allow public clients.

    Para resolver el error:

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

Cookies y datos de sitios

Las cookies y los datos de sitios pueden persistir durante las actualizaciones de la aplicación e interferir con las pruebas y la solución de problemas. Borra 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 de usuario
  • Cookies de aplicación
  • Datos de sitios almacenados y en caché

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

  • Configuración de un explorador
    • Usa un explorador para las pruebas, y configúralo para que elimine todas las cookies y los datos del sitio cada vez que se cierre.
    • Asegúrate 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.
  • Usa un comando personalizado para abrir un explorador en el modo incógnito o privado en Visual Studio:
    • Abre el cuadro de diálogo Examinar con mediante el botón Ejecutar de Visual Studio.
    • Selecciona el botón Agregar.
    • Proporciona 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, proporciona 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, proporciona 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: Usa -inprivate.
      • Google Chrome: usa --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: usa -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).
    • Proporciona un nombre en el campo Nombre descriptivo. Por ejemplo: Firefox Auth Testing.
    • Selecciona el botón Aceptar.
    • Para evitar tener que seleccionar el perfil de explorador para cada iteración de pruebas con una aplicación, establece el perfil como predeterminado con el botón Establecer como predeterminado.
    • Asegúrate 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. Borra las memorias caché del paquete NuGet del sistema local ejecutando dotnet nuget locals all --clear desde un shell de comandos.
  2. Elimina las carpetas bin y obj del proyecto.
  3. Restaura el proyecto y vuelve a compilarlo.
  4. Elimina 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, usa la galería de NuGet o el explorador de paquetes FuGet.

Ejecuta la aplicación Server

Al realizar pruebas y solucionar problemas de una soluciónBlazor WebAssembly hospedada, asegúrate de ejecutar la aplicación desde el proyecto Server.

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/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 adicionales