Ondersteuning voor de Algemene Verordening Gegevensbescherming (AVG) van de EU in ASP.NET Core Blazor

In dit artikel wordt uitgelegd hoe u ondersteuning implementeert voor algemene verordening gegevensbescherming (AVG) vereisten.

In het bestand Program:

• Voeg CookiePolicyOptions configuratie toe om gebruikerstoestemming voor niet-essentiële cookies te vereisen en hetzelfde sitebeleid in te stellen op geen. Zie Werken met SameSite-cookies in ASP.NET Corevoor meer informatie.
• Voeg de standaard implementatie voor de IHttpContextAccessor-service toe door AddHttpContextAccessoraan te roepen.

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

    options.MinimumSameSitePolicy = SameSiteMode.None;
});

builder.Services.AddHttpContextAccessor();

Voeg in het Program bestand vóór de aanroep naar MapRazorComponentsCookie Policy Middleware toe door UseCookiePolicyaan te roepen:

app.UseCookiePolicy();

Voeg het volgende CookieConsent onderdeel toe om cookie beleidstoestemming af te handelen.

Het onderdeel maakt gebruik van een javaScript-bestand, met de naam CookieConsent.razor.js, om een module te laden. Bevestig of pas het pad naar het samenvoegde bestand in de methode OnAfterRenderAsync aan. In het volgende onderdeel wordt ervan uitgegaan dat het onderdeel en het bijbehorende JavaScript-bestand zich in de map Components van de app bevinden.

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

Voeg het volgende JavaScript-bestand toe om de acceptPolicy-functie in een JavaScript-module te onderhouden.

CookieConsent.razor.js:

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

Voeg binnen <main>Razor opmaak van het MainLayout onderdeel (MainLayout.razor) het CookieConsent-onderdeel toe:

<CookieConsent />

De cookie toestemmingswaarde aanpassen

Geef de cookie toestemmingswaarde op door een aangepaste tekenreeks toe te wijzen aan CookiePolicyOptions.ConsentCookieValue. In het volgende voorbeeld wordt de standaardwaarde van 'yes' gewijzigd in 'true':

options.ConsentCookieValue = "true";

In Blazor WebAssembly apps is lokale opslag een handige manier om de acceptatie van cookie beleid van een gebruiker bij te houden. De volgende benadering laat de benadering zien.

Als de app nog geen Shared map voor gedeelde onderdelen heeft, voegt u een Shared map toe aan de app.

Voeg de naamruimte voor gedeelde onderdelen toe aan het _Imports.razor-bestand. In het volgende voorbeeld wordt de naamruimte van de app BlazorSampleen wordt de naamruimte van de gedeelde map BlazorSample.Shared:

@using BlazorSample.Shared

Voeg het volgende CookieConsent onderdeel toe om cookie beleidstoestemming af te handelen.

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

Voeg het volgende gealloceerde JavaScript-bestand toe om de functies setCookiePolicyAccepted en getCookiePolicyAccepted in een JavaScript-module te behouden.

Shared/CookieConsent.razor.js:

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

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

In het voorgaande voorbeeld kunt u de naam van het lokale opslagitem en de waarde wijzigen van "CookiePolicyAccepted" en "yes" in alle voorkeurswaarden. Als u een of beide waarden wijzigt, werkt u beide functies bij.

Voeg binnen <main>Razor opmaak van het MainLayout onderdeel (Layout/MainLayout.razor) het CookieConsent-onderdeel toe:

<CookieConsent />

Aanvullende informatiebronnen

• Vertrouwenscentrum van Microsoft: Individuele privacy beschermen met cloudservices van Microsoft: AVG
• Europese Commissie: Gegevensbescherming uitgelegd