Поделиться через

Поддержка общего регламента по защите данных ЕС (GDPR) в ASP.NET Core Blazor

  • Статья

Заметка

Это не последняя версия этой статьи. Для текущего выпуска см. версию этой статьи .NET 9 .

Предупреждение

Эта версия ASP.NET Core больше не поддерживается. Дополнительные сведения см. в политике поддержки для .NET и .NET Core. Для текущего выпуска см. версию этой статьи .NET 9 .

Важный

Эта информация относится к предварительному выпуску продукта, который может быть существенно изменен до его коммерческого выпуска. Корпорация Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых в отношении информации, предоставленной здесь.

Для текущего выпуска см. версию этой статьи .NET 9 .

В этой статье объясняется, как реализовать поддержку требований Общего регламента по защите данных (GDPR) ЕС.

В файле Program:

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

    options.MinimumSameSitePolicy = SameSiteMode.None;
});

builder.Services.AddHttpContextAccessor();

В файле Program перед вызовом MapRazorComponentsдобавьте ПО промежуточного слоя политики Cookie путем вызова UseCookiePolicy:

В файле Program перед вызовом MapBlazorHubдобавьте ПО промежуточного слоя политики Cookie путем вызова UseCookiePolicy:

app.UseCookiePolicy();

Добавьте следующий компонент CookieConsent для обработки согласия политики cookie.

Компонент использует-файл JavaScript с с именем для загрузки модуля. Подтвердите или измените путь к файлу с сортировкой в методе OnAfterRenderAsync. Следующий компонент предполагает, что компонент и его компаньон JavaScript-файл находятся в папке Components приложения.

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

Добавьте следующий JavaScript-файл , размещённый в, чтобы поддерживать функцию acceptPolicy в модуле JavaScript.

CookieConsent.razor.js:

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

В разметке <main>Razor компонента MainLayout (MainLayout.razor) добавьте компонент CookieConsent:

<CookieConsent />

Укажите значение согласия cookie, назначив пользовательскую строку CookiePolicyOptions.ConsentCookieValue. Следующий пример изменяет значение по умолчанию "yes" на "true":

options.ConsentCookieValue = "true";

В приложениях Blazor WebAssemblyлокальное хранилище удобно использовать для фиксирования согласия пользователя с политикой сайта cookie. Следующий метод демонстрирует подход.

Если у приложения еще нет папки Shared для общих компонентов, добавьте в приложение папку Shared.

Добавьте пространство имен для общих компонентов в файл _Imports.razor. В следующем примере пространство имен приложения BlazorSample, а пространство имен общей папки BlazorSample.Shared:

@using BlazorSample.Shared

Добавьте следующий компонент CookieConsent для обработки согласия политики 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)
            {
            }
        }
    }
}

Добавьте приведенный ниже файл JavaScript для поддержания функций setCookiePolicyAccepted и getCookiePolicyAccepted в модуле 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');
}

В предыдущем примере можно изменить имя локального элемента хранилища и значения с "CookiePolicyAccepted" и "yes" на любые предпочитаемые значения. При изменении одного или обоих значений обновите обе функции.

В разметке <main>Razor компонента MainLayout (Layout/MainLayout.razor) добавьте компонент CookieConsent:

<CookieConsent />

Дополнительные ресурсы