Compatibilidad con el Reglamento general de protección de datos (RGPD) de la UE en ASP.NET Core Blazor

En este artículo se explica cómo implementar la compatibilidad con Reglamento general de protección de datos de la EU (GDPR) requisitos.

En el archivo Program:

• Agregue la configuración CookiePolicyOptions para requerir el consentimiento del usuario para las cookies no esenciales y establezca la política SameSite en ninguno. Para obtener más información, consulte Trabajar con cookies SameSite en ASP.NET Core.
• Agregue la implementación predeterminada para el servicio IHttpContextAccessor llamando a AddHttpContextAccessor.

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

    options.MinimumSameSitePolicy = SameSiteMode.None;
});

builder.Services.AddHttpContextAccessor();

En el archivo Program antes de la llamada a MapRazorComponents, agregue Cookie Policy Middleware llamando a UseCookiePolicy:

app.UseCookiePolicy();

Agregue el siguiente componente CookieConsent para manejar el consentimiento de la política cookie.

El componente utiliza un archivo JavaScript ubicado, denominado CookieConsent.razor.js, para cargar un módulo. Confirme o ajuste la ruta de acceso al archivo intercalado en el método OnAfterRenderAsync. En el componente siguiente se supone que el componente y su archivo JavaScript complementario están en la carpeta Components de la aplicación.

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

Agregue el archivo JavaScript correspondiente para mantener la función acceptPolicy en un módulo de JavaScript.

CookieConsent.razor.js:

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

En el etiquetado <main>Razor del componente MainLayout (MainLayout.razor), agregue el componente CookieConsent:

<CookieConsent />

Personalice el valor de cookie consentimiento

Especifique el valor de consentimiento cookie asignando una cadena personalizada a CookiePolicyOptions.ConsentCookieValue. En el ejemplo siguiente se cambia el valor predeterminado de "yes" a "true":

options.ConsentCookieValue = "true";

En las Blazor WebAssembly aplicaciones, almacenamiento local es un enfoque cómodo para mantener que un usuario acepte la política cookie de un sitio. El enfoque siguiente muestra el método.

Si la aplicación aún no tiene una carpeta Shared para los componentes compartidos, agregue una carpeta Shared a la aplicación.

Agregue el espacio de nombres para los componentes compartidos al archivo _Imports.razor. En el ejemplo siguiente, el espacio de nombres de la aplicación es BlazorSampley el espacio de nombres de la carpeta compartida es BlazorSample.Shared:

@using BlazorSample.Shared

Agregue el siguiente componente CookieConsent para manejar el consentimiento de la 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)
            {
            }
        }
    }
}

Agregue el archivo JavaScript correspondiente para mantener la función en setCookiePolicyAccepted un getCookiePolicyAccepted módulo de 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');
}

En el ejemplo anterior, puede cambiar el nombre del elemento de almacenamiento local y el valor de "CookiePolicyAccepted" y "yes" a los valores preferidos. Si cambia uno o ambos valores, actualice ambas funciones.

Dentro del marcado <main>Razor del componente MainLayout (Layout/MainLayout.razor), agregue el componente CookieConsent.

<CookieConsent />

Recursos adicionales

• Centro de confianza de Microsoft: proteja privacy individuales con servicios en la nube de Microsoft: RGPD
• Comisión Europea: Protección de datos explicada