Prise en charge du règlement général sur la protection des données de l'UE (GDPR) dans ASP.NET Core Blazor

Cet article explique comment mettre en œuvre la satisfaction aux exigences du règlement général sur la protection des données (RGPD) de l’UE .

Dans le fichier Program :

• Ajoutez la configuration CookiePolicyOptions pour exiger le consentement de l'utilisateur pour les cookies non essentiels et définissez la politique SameSite sur none. Pour plus d'informations, voir Travailler avec les cookies SameSite dans ASP.NET Core.
• Ajoutez l'implémentation par défaut du service IHttpContextAccessor en appelant AddHttpContextAccessor.

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

    options.MinimumSameSitePolicy = SameSiteMode.None;
});

builder.Services.AddHttpContextAccessor();

Dans le fichier Program précédant l'appel à MapRazorComponents, ajoutez l'intergiciel de stratégie Cookie en appelant UseCookiePolicy :

app.UseCookiePolicy();

Ajoutez le composant CookieConsent suivant pour gérer le consentement de la politique cookie.

Le composant utilise un fichier JavaScript colocalisé, nommé CookieConsent.razor.js, pour charger un module. Confirmez ou modifiez le chemin d'accès au fichier colocalisé dans la méthode OnAfterRenderAsync. Le composant suivant suppose que le composant et son fichier JavaScript complémentaire se trouvent dans le dossier Components de l'application.

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

Ajoutez le fichier JavaScript colocalisé suivant pour maintenir la fonction acceptPolicy dans un module JavaScript.

CookieConsent.razor.js :

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

Dans le balisage <main>Razor du composant MainLayout (MainLayout.razor), ajoutez le composant CookieConsent :

<CookieConsent />

Personnaliser la valeur de consentement cookie

Spécifiez la valeur de consentement cookie en attribuant une chaîne personnalisée à CookiePolicyOptions.ConsentCookieValue. L'exemple suivant modifie la valeur par défaut de « yes » en « true » :

options.ConsentCookieValue = "true";

Dans les applications Blazor WebAssembly, le stockage local est une approche pratique pour maintenir l’acceptation par l’utilisateur de la politique cookie d’un site. L'approche suivante démontre l'approche.

Si l'application ne dispose pas déjà d'un dossier Shared pour les composants partagés, ajoutez un dossier Shared à l'application.

Ajoutez l'espace de noms pour les composants partagés au dossier _Imports.razor. Dans l'exemple suivant, l'espace de noms de l'application est BlazorSample, et l'espace de noms du dossier partagé est BlazorSample.Shared :

@using BlazorSample.Shared

Ajoutez le composant CookieConsent suivant pour gérer le consentement de la politique 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)
            {
            }
        }
    }
}

Ajoutez le fichier JavaScript colocalisé suivant pour maintenir les fonctions setCookiePolicyAccepted et getCookiePolicyAccepted dans un module 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');
}

Dans l'exemple précédent, vous pouvez modifier le nom de l'élément de stockage local et la valeur de « CookiePolicyAccepted » et « yes » pour les remplacer par les valeurs de votre choix. Si vous modifiez l'une des valeurs ou les deux, mettez à jour les deux fonctions.

À l'intérieur du balisage <main>Razor du composant MainLayout (Layout/MainLayout.razor), ajoutez le composant CookieConsent :

<CookieConsent />

Ressources supplémentaires

• Centre de gestion de la confidentialité Microsoft : Protéger la confidentialité individuelle avec les services cloud de Microsoft : RGPD
• Commission européenne : Explication de la protection des données