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

Artículo
08/23/2021
23 minutos para leer

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.

Cree un inquilino o determine un inquilino de B2C existente para que la aplicación lo use en Azure Portal siguiendo las instrucciones del artículo Creación de un inquilino de Azure Active Directory B2C (documentación de Azure). Vuelva a este artículo inmediatamente después de crear o identificar un inquilino que vaya a usar.

Registre la siguiente información:

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.

Registre una aplicación AAD B2C:

Vaya a Azure Active Directory en Azure Portal. Seleccione Registros de aplicaciones en la barra lateral. Seleccione el botón Nuevo registro.
Indique un Nombre para la aplicación (por ejemplo, Blazor Standalone AAD B2C).
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.
Establezca la lista desplegable URI de redirección en Aplicación de página única y proporcione el siguiente URI de redirección: https://localhost:{PORT}/authentication/login-callback. El puerto predeterminado de una aplicación que se ejecuta en Kestrel es 5001. Si la aplicación se ejecuta en otro puerto de Kestrel, use el puerto de la aplicación. En el caso de IIS Express, el puerto generado aleatoriamente para la aplicación se encuentra en las propiedades de la aplicación, en el panel Depurar. Dado que la aplicación no existe en este momento y no conocemos el puerto de IIS Express, vuelva a este paso después de crear la aplicación y actualice el URI de redirección. Más adelante en este tema aparece un comentario para recordar a los usuarios de IIS Express que actualicen el URI de redirección.
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.
Seleccione Registrar.

Registre el identificador de aplicación (cliente); por ejemplo, 41451fa7-82d9-4673-8fa5-69eff5a761fd.

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

Confirme que el URI de redirección de https://localhost:{PORT}/authentication/login-callback está presente.
En Concesión implícita, asegúrese de que las casillas Tokens de acceso y Tokens de id. no están seleccionadas.
Los valores predeterminados restantes de la aplicación son aceptables en esta experiencia.
Seleccione el botón Guardar.

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 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).

En una carpeta vacía, 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 {APP 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/`
`{APP 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 de la aplicación.

Nota

En Azure Portal, el URI de redirección de configuración de la plataforma de la aplicación se establece en el puerto 5001 en el caso de las aplicaciones que se ejecutan en el servidor Kestrel con la configuración predeterminada.

Si la aplicación se ejecuta en un puerto de IIS Express aleatorio, el puerto de la aplicación se encuentra en las propiedades de la aplicación, en el panel Depurar.

Si el puerto no se configuró anteriormente con el puerto conocido de la aplicación, vuelva al registro de la aplicación en Azure Portal y actualice el URI de redirección con el puerto correcto.

Agregue un par de MsalProviderOptions para openid y offline_access DefaultAccessTokenScopes:

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:

Iniciar sesión en la aplicación con una cuenta de usuario de AAD
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.

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 manualmente al archivo de proyecto de la aplicación:

<PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" 
  Version="{VERSION}" />

En el caso del marcador de posición {VERSION}, la versión estable más reciente del paquete que coincide con la versión del marco compartida de la aplicación se puede encontrar en el historial de versiones 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.

Program.cs:

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}{DOMAIN}/{SIGN UP OR SIGN IN POLICY}",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": false
  }
}

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

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

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 popupy 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 CascadingAuthenticationState administra la exposición de AuthenticationState al resto 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, 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.

Nota

Los enlaces de la documentación del origen de referencia de ASP.NET Core cargan la rama main del repositorio, que representa el desarrollo actual de la unidad de producto para la próxima versión de ASP.NET Core. Para seleccionar la rama de una versión diferente, use la lista desplegable Switch branches or tags (Cambiar ramas o etiquetas) para seleccionar la rama. Por ejemplo, seleccione la rama release/5.0 para la versión 5.0 de ASP.NET Core.

Componente RedirectToLogin

El componente RedirectToLogin (Shared/RedirectToLogin.razor):

Administra el redireccionamiento de usuarios no autorizados a la página de inicio de sesión.
Conserva la dirección URL actual a la que el usuario intenta tener acceso para que pueda volver a esa página si la autenticación se realiza correctamente.

@inject NavigationManager Navigation
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@code {
    protected override void OnInitialized()
    {
        Navigation.NavigateTo(
            $"authentication/login?returnUrl={Uri.EscapeDataString(Navigation.Uri)}");
    }
}

Componente LoginDisplay

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

En el caso de los usuarios autenticados:
- Muestra el nombre de usuario actual.
- Proporciona un botón para cerrar la sesión de la aplicación.
En el caso de los usuarios anónimos, ofrece la posibilidad de iniciar sesión.

@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject NavigationManager Navigation
@inject SignOutSessionStateManager SignOutManager

<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity.Name!
        <button class="nav-link btn btn-link" @onclick="BeginLogout">
            Log out
        </button>
    </Authorized>
    <NotAuthorized>
        <a href="authentication/login">Log in</a>
    </NotAuthorized>
</AuthorizeView>

@code {
    private async Task BeginLogout(MouseEventArgs args)
    {
        await SignOutManager.SetSignOutState();
        Navigation.NavigateTo("authentication/logout");
    }
}

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

Flujos de usuario personalizados

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. Cree los flujos de usuario personalizados en el código del desarrollador.

Para obtener más información sobre cómo crear un desafío para un flujo de usuario personalizado, consulte Flujos de usuario en Azure Active Directory B2C.

Solución de problemas

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.
- Un ámbito de token de acceso incorrecto impide 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 otro puerto que no sea el configurado en el URI de redireccionamiento del registro de la aplicación del proveedor de Identity.
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)
- Descodifique el contenido de un JSON Web Token (JWT) usado para autenticar un cliente o acceder a una API web del servidor, según dónde esté 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 (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:
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 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 AAD

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 AAD:
- 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:

Borre las memorias caché del paquete NuGet del sistema local ejecutando dotnet nuget locals all --clear desde un shell de comandos.
Elimine las carpetas bin y obj del proyecto.
Restaure el proyecto y vuelva a compilarlo.
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.

Ejecución de la aplicación Server

Al realizar pruebas y solucionar problemas de una solución Blazor hospedada, asegúrese ejecutarla desde el proyecto Server . Por ejemplo, en Visual Studio, confirme que el proyecto Server está resaltado en el Explorador de soluciones antes de iniciar la aplicación con cualquiera de los métodos siguientes:

Haga clic en el botón Ejecutar.
En el menú, seleccione Depurar > Iniciar depuración.
Presione F5.

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

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.

Registre la siguiente información:

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.

Registre una aplicación AAD B2C:

Vaya a Azure Active Directory en Azure Portal. Seleccione Registros de aplicaciones en la barra lateral. Seleccione el botón Nuevo registro.
Indique un Nombre para la aplicación (por ejemplo, Blazor Standalone AAD B2C).
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.
Establezca la lista desplegable URI de redirección en Aplicación de página única y proporcione el siguiente URI de redirección: https://localhost:{PORT}/authentication/login-callback. El puerto predeterminado de una aplicación que se ejecuta en Kestrel es 5001. Si la aplicación se ejecuta en otro puerto de Kestrel, use el puerto de la aplicación. En el caso de IIS Express, el puerto generado aleatoriamente para la aplicación se encuentra en las propiedades de la aplicación, en el panel Depurar. Dado que la aplicación no existe en este momento y no conocemos el puerto de IIS Express, vuelva a este paso después de crear la aplicación y actualice el URI de redirección. Más adelante en este tema aparece un comentario para recordar a los usuarios de IIS Express que actualicen el URI de redirección.
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.
Seleccione Registrar.

Registre el identificador de aplicación (cliente); por ejemplo, 41451fa7-82d9-4673-8fa5-69eff5a761fd.

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

Confirme que el URI de redirección de https://localhost:{PORT}/authentication/login-callback está presente.
En Concesión implícita, asegúrese de que las casillas Tokens de acceso y Tokens de id. no están seleccionadas.
Los valores predeterminados restantes de la aplicación son aceptables en esta experiencia.
Seleccione el botón Guardar.

En Home > Azure AD B2C > Flujos de usuario:

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

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).

En una carpeta vacía, 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 {APP 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/`
`{APP 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 de la aplicación.

Nota

Si la aplicación se ejecuta en un puerto de IIS Express aleatorio, el puerto de la aplicación se encuentra en las propiedades de la aplicación, en el panel Depurar.

Si el puerto no se configuró anteriormente con el puerto conocido de la aplicación, vuelva al registro de la aplicación en Azure Portal y actualice el URI de redirección con el puerto correcto.

Agregue un par de MsalProviderOptions para openid y offline_access DefaultAccessTokenScopes:

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:

Iniciar sesión en la aplicación con una cuenta de usuario de AAD
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.

Paquete de autenticación

Si agrega autenticación a una aplicación, agregue el paquete manualmente al archivo de proyecto de la aplicación:

<PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" 
  Version="{VERSION}" />

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

Program.cs:

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

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

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

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

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

Especifique ámbitos adicionales con AdditionalScopesToConsent:

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

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

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

La configuración predeterminada es popupy 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

<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 CascadingAuthenticationState administra la exposición de AuthenticationState al resto 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.

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.

Nota

Los enlaces de la documentación del origen de referencia de ASP.NET Core cargan la rama main del repositorio, que representa el desarrollo actual de la unidad de producto para la próxima versión de ASP.NET Core. Para seleccionar la rama de una versión diferente, use la lista desplegable Switch branches or tags (Cambiar ramas o etiquetas) para seleccionar la rama. Por ejemplo, seleccione la rama release/5.0 para la versión 5.0 de ASP.NET Core.

Componente RedirectToLogin

El componente RedirectToLogin (Shared/RedirectToLogin.razor):

Administra el redireccionamiento de usuarios no autorizados a la página de inicio de sesión.
Conserva la dirección URL actual a la que el usuario intenta tener acceso para que pueda volver a esa página si la autenticación se realiza correctamente.

@inject NavigationManager Navigation
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@code {
    protected override void OnInitialized()
    {
        Navigation.NavigateTo(
            $"authentication/login?returnUrl={Uri.EscapeDataString(Navigation.Uri)}");
    }
}

Componente LoginDisplay

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

En el caso de los usuarios autenticados:
- Muestra el nombre de usuario actual.
- Proporciona un botón para cerrar la sesión de la aplicación.
En el caso de los usuarios anónimos, ofrece la posibilidad de iniciar sesión.

@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject NavigationManager Navigation
@inject SignOutSessionStateManager SignOutManager

<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity.Name!
        <button class="nav-link btn btn-link" @onclick="BeginLogout">
            Log out
        </button>
    </Authorized>
    <NotAuthorized>
        <a href="authentication/login">Log in</a>
    </NotAuthorized>
</AuthorizeView>

@code {
    private async Task BeginLogout(MouseEventArgs args)
    {
        await SignOutManager.SetSignOutState();
        Navigation.NavigateTo("authentication/logout");
    }
}

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

Flujos de usuario personalizados

Para obtener más información sobre cómo crear un desafío para un flujo de usuario personalizado, consulte Flujos de usuario en Azure Active Directory B2C.

Solución de problemas

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.
- Un ámbito de token de acceso incorrecto impide 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 otro puerto que no sea el configurado en el URI de redireccionamiento del registro de la aplicación del proveedor de Identity.
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)
- Descodifique el contenido de un JSON Web Token (JWT) usado para autenticar un cliente o acceder a una API web del servidor, según dónde esté 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 (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:
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 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 AAD

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 AAD:
- 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

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

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

Nota

Ejecución de la aplicación Server

Haga clic en el botón Ejecutar.
En el menú, seleccione Depurar > Iniciar depuración.
Presione F5.

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

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.

Registre la siguiente información:

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.

Registre una aplicación AAD B2C:

Vaya a Azure Active Directory en Azure Portal. Seleccione Registros de aplicaciones en la barra lateral. Seleccione el botón Nuevo registro.
Indique un Nombre para la aplicación (por ejemplo, Blazor Standalone AAD B2C).
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.
Deje la lista desplegable URI de redirección establecida en Web y proporcione el siguiente URI de redirección: https://localhost:{PORT}/authentication/login-callback. El puerto predeterminado de una aplicación que se ejecuta en Kestrel es 5001. Si la aplicación se ejecuta en otro puerto de Kestrel, use el puerto de la aplicación. En el caso de IIS Express, el puerto generado aleatoriamente para la aplicación se encuentra en las propiedades de la aplicación, en el panel Depurar. Dado que la aplicación no existe en este momento y no conocemos el puerto de IIS Express, vuelva a este paso después de crear la aplicación y actualice el URI de redirección. Más adelante en este tema aparece un comentario para recordar a los usuarios de IIS Express que actualicen el URI de redirección.
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.
Seleccione Registrar.

Registre el identificador de aplicación (cliente); por ejemplo, 41451fa7-82d9-4673-8fa5-69eff5a761fd.

En Autenticación > Configuraciones de plataforma > Web:

Confirme que el URI de redirección de https://localhost:{PORT}/authentication/login-callback está presente.
En Concesión implícita, seleccione las casillas Tokens de acceso y Tokens de id.
Los valores predeterminados restantes de la aplicación son aceptables en esta experiencia.
Seleccione el botón Guardar.

En Home > Azure AD B2C > Flujos de usuario:

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

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).

En una carpeta vacía, 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 {APP 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/`
`{APP 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 de la aplicación.

Nota

Si la aplicación se ejecuta en un puerto de IIS Express aleatorio, el puerto de la aplicación se encuentra en las propiedades de la aplicación, en el panel Depurar.

Si el puerto no se configuró anteriormente con el puerto conocido de la aplicación, vuelva al registro de la aplicación en Azure Portal y actualice el URI de redirección con el puerto correcto.

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

Iniciar sesión en la aplicación con una cuenta de usuario de AAD
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.

Paquete de autenticación

Si agrega autenticación a una aplicación, agregue el paquete manualmente al archivo de proyecto de la aplicación:

<PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" 
  Version="{VERSION}" />

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

Program.cs:

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

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

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

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

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

Especifique ámbitos adicionales con AdditionalScopesToConsent:

options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL 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

<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 CascadingAuthenticationState administra la exposición de AuthenticationState al resto 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.

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.

Nota

Los enlaces de la documentación del origen de referencia de ASP.NET Core cargan la rama main del repositorio, que representa el desarrollo actual de la unidad de producto para la próxima versión de ASP.NET Core. Para seleccionar la rama de una versión diferente, use la lista desplegable Switch branches or tags (Cambiar ramas o etiquetas) para seleccionar la rama. Por ejemplo, seleccione la rama release/5.0 para la versión 5.0 de ASP.NET Core.

Componente RedirectToLogin

El componente RedirectToLogin (Shared/RedirectToLogin.razor):

Administra el redireccionamiento de usuarios no autorizados a la página de inicio de sesión.
Conserva la dirección URL actual a la que el usuario intenta tener acceso para que pueda volver a esa página si la autenticación se realiza correctamente.

@inject NavigationManager Navigation
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@code {
    protected override void OnInitialized()
    {
        Navigation.NavigateTo(
            $"authentication/login?returnUrl={Uri.EscapeDataString(Navigation.Uri)}");
    }
}

Componente LoginDisplay

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

En el caso de los usuarios autenticados:
- Muestra el nombre de usuario actual.
- Proporciona un botón para cerrar la sesión de la aplicación.
En el caso de los usuarios anónimos, ofrece la posibilidad de iniciar sesión.

@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject NavigationManager Navigation
@inject SignOutSessionStateManager SignOutManager

<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity.Name!
        <button class="nav-link btn btn-link" @onclick="BeginLogout">
            Log out
        </button>
    </Authorized>
    <NotAuthorized>
        <a href="authentication/login">Log in</a>
    </NotAuthorized>
</AuthorizeView>

@code {
    private async Task BeginLogout(MouseEventArgs args)
    {
        await SignOutManager.SetSignOutState();
        Navigation.NavigateTo("authentication/logout");
    }
}

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

Flujos de usuario personalizados

Para obtener más información sobre cómo crear un desafío para un flujo de usuario personalizado, consulte Flujos de usuario en Azure Active Directory B2C.

Solución de problemas

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.
- Un ámbito de token de acceso incorrecto impide 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 otro puerto que no sea el configurado en el URI de redireccionamiento del registro de la aplicación del proveedor de Identity.
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)
- Descodifique el contenido de un JSON Web Token (JWT) usado para autenticar un cliente o acceder a una API web del servidor, según dónde esté 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 (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:
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 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 AAD

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 AAD:
- 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

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

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

Nota

Ejecución de la aplicación Server

Haga clic en el botón Ejecutar.
En el menú, seleccione Depurar > Iniciar depuración.
Presione F5.

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]

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

Valore su experiencia

Paquete de autenticación

Compatibilidad con el servicio de autenticación

Ámbitos de token de acceso

Modo de inicio de sesión

Archivo Imports

Página de índice

Componente App

Componente RedirectToLogin

Componente LoginDisplay

Componente Authentication

Flujos de usuario personalizados

Solución de problemas

Errores comunes

Cookies y datos del sitio

Actualizaciones de aplicaciones

Ejecución de la aplicación Server

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

Recursos adicionales

Paquete de autenticación

Compatibilidad con el servicio de autenticación

Ámbitos de token de acceso

Modo de inicio de sesión

Archivo Imports

Página de índice

Componente App

Componente RedirectToLogin

Componente LoginDisplay

Componente Authentication

Flujos de usuario personalizados

Solución de problemas

Errores comunes

Cookies y datos del sitio

Actualizaciones de aplicaciones

Ejecución de la aplicación Server

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

Recursos adicionales

Paquete de autenticación

Compatibilidad con el servicio de autenticación

Ámbitos de token de acceso

Archivo Imports

Página de índice

Componente App

Componente RedirectToLogin

Componente LoginDisplay

Componente Authentication

Flujos de usuario personalizados

Solución de problemas

Errores comunes

Cookies y datos del sitio

Actualizaciones de aplicaciones

Ejecución de la aplicación Server

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

Recursos adicionales