Udostępnij za pośrednictwem

Wsparcie dla ogólnego rozporządzenia o ochronie danych (RODO) w ASP.NET Core Blazor

  • Artykuł

Notatka

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, sprawdź wersję tego artykułuw .NET 9 .

Ostrzeżenie

Ta wersja ASP.NET Core nie jest już obsługiwana. Aby uzyskać więcej informacji, zobacz .NET i .NET Core Support Policy. Aby zapoznać się z bieżącą wersją, sprawdź wersję tego artykułuw .NET 9 .

Ważny

Te informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany, zanim zostanie wydany komercyjnie. Firma Microsoft nie udziela żadnych gwarancji, wyraźnych ani domniemanych, w odniesieniu do podanych tutaj informacji.

Aby zapoznać się z bieżącą wersją, sprawdź wersję tego artykułuw .NET 9 .

W tym artykule wyjaśniono, jak wdrożyć wsparcie dla wymagania ogólnego rozporządzenia o ochronie danych (RODO).

W pliku Program:

  • Dodaj konfigurację CookiePolicyOptions, aby wymagać zgody użytkownika na pliki cookie, które nie są niezbędne, i ustaw politykę tej samej witryny na brak. Aby uzyskać więcej informacji, zobacz Work with SameSite cookies in ASP.NET Core(Praca z plikami cookie sameSite w usłudze ASP.NET Core).
  • Dodaj domyślną implementację usługi IHttpContextAccessor, wywołując AddHttpContextAccessor.
builder.Services.Configure<CookiePolicyOptions>(options =>
{
    options.CheckConsentNeeded = context => true;

    options.MinimumSameSitePolicy = SameSiteMode.None;
});

builder.Services.AddHttpContextAccessor();

W pliku Program przed wywołaniem MapRazorComponentsdodaj system zarządzania politykami Cookie, wywołując UseCookiePolicy:

W pliku Program przed wywołaniem MapBlazorHubdodaj system zarządzania politykami Cookie, wywołując UseCookiePolicy:

app.UseCookiePolicy();

Dodaj następujący składnik CookieConsent do obsługi zgody na zasady cookie.

Składnik używa umieszczonego razem pliku JavaScript, nazwanego , do załadowania modułu. Potwierdź lub dostosuj ścieżkę do współlokowanego pliku w metodzie OnAfterRenderAsync. Poniższy składnik zakłada, że składnik i jego towarzyszący plik JavaScript znajdują się w folderze Components aplikacji.

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

Dodaj następujący stronicowany plik JavaScript, aby zachować funkcję acceptPolicy w module JavaScript.

CookieConsent.razor.js:

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

W znaczniku <main>Razor składnika MainLayout (MainLayout.razor) dodaj składnik CookieConsent:

<CookieConsent />

Określ wartość zgody cookie, przypisując ciąg niestandardowy do CookiePolicyOptions.ConsentCookieValue. Poniższy przykład zmienia domyślną wartość "yes" na "true":

options.ConsentCookieValue = "true";

W aplikacjach Blazor WebAssembly, lokalne przechowywanie jest wygodnym podejściem do utrzymania akceptacji polityki cookie przez użytkownika strony. Poniższa metoda obrazuje podejście.

Jeśli aplikacja nie ma jeszcze folderu Shared dla składników udostępnionych, dodaj folder Shared do aplikacji.

Dodaj przestrzeń nazw dla składników udostępnionych do pliku _Imports.razor. W poniższym przykładzie przestrzeń nazw aplikacji jest BlazorSample, a przestrzeń nazw folderu udostępnionego jest BlazorSample.Shared:

@using BlazorSample.Shared

Dodaj następujący składnik CookieConsent do obsługi zgody na zasady 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)
            {
            }
        }
    }
}

Dodaj następujący plik JavaScript umieszczony obok, aby zachować funkcje setCookiePolicyAccepted i getCookiePolicyAccepted w 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');
}

W poprzednim przykładzie można zmienić nazwę lokalnego elementu magazynu i wartość z "CookiePolicyAccepted" i "yes" na dowolne preferowane wartości. Jeśli zmienisz jedną lub obie wartości, zaktualizuj obie funkcje.

W znaczniku <main>Razor składnika MainLayout (Layout/MainLayout.razor) dodaj składnik CookieConsent:

<CookieConsent />

Dodatkowe zasoby