ASP.NET Core Blazor verificatie en autorisatie

Als het afdwingen van autorisatieregels moet worden gegarandeerd, moet u geen autorisatiecontroles implementeren in code aan de clientzijde. Bouw een Blazor Web App die alleen afhankelijk is van server-side rendering (SSR) voor autorisatiecontroles en afdwinging van regels.

Als het afdwingen van autorisatieregels en de beveiliging van gegevens en code moet worden gegarandeerd, moet u geen app aan de clientzijde ontwikkelen. Een Blazor Server-app bouwen.

ASP.NET Core Identity is ontworpen om te werken in de context van HTTP-aanvraag- en antwoordcommunicatie, wat over het algemeen niet het Blazor client-servercommunicatiemodel van de app is. ASP.NET Core-apps die gebruikmaken van ASP.NET Core Identity voor gebruikersbeheer, moeten Razor Pagina's gebruiken in plaats van Razor onderdelen voor Identity-gerelateerde gebruikersinterface, zoals gebruikersregistratie, aanmelding, afmelding en andere taken voor gebruikersbeheer. Het bouwen van Razor onderdelen die rechtstreeks Identity taken verwerken, is mogelijk voor verschillende scenario's, maar wordt niet aanbevolen of ondersteund door Microsoft.

ASP.NET Kernabstracties, zoals SignInManager<TUser> en UserManager<TUser>, worden niet ondersteund in Razor onderdelen. Voor meer informatie over het gebruik van ASP.NET Core Identity met Blazor, zie Scaffold ASP.NET Core Identity naar een server-side app Blazor.

Ondersteuning voor antivervalsing

De Blazor-sjabloon:

• Voegt automatisch antivervalsingsdiensten toe wanneer AddRazorComponents wordt aangeroepen in het Program-bestand.
• Voegt Antiforgery Middleware toe door het aanroepen UseAntiforgery van de aanvraagverwerkingspijplijn in het Program bestand en vereist eindpuntbeveiliging tegen vervalsing om de bedreigingen van Cross-Site Request Forgery (CSRF/XSRF) te beperken. UseAntiforgery wordt aangeroepen na UseHttpsRedirection. Een oproep naar UseAntiforgery moet worden geplaatst na oproepen naar UseAuthentication en UseAuthorization, indien aanwezig.

Het AntiforgeryToken-onderdeel geeft een antiforgery-token weer als een verborgen veld en dit onderdeel wordt automatisch toegevoegd aan formulierexemplaren (EditForm). Zie het overzicht van ASP.NET Core-formulieren Blazorvoor meer informatie.

De AntiforgeryStateProvider-service biedt toegang tot een antiforgery-token dat is gekoppeld aan de huidige sessie. Injecteer de service en roep de GetAntiforgeryToken()-methode aan om de huidige AntiforgeryRequestToken te verkrijgen. Zie Een web-API aanroepen vanuit een ASP.NET Core-app Blazorvoor meer informatie.

Blazor slaat aanvraagtokens op in de componentstatus, wat garandeert dat antivervalsingstokens beschikbaar zijn voor interactieve onderdelen, zelfs als ze geen toegang hebben tot de aanvraag.

Zie de volgende bronnen voor meer informatie:

• Aanvallen van cross-site request forgery (XSRF/CSRF) voorkomen in ASP.NET Core: dit artikel is het primaire ASP.NET Core-artikel over het onderwerp, dat van toepassing is op serverzijde Blazor Server, het serverproject van Blazor Web Apps en Blazor integratie met MVC/Razor Pages.
• overzicht van ASP.NET KernformulierenBlazor: de sectie Antiforgery-ondersteuning van het artikel heeft betrekking op antivervalsingsondersteuning Blazor voor formulieren.

Blazor Identity gebruikersinterface (afzonderlijke accounts)

Blazorondersteunt het genereren van een volledige BlazorIdentity gebruikersinterface wanneer u de verificatieoptie voor afzonderlijke accounts kiest.

De Blazor Web App-sjabloon creëert Identity code voor een SQL Server-database. De opdrachtregelversie maakt gebruik van SQLite en bevat een SQLite-database voor Identity.

De sjabloon:

• Ondersteunt interactieve server-side rendering (interactieve SSR) en client-side rendering (CSR) scenario's met geverifieerde gebruikers.
• Voegt IdentityRazor onderdelen en gerelateerde logica toe voor routineverificatietaken, zoals het aanmelden van gebruikers en afmelden. De Identity onderdelen ondersteunen ook geavanceerde Identity functies, zoals accountbevestiging en wachtwoordherstel en meervoudige verificatie met behulp van een app van derden. Houd er rekening mee dat de Identity onderdelen zelf geen ondersteuning bieden voor interactiviteit.
• Voegt de Identity-gerelateerde pakketten en afhankelijkheden toe.
• Verwijst naar de Identity pakketten in _Imports.razor.
• U maakt een aangepaste gebruiker Identity-klasse (ApplicationUser).
• Hiermee maakt en registreert u een EF Core databasecontext (ApplicationDbContext).
• Hiermee configureert u routering voor de ingebouwde Identity-eindpunten.
• Bevat Identity validatie en bedrijfslogica.

Als u de componenten van het framework wilt inspecteren, opent u ze in de en mappen van de map in het serverproject van het projectsjabloon ( GitHub-opslagplaats).

Wanneer u de modus Interactive WebAssembly of Interactive Auto Render kiest, verwerkt de server alle verificatie- en autorisatieaanvragen en worden de Identity onderdelen statisch weergegeven op de server in het hoofdproject van de Blazor Web App.

Het framework biedt een aangepaste AuthenticationStateProvider in zowel de server- als clientprojecten (.Client) om de verificatiestatus van de gebruiker naar de browser te laten stromen. Het serverproject roept AddAuthenticationStateSerializationaan, terwijl het clientproject AddAuthenticationStateDeserializationaanroept. Door verificatie op de server in plaats van de client heeft de app tijdens het voorbereiden toegang tot de verificatiestatus en voordat de .NET WebAssembly-runtime wordt geïnitialiseerd. De aangepaste AuthenticationStateProvider implementaties gebruiken de service Persistent Component State (PersistentComponentState) om de verificatiestatus te serialiseren in HTML-opmerkingen en deze vervolgens terug te lezen vanuit WebAssembly om een nieuw AuthenticationState exemplaar te maken. Zie de sectie Verificatiestatus beheren in Blazor Web Apps voor meer informatie.

Alleen voor Interactieve Server-oplossingen (IdentityRevalidatingAuthenticationStateProviderComponents/Account/IdentityRevalidatingAuthenticationStateProvider.cs) in het serverproject van de Blazor Web App projectsjabloon (dotnet/aspnetcoreGitHub-opslagplaats) is er een server-side AuthenticationStateProvider dat elke 30 minuten het beveiligingsstempel opnieuw valideert voor de verbonden gebruiker wanneer een interactieve circuit actief is.

Wanneer u de modus Interactive WebAssembly of Interactive Auto Render kiest, verwerkt de server alle verificatie- en autorisatieaanvragen en worden de Identity onderdelen statisch weergegeven op de server in het hoofdproject van de Blazor Web App. De projectsjabloon bevat een PersistentAuthenticationStateProvider klasse (referentiebron) in het .Client project om de verificatiestatus van de gebruiker tussen de server en de browser te synchroniseren. De klasse is een aangepaste implementatie van AuthenticationStateProvider. De provider gebruikt de service Persistent Component State (PersistentComponentState) om de verificatiestatus vooraf te laten gaan en deze op de pagina te behouden.

In het hoofdproject van een Blazor Web App krijgt de provider van de authenticatiestatus de naam IdentityRevalidatingAuthenticationStateProvider in de Components/Account map van het serverproject in de Blazor Web App projectsjabloon (dotnet/aspnetcore GitHub-opslagplaats) (alleen server-interactiviteitsoplossingen) of de PersistingRevalidatingAuthenticationStateProvider (WebAssembly- of Auto-interactiviteitsoplossingen) in dezelfde map.

Blazor Identity DbContext is afhankelijk van exemplaren die niet zijn gemaakt door een fabriek, wat opzettelijk is omdat DbContext de onderdelen van Identity de projectsjabloon voldoende zijn om statisch weer te geven zonder interactiviteit te ondersteunen.

Zie Identityvoor een beschrijving van de manier waarop globale interactieve rendermodi worden toegepast op niet-Identity onderdelen en tegelijkertijd statische SSR afdwingen voor de Blazor onderdelen.

Zie ASP.NET Kernvoorgerende Blazor statuspersistentie voor meer informatie over persistentie van voorgerendereden kernstatus.

Verificatiestatus beheren in Blazor Web Apps

Deze sectie is van toepassing op Blazor Web Apps die worden toegepast:

• Individuele rekeningen
• Rendering aan clientzijde (CSR, webassembly-gebaseerde interactiviteit).

Een verificatiestatusprovider aan de clientzijde wordt alleen gebruikt binnen Blazor en is niet geïntegreerd met het ASP.NET Core-verificatiesysteem. Tijdens het voorbereiden respecteert Blazor de metagegevens die op de pagina zijn gedefinieerd en gebruikt het ASP.NET Core-verificatiesysteem om te bepalen of de gebruiker is geverifieerd. Wanneer een gebruiker van de ene pagina naar de andere navigeert, wordt een verificatieprovider aan de clientzijde gebruikt. Wanneer de gebruiker de pagina vernieuwt (opnieuw laden op volledige pagina), is de verificatiestatusprovider aan de clientzijde niet betrokken bij de verificatiebeslissing op de server. Omdat de status van de gebruiker niet wordt behouden door de server, gaat de verificatiestatus van de client verloren.

Om dit te verhelpen, is de beste methode om verificatie uit te voeren binnen het ASP.NET Core-verificatiesysteem. De verificatiestatusprovider aan de clientzijde zorgt alleen voor het weergeven van de verificatiestatus van de gebruiker. Voorbeelden van hoe u dit kunt doen met authenticatiestatus-providers worden gedemonstreerd in de Blazor Web App-projectsjabloon en hieronder beschreven.

Roep in het Program bestand van het serverproject AddAuthenticationStateSerialization aan, waarmee de AuthenticationState die door de serverzijde AuthenticationStateProvider wordt geretourneerd, wordt geserialiseerd met behulp van de service Persistent Component State (PersistentComponentState).

builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents()
    .AddAuthenticationStateSerialization();

De API serialiseert alleen de naam en rolclaims aan de serverzijde voor toegang in de browser. Als u alle claims wilt opnemen, stelt u SerializeAllClaims in op true in de aanroep aan de serverzijde naar AddAuthenticationStateSerialization:

builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents()
    .AddAuthenticationStateSerialization(
        options => options.SerializeAllClaims = true);

Roep in het .Client-bestand van het clientproject (Program) AddAuthenticationStateDeserializationaan, waarmee een AuthenticationStateProvider wordt toegevoegd waarbij de AuthenticationState van de server wordt gedeserialiseerd met behulp van AuthenticationStateData en de permanente componentstatusservice (PersistentComponentState). Er moet een overeenkomende aanroep zijn voor AddAuthenticationStateSerialization in het serverproject.

builder.Services.AddAuthorizationCore();
builder.Services.AddCascadingAuthenticationState();
builder.Services.AddAuthenticationStateDeserialization();

• PersistingRevalidatingAuthenticationStateProvider (dotnet/aspnetcore GitHub-opslagplaats): voor Blazor Web Apps die interactieve server-side rendering (interactieve SSR) en CSR (Client Side Rendering) gebruiken. Dit is een server-side AuthenticationStateProvider die het beveiligingsstempel elke 30 minuten opnieuw valideert voor de verbonden gebruiker wanneer er een interactief circuit is verbonden. Het maakt ook gebruik van de permanente componentstatusservice om de verificatiestatus naar de client te laten stromen, die vervolgens wordt vastgezet voor de levensduur van CSR.

• PersistingServerAuthenticationStateProvider (dotnet/aspnetcore GitHub-opslagplaats): voor Blazor Web Apps die alleen CSR gebruiken. Dit is een serverzijde AuthenticationStateProvider die gebruikmaakt van de permanente componentstatusservice om de verificatiestatus naar de client te laten stromen, die vervolgens wordt vastgesteld voor de levensduur van CSR.

• PersistentAuthenticationStateProvider (dotnet/aspnetcore GitHub-opslagplaats): voor Blazor Web Apps die CSR aannemen. Dit is een AuthenticationStateProvider aan de clientzijde die de verificatiestatus van de gebruiker bepaalt door te zoeken naar gegevens die op de pagina worden bewaard toen deze op de server werd weergegeven. Deze verificatiestatus is vast voor de levensduur van CSR. Als de gebruiker zich moet aanmelden of afmelden, is een herlaadbewerking op volledige pagina vereist. Dit biedt alleen een gebruikersnaam en e-mail voor weergavedoeleinden. Het bevat geen tokens die authenticeren bij de server wanneer er volgende aanvragen worden gedaan. Deze worden afzonderlijk verwerkt met behulp van een cookie-token dat is opgenomen in HttpClient-aanvragen naar de server.

Steiger Identity

Zie Identity voor meer informatie over scaffolding van Blazor in een server-side-appIdentity.

Scaffold Identity in een Blazor-app aan de serverkant:

• Zonder bestaande autorisatie.
• met autorisatie.

In het bestand Program:

builder.Services.AddScoped<ExampleService>();

In Startup.ConfigureServices van Startup.cs:

services.AddScoped<ExampleService>();

@page "/inject-auth-state-provider"
@inherits OwningComponentBase
@inject AuthenticationStateProvider AuthenticationStateProvider

<h1>Inject <code>AuthenticationStateProvider</code> Example</h1>

<p>@message</p>

@code {
    private string? message;
    private ExampleService? ExampleService { get; set; }

    protected override async Task OnInitializedAsync()
    {
        ExampleService = ScopedServices.GetRequiredService<ExampleService>();

        message = await ExampleService.ExampleMethod(AuthenticationStateProvider);
    }
}

@page "/inject-auth-state-provider"
@inject AuthenticationStateProvider AuthenticationStateProvider
@inherits OwningComponentBase

<h1>Inject <code>AuthenticationStateProvider</code> Example</h1>

<p>@message</p>

@code {
    private string? message;
    private ExampleService? ExampleService { get; set; }

    protected override async Task OnInitializedAsync()
    {
        ExampleService = ScopedServices.GetRequiredService<ExampleService>();

        message = await ExampleService.ExampleMethod(AuthenticationStateProvider);
    }
}

• Prerendering uitschakelen: Geef de weergavemodus aan met de parameter prerender ingesteld op false op het hoogste niveau in de componenthiërarchie van de app die geen hoofdonderdeel is.

  Note

  Het interactief maken van een hoofdonderdeel, zoals het App-onderdeel, wordt niet ondersteund. Daarom kan prerendering niet rechtstreeks worden uitgeschakeld door het App onderdeel.

  Voor apps op basis van de Blazor Web App projectsjabloon wordt het prerendering meestal uitgeschakeld wanneer het Routes onderdeel wordt gebruikt in het App-onderdeel (Components/App.razor):

  <Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />
  

  Schakel ook het prerendering uit voor het HeadOutlet-onderdeel:

  <HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />
  

  U kunt ook selectief bepalen welke weergavemodus wordt toegepast op het Routes onderdeelexemplaar. Zie bijvoorbeeld ASP.NET Core-rendermodiBlazor.

• Prerendering uitschakelen: open het _Host.cshtml bestand en wijzig het render-mode kenmerk van de Component Tag Helper in Server:

  <component type="typeof(App)" render-mode="Server" />
  

Geldigheidsduur van tijdelijke omleidings-URL

Deze sectie is van toepassing op Blazor Web Apps.

Gebruik de optie RazorComponentsServiceOptions.TemporaryRedirectionUrlValidityDuration om de levensduur van ASP.NET Core Data Protection-geldigheid op te halen of in te stellen voor tijdelijke omleidings-URL's die worden verzonden door Blazor rendering aan de serverzijde. Deze worden alleen tijdelijk gebruikt, dus de levensduur hoeft alleen lang genoeg te zijn voor een client om de URL te ontvangen en te beginnen met navigeren. Het moet echter ook lang genoeg zijn om klokverschuiving tussen servers op te vangen. De standaardwaarde is vijf minuten.

In het volgende voorbeeld wordt de waarde uitgebreid tot zeven minuten:

builder.Services.AddRazorComponents(options => 
    options.TemporaryRedirectionUrlValidityDuration = 
        TimeSpan.FromMinutes(7));

Gegevens in Blazor Web Appbeveiligen met interactieve automatische rendering

Wanneer een Blazor Web App server-side rendering (SSR) en CSR (Client Side Rendering) gebruikt voor onderdelen of een volledige app die de interactieve modus voor automatisch renderen aangeeft, wordt autorisatie voor toegang tot onderdelen en gegevens op twee plaatsen toegepast. Het onderdeel beperkt de toegang tot zichzelf (en alle gegevens die het verkrijgt) wanneer het op de server wordt weergegeven op basis van een autorisatiekenmerk in het definitiebestand van het onderdeel (@attribute [Authorize]). Wanneer het onderdeel wordt weergegeven op de client, wordt de toegang tot gegevens beperkt via de web-API-eindpunten van de server die worden aangeroepen vanaf de client. Zorg ervoor dat u op beide locaties gegevenstoegang beveiligt om onjuiste gegevenstoegang te voorkomen.

Houd rekening met het volgende scenario waarin beveiligde weersgegevens worden weergegeven door een onderdeel. Demonstraties van een aantal van de volgende benaderingen kunnen worden geëvalueerd en getest met behulp van de BlazorWebAppEntra/BlazorWebAppEntraBffvoorbeelden (.NET 9 of hoger) of deBlazorWebAppOidc/BlazorWebAppOidcBffvoorbeelden (.NET 8 of hoger) in de Blazor GitHub-opslagplaats voor voorbeelden (dotnet/blazor-samplesdownloaden).

Het clientproject onderhoudt een WeatherForecast klasse voor het opslaan van weergegevens:

public sealed class WeatherForecast(DateOnly date, int temperatureC, string summary)
{
    public DateOnly Date { get; set; } = date;
    public int TemperatureC { get; set; } = temperatureC;
    public string? Summary { get; set; } = summary;
    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}

De IWeatherForecaster-interface van het clientproject definieert een GetWeatherForecastAsync methode voor het verkrijgen van weergegevens:

public interface IWeatherForecaster
{
    Task<IEnumerable<WeatherForecast>> GetWeatherForecastAsync();
}

De ClientWeatherForecaster-service van het clientproject implementeert IWeatherForecaster. Met de methode GetWeatherForecastAsync wordt een web-API aangeroepen in het serverproject op het /weather-forecast-eindpunt voor weergegevens:

internal sealed class ClientWeatherForecaster(HttpClient httpClient) 
    : IWeatherForecaster
{
    public async Task<IEnumerable<WeatherForecast>> GetWeatherForecastAsync() =>
        await httpClient.GetFromJsonAsync<WeatherForecast[]>("/weather-forecast") ??
            throw new IOException("No weather forecast!");
}

Het klantproject beheert een Weather-onderdeel dat:

• Dwingt autorisatie af met een [Authorize] kenmerk.
• Maakt gebruik van de Persistent Component State-service (PersistentComponentState) om weersvoorspellingsgegevens vast te stellen wanneer het onderdeel overgaat van statisch naar interactief SSR op de server. Zie ASP.NET Vooraf samengestelde statuspersistentie van Core Blazorvoor meer informatie.

@page "/weather"
@using Microsoft.AspNetCore.Authorization
@using BlazorWebAppEntra.Client.Weather
@attribute [Authorize]
@inject IWeatherForecaster WeatherForecaster

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>This component demonstrates showing data.</p>

@if (Forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th aria-label="Temperature in Celsius">Temp. (C)</th>
                <th aria-label="Temperature in Fahrenheit">Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in Forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    [PersistentState]
    public IEnumerable<WeatherForecast>? Forecasts { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Forecasts ??= await WeatherForecaster.GetWeatherForecastAsync();
    }
}

@page "/weather"
@using Microsoft.AspNetCore.Authorization
@using BlazorWebAppEntra.Client.Weather
@attribute [Authorize]
@implements IDisposable
@inject PersistentComponentState ApplicationState
@inject IWeatherForecaster WeatherForecaster

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>This component demonstrates showing data.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th aria-label="Temperature in Celsius">Temp. (C)</th>
                <th aria-label="Temperature in Fahrenheit">Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private IEnumerable<WeatherForecast>? forecasts;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<IEnumerable<WeatherForecast>>(
            nameof(forecasts), out var restoredData))
        {
            forecasts = await WeatherForecaster.GetWeatherForecastAsync();
        }
        else
        {
            forecasts = restoredData!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson(nameof(forecasts), forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose() => persistingSubscription.Dispose();
}

Het serverproject implementeert IWeatherForecaster als ServerWeatherForecaster, waarmee weersgegevens worden gegenereerd en geretourneerd via de GetWeatherForecastAsync-methode.

internal sealed class ServerWeatherForecaster() : IWeatherForecaster
{
    public readonly string[] summaries =
    [
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", 
        "Sweltering", "Scorching"
    ];

    public async Task<IEnumerable<WeatherForecast>> GetWeatherForecastAsync()
    {
        // Simulate asynchronous loading to demonstrate streaming rendering
        await Task.Delay(500);

        return Enumerable.Range(1, 5).Select(index =>
            new WeatherForecast
            (
                DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
                Random.Shared.Next(-20, 55),
                summaries[Random.Shared.Next(summaries.Length)]
            ))
        .ToArray();
    }
}

Als de app een externe web-API moet aanroepen om de weergegevens te verkrijgen, kunt u een HTTP-client (HttpClient) injecteren om de gegevens aan te vragen:

internal sealed class ServerWeatherForecaster(HttpClient httpClient, 
    IHttpContextAccessor httpContextAccessor) : IWeatherForecaster
{
    public async Task<IEnumerable<WeatherForecast>> GetWeatherForecastAsync()
    {
        var httpContext = httpContextAccessor.HttpContext ??
            throw new InvalidOperationException("No HttpContext!");
        var accessToken = await httpContext.GetTokenAsync("access_token") ??
            throw new InvalidOperationException("No access_token was saved");
        using var request = 
            new HttpRequestMessage(HttpMethod.Get, "/weather-forecast");
        request.Headers.Authorization = new("Bearer", accessToken);
        using var response = await httpClient.SendAsync(request);
        response.EnsureSuccessStatusCode();

        return await response.Content.ReadFromJsonAsync<WeatherForecast[]>() ??
            throw new IOException("No weather forecast!");
    }
}

In nog een andere benadering kunt u een HTTP-clientfactory (IHttpClientFactory) in de ServerWeatherForecaster api injecteren en een externe web-API aanroepen met behulp van een benoemde HTTP-client met een tokenhandler. Zie Een web-API aanroepen vanuit een ASP.NET Core-app Blazorvoor meer informatie.

Als de app Gebruikmaakt van Microsoft Identity Platform met Microsoft Identity Web-pakketten voor Microsoft Entra ID (zie Een web-API aanroepen vanuit een ASP.NET Core-appBlazor), ServerWeatherForecaster ziet u hieronder hoe u een externe web-API-aanroep maakt. Het toegangstoken wordt automatisch aan de aanvraag gekoppeld.

internal sealed class ServerWeatherForecaster(IDownstreamApi downstreamApi) : IWeatherForecaster
{
    public async Task<IEnumerable<WeatherForecast>> GetWeatherForecastAsync()
    {
        using var response = await downstreamApi.CallApiForUserAsync("DownstreamApi",
            options =>
            {
                options.RelativePath = "/weather-forecast";
            });

        return await response.Content.ReadFromJsonAsync<WeatherForecast[]>() ??
            throw new IOException("No weather forecast!");
    }
}

Ongeacht de aanpak die door ServerWeatherForecaster wordt gebruikt om de gegevens te verkrijgen, onderhoudt het serverproject een beveiligd web API-eindpunt voor aanroepen van client-gegevens over het weer. Dit eindpunt resulteert in een ServerWeatherForecaster.GetWeatherForecastAsync aanroep op de server:

app.MapGet("/weather-forecast", (
    [FromServices] IWeatherForecaster WeatherForecaster) =>
{
    return WeatherForecaster.GetWeatherForecastAsync();
}).RequireAuthorization();

Met behulp van de voorgaande benadering zijn er twee systemen voor het leveren van beveiligde weergegevens aan de gebruiker:

• Wanneer de Weather-component op de server wordt weergegeven, wordt de methode van de ServerWeatherForecaster-service GetWeatherForecastAsync rechtstreeks gebruikt om de weergegevens te verkrijgen. De beveiliging van de gegevens wordt afgedwongen door het kenmerk van [Authorize]het onderdeel. Kortom, de beveiliging van de weergegevens wordt afgedwongen door het onderdeel.
• Wanneer het Weather onderdeel wordt weergegeven op de client, wordt de ClientWeatherForecaster service gebruikt om een web-API-aanroep te maken naar het beveiligde /weather-forecast eindpunt dat de RequireAuthorization extensiemethode toepast. Als de gebruiker de bevoegdheid heeft om toegang te krijgen tot weergegevens, gebruikt het eindpunt de ServerWeatherForecaster-service om GetWeatherForecastAsyncaan te roepen. De gegevens worden geretourneerd naar de client. Samengevat wordt de beveiliging van de weergegevens afgedwongen door het web-API-eindpunt van de server-app.

De voorgaande benadering werkt goed wanneer de beveiligingsvereisten van de web-API overeenkomen met de beveiligingsvereisten van het onderdeel. Hetzelfde autorisatiebeleid kan bijvoorbeeld worden toegepast op zowel het eindpunt van de web-API als het onderdeel.

Voor complexe scenario's is extra planning en implementatie vereist. Een serverweb-API met meerdere aanroepers met verschillende toegangsmachtigingen vereist bijvoorbeeld een geavanceerder autorisatiebeleid, een of meer aanvullende beleidsregels of aanvullende eindpunten met verschillende toegangsvereisten.

Wanneer u beveiliging inbouwt in apps die interactieve automatische rendering gebruiken, moet u er rekening mee houden dat de beveiliging die is geïmplementeerd voor de web-API-eindpunten van de server de service-implementatie van de server niet beveiligt die wordt gebruikt wanneer een onderdeel wordt weergegeven op de server en toegang krijgt tot gegevens via de service. Weeg zorgvuldig het verschil af tussen het openen van gegevens op de server tijdens SSR en het openen van de gegevens op een clientweb-API-aanvraag tijdens CSR. U kunt de beveiliging strategisch toepassen om onjuiste toegang tot gegevens te voorkomen.

Voorbeelden in de Blazor GitHub-voorbeeldopslagplaats () (dotnet/blazor-samplesdownloaden) die de aanpak demonstreren die in deze sectie wordt beschreven:

• BlazorWebAppOidc
• BlazorWebAppOidcBff
• BlazorWebAppEntra
• BlazorWebAppEntraBff

AuthenticationStateProvider is de onderliggende service die wordt gebruikt door het AuthorizeView-onderdeel en trapsgewijze verificatieservices om de verificatiestatus voor een gebruiker te verkrijgen.

AuthenticationStateProvider is de onderliggende service die wordt gebruikt door het AuthorizeView-onderdeel en CascadingAuthenticationState onderdeel om de verificatiestatus voor een gebruiker te verkrijgen.

@page "/claims-principal-data"
@using System.Security.Claims
@inject AuthenticationStateProvider AuthenticationStateProvider

<h1>ClaimsPrincipal Data</h1>

<button @onclick="GetClaimsPrincipalData">Get ClaimsPrincipal Data</button>

<p>@authMessage</p>

@if (claims.Any())
{
    <ul>
        @foreach (var claim in claims)
        {
            <li>@claim.Type: @claim.Value</li>
        }
    </ul>
}

<p>@surname</p>

@code {
    private string? authMessage;
    private string? surname;
    private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();

    private async Task GetClaimsPrincipalData()
    {
        var authState = await AuthenticationStateProvider
            .GetAuthenticationStateAsync();
        var user = authState.User;

        if (user.Identity is not null && user.Identity.IsAuthenticated)
        {
            authMessage = $"{user.Identity.Name} is authenticated.";
            claims = user.Claims;
            surname = user.FindFirst(c => c.Type == ClaimTypes.Surname)?.Value;
        }
        else
        {
            authMessage = "The user is NOT authenticated.";
        }
    }
}

In het voorgaande voorbeeld:

• ClaimsPrincipal.Claims retourneert de claims van de gebruiker (claims) voor weergave in de gebruikersinterface.
• De regel die de achternaam (surname) van de gebruiker ophaalt, roept ClaimsPrincipal.FindAll aan met een predicaat om de claims van de gebruiker te filteren.

@page "/claims-principal-data"
@using System.Security.Claims
@inject AuthenticationStateProvider AuthenticationStateProvider

<h1>ClaimsPrincipal Data</h1>

<button @onclick="GetClaimsPrincipalData">Get ClaimsPrincipal Data</button>

<p>@authMessage</p>

@if (claims.Any())
{
    <ul>
        @foreach (var claim in claims)
        {
            <li>@claim.Type: @claim.Value</li>
        }
    </ul>
}

<p>@surname</p>

@code {
    private string? authMessage;
    private string? surname;
    private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();

    private async Task GetClaimsPrincipalData()
    {
        var authState = await AuthenticationStateProvider
            .GetAuthenticationStateAsync();
        var user = authState.User;

        if (user.Identity is not null && user.Identity.IsAuthenticated)
        {
            authMessage = $"{user.Identity.Name} is authenticated.";
            claims = user.Claims;
            surname = user.FindFirst(c => c.Type == ClaimTypes.Surname)?.Value;
        }
        else
        {
            authMessage = "The user is NOT authenticated.";
        }
    }
}

@page "/cascade-auth-state"

<h1>Cascade Auth State</h1>

<p>@authMessage</p>

@code {
    private string authMessage = "The user is NOT authenticated.";

    [CascadingParameter]
    private Task<AuthenticationState>? authenticationState { get; set; }

    protected override async Task OnInitializedAsync()
    {
        if (authenticationState is not null)
        {
            var authState = await authenticationState;
            var user = authState?.User;

            if (user?.Identity is not null && user.Identity.IsAuthenticated)
            {
                authMessage = $"{user.Identity.Name} is authenticated.";
            }
        }
    }
}

@page "/cascade-auth-state"

<h1>Cascade Auth State</h1>

<p>@authMessage</p>

@code {
    private string authMessage = "The user is NOT authenticated.";

    [CascadingParameter]
    private Task<AuthenticationState>? authenticationState { get; set; }

    protected override async Task OnInitializedAsync()
    {
        if (authenticationState is not null)
        {
            var authState = await authenticationState;
            var user = authState?.User;

            if (user?.Identity is not null && user.Identity.IsAuthenticated)
            {
                authMessage = $"{user.Identity.Name} is authenticated.";
            }
        }
    }
}

Stel de Task<AuthenticationState>trapsgewijze parameter in met behulp van de AuthorizeRouteView en trapsgewijze verificatiestatusservices.

Wanneer u een Blazor-app maakt op basis van een van de Blazor projectsjablonen waarvoor verificatie is ingeschakeld, bevat de app de AuthorizeRouteView en de aanroep naar AddCascadingAuthenticationState in het volgende voorbeeld. Een Blazor-app aan de clientzijde bevat ook de vereiste serviceregistraties. Aanvullende informatie wordt weergegeven in de sectie Niet-geautoriseerde inhoud aanpassen met het Router onderdeel .

<Router ...>
    <Found ...>
        <AuthorizeRouteView RouteData="routeData" 
            DefaultLayout="typeof(Layout.MainLayout)" />
        ...
    </Found>
</Router>

Registreer in het Program-bestand trapsgewijze verificatiestatusservices:

builder.Services.AddCascadingAuthenticationState();

Stel de Task<AuthenticationState>trapsgewijze parameter in met behulp van de AuthorizeRouteView en CascadingAuthenticationState onderdelen.

Wanneer u een Blazor-app maakt op basis van een van de Blazor projectsjablonen waarvoor verificatie is ingeschakeld, bevat de app de AuthorizeRouteView en CascadingAuthenticationState onderdelen die in het volgende voorbeeld worden weergegeven. Een Blazor-app aan de clientzijde bevat ook de vereiste serviceregistraties. Aanvullende informatie wordt weergegeven in de sectie Niet-geautoriseerde inhoud aanpassen met het Router onderdeel .

<CascadingAuthenticationState>
    <Router ...>
        <Found ...>
            <AuthorizeRouteView RouteData="routeData" 
                DefaultLayout="typeof(MainLayout)" />
            ...
        </Found>
    </Router>
</CascadingAuthenticationState>

Voeg in een Blazor-app aan de clientzijde autorisatieservices toe aan het Program-bestand:

builder.Services.AddAuthorizationCore();

Voeg in een Blazor-app aan de clientzijde opties en autorisatieservices toe aan het Program-bestand:

builder.Services.AddOptions();
builder.Services.AddAuthorizationCore();

Razor-componenten van Blazor Web Appgeven nooit <NotAuthorized>-inhoud weer wanneer de autorisatie server-side mislukt tijdens statische server-side rendering (statische SSR). De ASP.NET Core-pijplijn verwerkt autorisatie op de server. Gebruik technieken aan de serverzijde om niet-geautoriseerde aanvragen te verwerken. Zie ASP.NET Core-rendermodi Blazorvoor meer informatie.

Resource-autorisatie

Als u gebruikers wilt machtigen voor resources, geeft u de routegegevens van de aanvraag door aan de parameter Resource van AuthorizeRouteView.

In de Router.Found inhoud voor een aangevraagde route:

<AuthorizeRouteView Resource="routeData" RouteData="routeData" 
    DefaultLayout="typeof(MainLayout)" />

Zie de sectie De verificatiestatus beschikbaar maken als trapsgewijze parametersectie voor meer informatie over hoe autorisatiestatusgegevens worden doorgegeven en gebruikt in procedurelogica.

Wanneer de AuthorizeRouteView de routegegevens voor de resource ontvangt, hebben autorisatiebeleidsregels toegang tot RouteData.PageType en RouteData.RouteValues waarmee aangepaste logica autorisatiebeslissingen kan nemen.

In het volgende voorbeeld wordt een EditUser-beleid gemaakt in AuthorizationOptions voor de autorisatieserviceconfiguratie (AddAuthorizationCore) van de app met de volgende logica:

• Bepalen of er een routewaarde bestaat met een sleutel van id. Als de sleutel bestaat, wordt de routewaarde opgeslagen in value.
• Sla in een variabele met de naam idvalue op als een tekenreeks of stel een lege tekenreekswaarde (string.Empty).
• Als id geen lege tekenreeks is, controleert u of aan het beleid wordt voldaan (retourneer true) als de waarde van de tekenreeks begint met EMP. Bevestig anders dat het beleid niet slaagt (retourneer false).

In het bestand Program:

• Naamruimten toevoegen voor Microsoft.AspNetCore.Components en System.Linq:

  using Microsoft.AspNetCore.Components;
  using System.Linq;
  

• Voeg het beleid toe:

  options.AddPolicy("EditUser", policy =>
      policy.RequireAssertion(context =>
      {
          if (context.Resource is RouteData rd)
          {
              var routeValue = rd.RouteValues.TryGetValue("id", out var value);
              var id = Convert.ToString(value, 
                  System.Globalization.CultureInfo.InvariantCulture) ?? string.Empty;
  
              if (!string.IsNullOrEmpty(id))
              {
                  return id.StartsWith("EMP", StringComparison.InvariantCulture);
              }
          }
  
          return false;
      })
  );
  

Het voorgaande voorbeeld is een overgesimplificeerd autorisatiebeleid, dat alleen wordt gebruikt om het concept met een werkend voorbeeld te demonstreren. Zie Autorisatie op basis van beleid in ASP.NET Core voor meer informatie over het maken en configureren van autorisatiebeleid.

In het volgende EditUser onderdeel heeft de resource bij /users/{id}/edit een routeparameter voor de id van de gebruiker ({id}). Het onderdeel maakt gebruik van het voorgaande EditUser autorisatiebeleid om te bepalen of de routewaarde voor id begint met EMP. Als id begint met EMP, slaagt het beleid en wordt de toegang tot het onderdeel geautoriseerd. Als id begint met een andere waarde dan EMP of als id een lege tekenreeks is, mislukt het beleid en wordt het onderdeel niet geladen.

EditUser.razor:

@page "/users/{id}/edit"
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize(Policy = "EditUser")]

<h1>Edit User</h1>

<p>The "EditUser" policy is satisfied! <code>Id</code> starts with 'EMP'.</p>

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

@page "/users/{id}/edit"
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize(Policy = "EditUser")]

<h1>Edit User</h1>

<p>The "EditUser" policy is satisfied! <code>Id</code> starts with 'EMP'.</p>

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

<Router ...>
    <Found ...>
        <AuthorizeRouteView ...>
            <NotAuthorized>
                ...
            </NotAuthorized>
            <Authorizing>
                ...
            </Authorizing>
        </AuthorizeRouteView>
    </Found>
</Router>

De inhoud van Authorized en NotAuthorized kan willekeurige items bevatten, zoals andere interactieve onderdelen.

builder.Services.AddCascadingAuthenticationState();

<CascadingAuthenticationState>
    <Router ...>
        <Found ...>
            <AuthorizeRouteView ...>
                <NotAuthorized>
                    ...
                </NotAuthorized>
                <Authorizing>
                    ...
                </Authorizing>
            </AuthorizeRouteView>
        </Found>
    </Router>
</CascadingAuthenticationState>

De inhoud van NotFound, Authorizeden NotAuthorized kan willekeurige items bevatten, zoals andere interactieve onderdelen.

@page "/procedural-logic"
@inject IAuthorizationService AuthorizationService

<h1>Procedural Logic Example</h1>

<button @onclick="@DoSomething">Do something important</button>

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

    private async Task DoSomething()
    {
        if (authenticationState is not null)
        {
            var authState = await authenticationState;
            var user = authState?.User;

            if (user is not null)
            {
                if (user.Identity is not null && user.Identity.IsAuthenticated)
                {
                    // ...
                }

                if (user.IsInRole("Admin"))
                {
                    // ...
                }

                if ((await AuthorizationService.AuthorizeAsync(user, "content-editor"))
                    .Succeeded)
                {
                    // ...
                }
            }
        }
    }
}

@page "/procedural-logic"
@inject IAuthorizationService AuthorizationService

<h1>Procedural Logic Example</h1>

<button @onclick="@DoSomething">Do something important</button>

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

    private async Task DoSomething()
    {
        if (authenticationState is not null)
        {
            var authState = await authenticationState;
            var user = authState?.User;

            if (user is not null)
            {
                if (user.Identity is not null && user.Identity.IsAuthenticated)
                {
                    // ...
                }

                if (user.IsInRole("Admin"))
                {
                    // ...
                }

                if ((await AuthorizationService.AuthorizeAsync(user, "content-editor"))
                    .Succeeded)
                {
                    // ...
                }
            }
        }
    }
}

• Bronnen aan de serverzijde en Blazor Web App
  • Quickstart: Aanmelding met Microsoft toevoegen aan een ASP.NET Core-web-app
  • Quickstart: Een ASP.NET Core-web-API beveiligen met Microsoft Identity Platform
  • Configureer ASP.NET Core voor gebruik met proxyservers en load balancers: bevat richtlijnen voor:
    • Middleware voor doorgestuurde headers gebruiken om informatie over het HTTPS-schema over proxyservers en interne netwerken te behouden.
    • Aanvullende scenario's en use cases, waaronder handmatige schemaconfiguratie, wijzigingen in aanvraagpaden voor de juiste aanvraagroutering en het doorsturen van het aanvraagschema voor Linux- en niet-IIS-omgekeerde proxy's.
• Documentatie voor Microsoft Identity Platform
  • Overview
  • OAuth 2.0- en OpenID Connect-protocollen op het Microsoft Identity Platform
  • Microsoft Identity Platform en OAuth 2.0-autorisatiecodestroom
  • Id-tokens van Microsoft Identity Platform
  • Toegangstokens voor Microsoft Identity Platform
• ASP.NET Kernbeveiligingsonderwerpen
• Windows-verificatie configureren in ASP.NET Core
• IHttpContextAccessor/HttpContext in ASP.NET Core-apps Blazor
• Een aangepaste versie van de JavaScript-bibliotheek Authentication.MSAL bouwen
• Geweldig Blazor: Authenticatie-community voorbeeldkoppelingen
• ASP.NET Kernverificatie Blazor Hybrid en -autorisatie

• Blazor-resources aan de serverzijde
  • Quickstart: Aanmelding met Microsoft toevoegen aan een ASP.NET Core-web-app
  • Quickstart: Een ASP.NET Core-web-API beveiligen met Microsoft Identity Platform
  • Configureer ASP.NET Core voor gebruik met proxyservers en load balancers: bevat richtlijnen voor:
    • Middleware voor doorgestuurde headers gebruiken om informatie over het HTTPS-schema over proxyservers en interne netwerken te behouden.
    • Aanvullende scenario's en use cases, waaronder handmatige schemaconfiguratie, wijzigingen in aanvraagpaden voor de juiste aanvraagroutering en het doorsturen van het aanvraagschema voor Linux- en niet-IIS-omgekeerde proxy's.
• Documentatie voor Microsoft Identity Platform
  • Overview
  • OAuth 2.0- en OpenID Connect-protocollen op het Microsoft Identity Platform
  • Microsoft Identity Platform en OAuth 2.0-autorisatiecodestroom
  • Id-tokens van Microsoft Identity Platform
  • Toegangstokens voor Microsoft Identity Platform
• ASP.NET Kernbeveiligingsonderwerpen
• IHttpContextAccessor/HttpContext in ASP.NET Core-apps Blazor
• Windows-verificatie configureren in ASP.NET Core
• Een aangepaste versie van de JavaScript-bibliotheek Authentication.MSAL bouwen
• Geweldig Blazor: Authenticatie-community voorbeeldkoppelingen