Suporte ao GDPR (Regulamento Geral de Proteção de Dados) da UE no ASP.NET Core Blazor

Este artigo explica como implementar o suporte para requisitos do Regulamento Geral sobre a Proteção de Dados (GDPR) da EU .

No arquivo Program:

• Adicione a configuração CookiePolicyOptions para exigir o consentimento do usuário para cookies não essenciais e defina a política de mesmo site para nenhum. Para obter mais informações, consulte Trabalhar com cookies SameSite no ASP.NET Core.
• Adicione a implementação padrão para o serviço IHttpContextAccessor chamando AddHttpContextAccessor.

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

    options.MinimumSameSitePolicy = SameSiteMode.None;
});

builder.Services.AddHttpContextAccessor();

No arquivo Program antes da chamada para MapRazorComponents, adicione Cookie Middleware de Política chamando UseCookiePolicy:

app.UseCookiePolicy();

Adicione o componente CookieConsent a seguir para lidar com consentimento de política de cookie.

O componente usa um arquivo JavaScript colocado, chamado CookieConsent.razor.js, para carregar um módulo. Confirme ou ajuste o caminho para o arquivo agrupado no método OnAfterRenderAsync. O componente a seguir pressupõe que o componente e seu arquivo JavaScript complementar estão na pasta Components do aplicativo.

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

Adicione o arquivo JavaScript colocado a seguir para manter a função acceptPolicy em um módulo JavaScript.

CookieConsent.razor.js:

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

Dentro das marcações de <main>Razor do componente MainLayout (MainLayout.razor), adicione o componente CookieConsent:

<CookieConsent />

Personalizar o valor de consentimento do cookie

Especifique o valor de consentimento cookie atribuindo uma cadeia de caracteres personalizada a CookiePolicyOptions.ConsentCookieValue. O exemplo a seguir altera o valor padrão de "yes" para "true":

options.ConsentCookieValue = "true";

Em aplicativos Blazor WebAssembly, o armazenamento local é uma abordagem conveniente para manter a aceitação da política cookie de um site pelo usuário. Veja a seguir uma demonstração dessa abordagem.

Se o aplicativo ainda não tiver uma pasta Shared para componentes compartilhados, adicione uma pasta Shared ao aplicativo.

Adicione o namespace para componentes compartilhados ao arquivo _Imports.razor. No exemplo a seguir, o namespace do aplicativo é BlazorSamplee o namespace da pasta compartilhada é BlazorSample.Shared:

@using BlazorSample.Shared

Adicione o seguinte componente CookieConsent para tratar do consentimento de política 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)
            {
            }
        }
    }
}

Adicione o seguinte arquivo JavaScript agrupado para manter as funções setCookiePolicyAccepted e getCookiePolicyAccepted em um módulo em 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');
}

No exemplo anterior, você pode alterar o nome do item de armazenamento local e o valor de "CookiePolicyAccepted" e "yes" para quaisquer valores preferenciais. Se você alterar um ou ambos os valores, atualize ambas as funções.

Dentro da marcação <main>Razor do componente MainLayout (Layout/MainLayout.razor), adicione o componente CookieConsent:

<CookieConsent />

Recursos adicionais

• Microsoft Trust Center: proteja privacy individuais com serviços de nuvem da Microsoft: GDPR
• Comissão Europeia: Proteção de dados explicada