How to set consent cookie in Blazor Server

Question

I have a Blazor 3.1 App with Identity where I want to implement a cookie consent banner.

In classic ASP .NET Core, there is a nice template for a cookie consent banner.

    @using Microsoft.AspNetCore.Http.Features

    @{
        var consentFeature = Context.Features.Get<ITrackingConsentFeature>();
        var showBanner = !consentFeature?.CanTrack ?? false;
        var cookieString = consentFeature?.CreateConsentCookie();
    }

    @if (showBanner)
    {
        <div class="container">
            <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 class="alert-link" asp-area="" asp-controller="Home" asp-action="Privacy">Learn More</a>.
                <button type="button" class="accept-policy close" data-dismiss="alert" aria-label="Close" data-cookie-string="@cookieString">
                    <span aria-hidden="true">Accept</span>
                </button>
            </div>
        </div>
        <script>
            (function () {
                var button = document.querySelector("#cookieConsent button[data-cookie-string]");
                button.addEventListener("click", function (event) {
                    document.cookie = button.dataset.cookieString;
                }, false);
            })();
        </script>
    }

If you are placing this partial in the layout, you have a perfect working cookie consent banner. If configured appropriately, users cant even login to the Identity Framework until they consent.

Because Blazor does not know a HttpContext, this template is not working. Is there a boilerplate way or do I have to create this feature this by myself?

Answer 1

You can use this GDPR Consent component from Nuget.

However it is only helping you to save work on UI side. User chosen Cookie settings is stored in Local storage which can be read out any time. But it does not restricts any Cookies or Tracking scripts automatically. That must be done by the app developer!

See it in action on demo page.

Answer 2

I just solved this in a Blazor 3.1 app yesterday! I opted to use JS Interop and it was super easy.

My web app has multiple front ends, including MVC, Razor Pages and Blazor, so you can open the main solution file and then check out the Blazor project:

https://github.com/shahedc/NetLearnerApp

Things to note in the Blazor project;

• I implemented the partial view as a razor component

• look for /_CookieConsentPartial.razor in the Shared folder

• MainLayout.razor uses this razor component

• The _Host.cshtml file includes my js interop file

• Look for netLearnerJsInterop.js in wwwroot

• the js Interop file contains the document.cookie usage

• the razor component uses JSRuntime.InvokeVoidAsync to call the JS method to accept the GDPR consent message and store the cookie

Answer 3

To set cookies on the client, you still need Javascript Interop.

See this answer: How do I create a cookie client side using blazor

Alternatively, you could store the information you need in the Local Storage using this library, without having to write any Javascript:

https://github.com/Blazored/LocalStorage