CODEWITHSUNDEEP
c#cookiesasp.net-identityblazorblazor-server-side
Ned Flanders
Ned Flanders

Reputation: 529

How to set consent cookie in Blazor Server

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?

Upvotes: 17

Views: 13244

Answers (4)

Westly White
Westly White

Reputation: 559

Microsoft has released this article explaining a relatively simple way to implement a GDPR compliant using the CookiePolicyOptions Class and CookiePolicyAppBuilderExtensions.UseCookiePolicy Method. There appears to be dynamic validation to determine if consent is required.

builder.Services.Configure<CookiePolicyOptions>(options => {
    // This lambda determines whether user consent for non-essential 
    // cookies is needed for a given request.
    options.CheckConsentNeeded = context => true;

    options.MinimumSameSitePolicy = SameSiteMode.None; });

Post: EU General Data Protection Regulation (GDPR) support in ASP.NET Core

Upvotes: 1

Shahed C - MSFT
Shahed C - MSFT

Reputation: 2881

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

Upvotes: 15

Major
Major

Reputation: 6658

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. GDPR Consent demo

Upvotes: 1

Franc
Franc

Reputation: 5496

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

Upvotes: 2

Related Questions