Unterstützung der EU-Datenschutz-Grundverordnung (DSGVO) in ASP.NET Core Blazor

In diesem Artikel wird erläutert, wie die Unterstützung bei den Anforderungen der EU-Datenschutz-Grundverordnung (DSGVO) implementiert werden kann.

In der Datei Program:

• Fügen Sie die CookiePolicyOptions-Konfiguration hinzu, um die Zustimmung des Benutzers für nicht unbedingt erforderliche Cookies zu verlangen, und setzen Sie die Same-Site-Richtlinie auf „none". Weitere Informationen finden Sie unter Arbeiten mit SameSite-Cookies in ASP.NET Core.
• Fügen Sie die Standardimplementierung für den IHttpContextAccessor-Dienst hinzu, indem Sie AddHttpContextAccessor aufrufen.

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

    options.MinimumSameSitePolicy = SameSiteMode.None;
});

builder.Services.AddHttpContextAccessor();

Fügen Sie in der Program-Datei vor dem Aufruf von MapRazorComponentsCookie Middleware für Richtlinien hinzu, indem Sie UseCookiePolicy aufrufen:

app.UseCookiePolicy();

Fügen Sie die folgende CookieConsent-Komponente hinzu, um cookie-Richtlinienzustimmung zu behandeln.

Die Komponente verwendet eine verbundene JavaScript-Datei, die CookieConsent.razor.js genannt wird, um ein Modul zu laden. Bestätigen oder anpassen Sie den Pfad zur verbundenen Datei in der OnAfterRenderAsync-Methode. Es wird davon ausgegangen, dass sich die folgende Komponente und ihre zugehörige JavaScript-Datei im Ordner Components der App befinden.

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

Fügen Sie die folgende verbundene JavaScript-Datei hinzu, um die acceptPolicy-Funktion in einem JavaScript-Modul zu verwalten.

CookieConsent.razor.js:

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

Fügen Sie im <main>Razor-Markup der MainLayout-Komponente (MainLayout.razor) die CookieConsent-Komponente hinzu:

<CookieConsent />

Anpassen des cookie Zustimmungswerts

Geben Sie den cookie Zustimmungswert an, indem Sie CookiePolicyOptions.ConsentCookieValue eine benutzerdefinierte Zeichenfolge zuweisen. Im folgenden Beispiel wird der Standardwert von „yes“ in „true“ geändert:

options.ConsentCookieValue = "true";

In Blazor WebAssembly Apps ist lokale Speicher- ein praktischer Ansatz, um die Akzeptanz der cookie-Richtlinie eines Benutzers aufrechtzuerhalten. Der folgende Ansatz verdeutlicht die Vorgehensweise.

Wenn die App noch nicht über einen Shared-Ordner für freigegebene Komponenten verfügt, fügen Sie der App einen Shared-Ordner hinzu.

Fügen Sie den Namespace für freigegebene Komponenten zur _Imports.razor-Datei hinzu. Im folgenden Beispiel ist der Namensraum der App BlazorSample, und der Namensraum des freigegebenen Ordners ist BlazorSample.Shared.

@using BlazorSample.Shared

Fügen Sie die folgende CookieConsent-Komponente hinzu, um cookie-Richtlinienzustimmung zu behandeln.

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

Fügen Sie die folgende kolokalisierte JavaScript-Datei hinzu, um die Funktionen setCookiePolicyAccepted und getCookiePolicyAccepted in einem JavaScript-Modul beizubehalten.

Shared/CookieConsent.razor.js:

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

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

Im vorherigen Beispiel können Sie den Namen des lokalen Speicherelements und den Wert von "CookiePolicyAccepted" und "yes" in beliebige bevorzugte Werte ändern. Wenn Sie einen oder beide Werte ändern, aktualisieren Sie beide Funktionen.

Fügen Sie im <main>Razor-Markup der MainLayout-Komponente (Layout/MainLayout.razor) die CookieConsent-Komponente hinzu:

<CookieConsent />

Zusätzliche Ressourcen

• Microsoft Trust Center: Schutz individueller Privatsphäre mit Clouddiensten von Microsoft: DSGVO-
• Europäische Kommission: Datenschutz erklärt