ASP.NET Core での EU の一般データ保護規制 (GDPR) のサポートBlazor

Program ファイルで次の操作を行います。

• CookiePolicyOptions 構成を追加して、重要でない Cookie に対してユーザーの同意を要求し、同じサイト ポリシーを [なし] に設定します。 詳細については、「ASP.NET Core で SameSite Cookie を使用する」を参照してください。
• IHttpContextAccessor を呼び出して、AddHttpContextAccessor サービスの既定の実装を追加します。

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

    options.MinimumSameSitePolicy = SameSiteMode.None;
});

builder.Services.AddHttpContextAccessor();

app.UseCookiePolicy();

CookieConsent ポリシー同意を処理するには、次の cookie コンポーネントを追加します。

コンポーネントは、 という名前のCookieConsent.razor.jsを使用してモジュールを読み込みます。 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 ファイルを追加して、JavaScript モジュールで acceptPolicy 関数を維持します。

CookieConsent.razor.js:

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

<main> コンポーネント (Razor) の MainLayoutMainLayout.razor マークアップ内に、CookieConsent コンポーネントを追加します。

<CookieConsent />

cookie 同意値をカスタマイズする

カスタム文字列を 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 ファイルを追加して、JavaScript モジュールで setCookiePolicyAccepted 関数と getCookiePolicyAccepted 関数を維持します。

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) の MainLayoutLayout/MainLayout.razor マークアップ内に、CookieConsent コンポーネントを追加します。

<CookieConsent />