Supporto del Regolamento generale sulla protezione dei dati dell'UE (GDPR) in ASP.NET Core Blazor

Questo articolo spiega come implementare il supporto per i requisiti del Regolamento generale sulla protezione dei dati (GDPR) dell'UE.

Nel file Program:

• Aggiungere la configurazione CookiePolicyOptions per richiedere il consenso dell'utente per i cookie non essenziali e impostare la policy di same-site su 'none'. Per ulteriori informazioni, vedere Lavorare con i cookie SameSite in ASP.NET Core.
• Aggiungere l'implementazione predefinita per il servizio IHttpContextAccessor chiamando AddHttpContextAccessor.

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

    options.MinimumSameSitePolicy = SameSiteMode.None;
});

builder.Services.AddHttpContextAccessor();

Nel file Program prima della chiamata a MapRazorComponentsaggiungere Cookie Policy Middleware chiamando UseCookiePolicy:

app.UseCookiePolicy();

Aggiungi il seguente componente CookieConsent per gestire il consenso alla policy cookie.

Il componente usa un file JavaScript collocato, denominato CookieConsent.razor.js, per caricare un modulo. Confermare o modificare il percorso del file collocato nel metodo OnAfterRenderAsync. Il componente seguente presuppone che il componente e il relativo file JavaScript complementare si trovino nella cartella Components dell'app.

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

Aggiungere il seguente file JavaScript collocato per preservare la funzione acceptPolicy in un modulo JavaScript.

CookieConsent.razor.js:

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

Nel markup <main>Razor del componente MainLayout (MainLayout.razor), aggiungere il componente CookieConsent:

<CookieConsent />

Personalizzare il valore di consenso cookie

Specificare il valore di consenso cookie assegnando una stringa personalizzata a CookiePolicyOptions.ConsentCookieValue. Nell'esempio seguente viene modificato il valore predefinito "yes" in "true":

options.ConsentCookieValue = "true";

Nelle app Blazor WebAssembly, l'archiviazione locale di è un approccio pratico per mantenere l'accettazione da parte di un utente della policy di un sito cookie. Il seguente metodo dimostra l'approccio.

Se l'app non ha già una cartella Shared per i componenti condivisi, aggiungere una cartella Shared all'app.

Aggiungere lo spazio dei nomi per i componenti condivisi al file _Imports.razor. Nell'esempio seguente lo spazio dei nomi dell'app è BlazorSamplee lo spazio dei nomi della cartella condivisa è BlazorSample.Shared:

@using BlazorSample.Shared

Aggiungi il seguente componente CookieConsent per gestire il consenso alla policy cookie.

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

Aggiungi il seguente file JavaScript collocato per mantenere le funzioni setCookiePolicyAccepted e getCookiePolicyAccepted in un modulo JavaScript.

Shared/CookieConsent.razor.js:

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

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

Nell'esempio precedente è possibile modificare il nome dell'elemento di archiviazione locale e il valore da "CookiePolicyAccepted" e "yes" a qualsiasi valore preferito. Se si modifica uno o entrambi i valori, aggiornare entrambe le funzioni.

Nel markup <main>Razor del componente MainLayout (Layout/MainLayout.razor), aggiungere il componente CookieConsent:

<CookieConsent />

Risorse aggiuntive

• Centro protezione Microsoft: Proteggere la privacy individuale con i servizi cloud di Microsoft: GDPR
• Commissione europea: La protezione dei dati spiegata