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

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