Az EU általános adatvédelmi rendeletének (GDPR) támogatása ASP.NET Core Blazor

A Program fájlban:

• Adja hozzá a CookiePolicyOptions konfigurációt, hogy felhasználói hozzájárulást igényeljen a nem alapvető cookie-khoz, és állítsa a SameSite házirendet None értékre. További információért lásd: SameSite-cookie-k ASP.NET Core használata.
• Adja hozzá az alapértelmezett implementációt a IHttpContextAccessor szolgáltatáshoz a AddHttpContextAccessormeghívásával.

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

    options.MinimumSameSitePolicy = SameSiteMode.None;
});

builder.Services.AddHttpContextAccessor();

app.UseCookiePolicy();

Adja hozzá a következő CookieConsent összetevőt a cookie hozzájárulási házirend kezeléséhez.

Az összetevő egy csoportosított JavaScript-fájlt használCookieConsent.razor.jsnevű modul betöltéséhez. Erősítse meg vagy módosítsa az csoportosított fájl elérési útját a OnAfterRenderAsync metódusban. Az alábbi összetevő feltételezi, hogy az összetevő és a hozzá tartozó JavaScript-fájl az alkalmazás Components mappájában található.

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

Adja hozzá a következő összekapcsolt JavaScript-fájlt a JavaScript-modulban lévő acceptPolicy függvény fenntartásához.

CookieConsent.razor.js:

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

A <main> összetevő (Razor) MainLayoutMainLayout.razor jelölésén belül adja hozzá a CookieConsent összetevőt:

<CookieConsent />

A cookie hozzájárulási értékének testreszabása

Adja meg a cookie hozzájárulási értéket úgy, hogy egy egyéni sztringet rendel hozzá CookiePolicyOptions.ConsentCookieValue. Az alábbi példa a "yes" alapértelmezett értékét "true" értékre módosítja:

options.ConsentCookieValue = "true";

Az Blazor WebAssembly alkalmazásokban a helyi tárhely kényelmes módszer a felhasználói hozzájárulás megtartására a webhely cookie szabályzatához. Az alábbi megközelítés bemutatja a megközelítést.

Ha az alkalmazás még nem rendelkezik Shared mappával a megosztott összetevőkhöz, adjon hozzá egy Shared mappát az alkalmazáshoz.

Adja hozzá a megosztott összetevők névterét a _Imports.razor fájlhoz. Az alábbi példában az alkalmazás névtere BlazorSample, a megosztott mappa névtere pedig BlazorSample.Shared:

@using BlazorSample.Shared

Adja hozzá a következő CookieConsent összetevőt a cookie hozzájárulási házirend kezeléséhez.

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

Adja hozzá a hozzárendelt JavaScript-fájlt a JavaScript-modul setCookiePolicyAccepted és getCookiePolicyAccepted függvényeinek fenntartásához.

Shared/CookieConsent.razor.js:

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

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

Az előző példában a helyi tárolóelem nevét és értékét a "CookiePolicyAccepted" és a "yes" értékről tetszőleges értékre módosíthatja. Ha módosít egy vagy mindkét értéket, frissítse mindkét függvényt.

A <main> összetevő (Razor) MainLayoutLayout/MainLayout.razor jelölésén belül adja hozzá a CookieConsent összetevőt:

<CookieConsent />