Dela via

EU:s allmänna dataskyddsförordning (GDPR) stöd i ASP.NET Core Blazor

  • Artikel

Notera

Det här är inte den senaste versionen av den här artikeln. För den aktuella utgåvan, se .NET 9-versionen av den här artikeln .

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i .NET och .NET Core Support Policy. För den aktuella utgåvan, se .NET 9-versionen av den här artikeln .

Viktig

Den här informationen gäller en förhandsversionsprodukt som kan ändras avsevärt innan den släpps kommersiellt. Microsoft lämnar inga garantier, uttryckliga eller underförstådda, med avseende på den information som tillhandahålls här.

För den aktuella utgåvan, se .NET 9-versionen av den här artikeln .

I den här artikeln beskrivs hur du implementerar stöd för EU:s allmänna dataskyddsförordning (GDPR) krav.

I filen Program:

builder.Services.Configure<CookiePolicyOptions>(options =>
{
    options.CheckConsentNeeded = context => true;

    options.MinimumSameSitePolicy = SameSiteMode.None;
});

builder.Services.AddHttpContextAccessor();

I filen Program före anropet till MapRazorComponentslägger du till Cookie Principmellanprogram genom att anropa UseCookiePolicy:

I filen Program före anropet till MapBlazorHublägger du till Cookie Principmellanprogram genom att anropa UseCookiePolicy:

app.UseCookiePolicy();

Lägg till följande CookieConsent komponent för att hantera cookie principmedgivande.

Komponenten använder en sammanställd JavaScript-fil, med namnet CookieConsent.razor.js, för att läsa in en modul. Bekräfta eller justera sökvägen till den samlokaliserade filen i OnAfterRenderAsync-metoden. Följande komponent förutsätter att komponenten och dess tillhörande JavaScript-fil finns i mappen Components i appen.

CookieConsent.razor:

@using Microsoft.AspNetCore.Http.Features
@using Microsoft.AspNetCore.Http
@implements IAsyncDisposable
@inject IHttpContextAccessor Http
@inject IJSRuntime JS

@if (showBanner)
{
    <div id="cookieConsent" class="alert alert-info alert-dismissible fade show" 
        role="alert">
        Use this space to summarize your privacy and cookie use policy.
        <a href="/privacy">Privacy Policy</a>
        <button type="button" @onclick="AcceptPolicy" class="accept-policy close" 
            data-bs-dismiss="alert" aria-label="Close" 
            data-cookie-string="@cookieString">
            Accept
        </button>
    </div>
}
@code {
    private IJSObjectReference? module;
    private ITrackingConsentFeature? consentFeature;
    private bool showBanner;
    private string? cookieString;

    protected override void OnInitialized()
    {
        consentFeature = Http.HttpContext?.Features.Get<ITrackingConsentFeature>();
        showBanner = !consentFeature?.CanTrack ?? false;
        cookieString = consentFeature?.CreateConsentCookie();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import",
                "./Components/CookieConsent.razor.js");
        }
    }

    private async Task AcceptPolicy()
    {
        if (module is not null)
        {
            await module.InvokeVoidAsync("acceptPolicy", cookieString);
            showBanner = false;
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            try
            {
                await module.DisposeAsync();
            }
            catch (JSDisconnectedException)
            {
            }
        }
    }
}

Lägg till följande samplacerade JavaScript-fil för att underhålla funktionen acceptPolicy i en JavaScript-modul.

CookieConsent.razor.js:

export function acceptPolicy(cookieString) {
  document.cookie = cookieString;
}

Lägg till <main>-komponenten i RazorMainLayout-markering för komponenten MainLayout.razor (CookieConsent):

<CookieConsent />

Ange medgivandevärdet cookie genom att välja en anpassad sträng till CookiePolicyOptions.ConsentCookieValue. I följande exempel ändras standardvärdet "yes" till "true":

options.ConsentCookieValue = "true";

I Blazor WebAssembly appar är lokal lagring en praktisk metod för att upprätthålla en användares godkännande av en webbplatsens cookie policy. Följande metod demonstrerar tillvägagångssättet.

Om appen inte redan har en Shared mapp för delade komponenter lägger du till en Shared mapp i appen.

Lägg till namnområdet för delade komponenter i _Imports.razor-filen. I följande exempel är appens namnområde BlazorSampleoch den delade mappens namnområde är BlazorSample.Shared:

@using BlazorSample.Shared

Lägg till följande CookieConsent komponent för att hantera cookie principmedgivande.

Shared/CookieConsent.razor:

@implements IAsyncDisposable
@inject IJSRuntime JS

@if (showBanner)
{
    <div id="cookieConsent" class="alert alert-info alert-dismissible fade show"
        role="alert">
        Use this space to summarize your privacy and cookie use policy.
        <a href="/privacy">Privacy Policy</a>
        <button type="button" @onclick="AcceptPolicy" class="accept-policy close"
            data-bs-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">Accept</span>
        </button>
    </div>
}
@code {
    private IJSObjectReference? module;
    private bool showBanner = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import",
                "./Shared/CookieConsent.razor.js");
            showBanner = !await module.InvokeAsync<bool>("getCookiePolicyAccepted");
            StateHasChanged();
        }
    }

    private async Task AcceptPolicy()
    {
        if (module is not null)
        {
            await module.InvokeVoidAsync("setCookiePolicyAccepted");
            showBanner = false;
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            try
            {
                await module.DisposeAsync();
            }
            catch (JSDisconnectedException)
            {
            }
        }
    }
}

Lägg till följande placerade JavaScript-fil för att behålla funktionerna setCookiePolicyAccepted och getCookiePolicyAccepted i en JavaScript-modul.

Shared/CookieConsent.razor.js:

export function getCookiePolicyAccepted() {
  const cookiePolicy = localStorage.getItem('CookiePolicyAccepted');
  return cookiePolicy === 'yes' ? true : false;
}

export function setCookiePolicyAccepted() {
  localStorage.setItem('CookiePolicyAccepted', 'yes');
}

I föregående exempel kan du ändra namnet på det lokala lagringsobjektet och värdet från "CookiePolicyAccepted" och "yes" till önskade värden. Om du ändrar ett eller båda värdena uppdaterar du båda funktionerna.

Lägg till <main>-komponenten i RazorMainLayout-markering för komponenten Layout/MainLayout.razor (CookieConsent):

<CookieConsent />

Ytterligare resurser