ASP.NET Core 3.1 - Cookie Consent


Ken Haggerty
Created 05/10/2020 - Updated 06/09/2020 21:49

This article will demonstrate the implementation of ASP.NET Core GDPR Consent features. I will assume you have created a new ASP.NET Core 3.1 Razor Pages project and have reviewed the previous articles of the series. I won't use Identity or Individual User Accounts. See Tutorial: Get started with Razor Pages in ASP.NET Core.

FIDO Utilties Project and Article Series


Access to the research project source code may be purchased on KenHaggerty.Com at Manage > Assets.

I will publish the FIDO Utilities Project at fido.kenhaggerty.com until I publish the Users Without Passwords Project.

I enjoy writing these articles. It often enhances and clarifies my coding. The research project is a result of a lot of refactoring and hopefully provides logical segues for the articles. Thank you for supporting my efforts.

The Challenge demo implements the CookieTempDataProvider to persist the unique code called the challenge across requests. The CookieTempDataProvider encrypts and stores the challenge in a cookie. The early versions of the FIDO Utilities Project used the message modal to request the user's consent before the use of the temp data cookie.

Message Modal Cookie Consent

When the user agreed, the Challenge demo page's DOMContentLoaded method would set the cookie. I developed a getChallengeConsent function in site.js to detect the consent cookie.

Challenge.cshtml > DOMContentLoaded
document.addEventListener('DOMContentLoaded', function () {
    if (getCookie('FidoUtilities.Challenge.CookieConsent') === '')
        setSessionCookie('FidoUtilities.Challenge.CookieConsent', true);
});
site.js > getChallengeConsent
function getChallengeConsent() {
    if (getCookie('FidoUtilities.Challenge.CookieConsent') === '') {
        showMessageModal('You are about to enter a page which uses cookies. By clicking the Countinue button, '
            + 'you agree with use of cookies otherwise click Cancel.', 'alert-warning', true, 'Cancel', '', true,
            '/Demos/Challenge', '_self', 'Countinue', 'btn-warning', false);
    }
    else
        window.location.href = '/Demos/Challenge';
}

When I decided to implement the ASP.NET Core GDPR Consent features as part of the FIDO Utilities Project, I encountered a new issue with the CookieTempDataProvider.

Temp Data Not Found

If I accept the cookie policy from the _CookieConsentPartial. cshtml, the TempData cookie functions.

Challenge Verified

Research found: Why isn't my session state working in ASP.NET Core? Session state, GDPR, and non-essential cookies , which lead to implementing the TempData cookie as essential.

Startup.cs > ConfigureServices
services.AddRazorPages()
    .AddCookieTempDataProvider(options =>
    {
        options.Cookie.IsEssential = true;
    })
    .AddRazorRuntimeCompilation();

This allowed the TempData to function without accepting the cookie policy.

Challenge Verified Is Essential

This defeats the purpose of granting consent. To inform the user before navigating to the Challenge demo page, I needed to pass the CanTrack consent flag to JavaScript.

_Layout. cshtml before site.js loads
@@{
    var consentFeature = Context.Features.Get<ITrackingConsentFeature>();
    var mustAcceptCookies = !consentFeature?.CanTrack ?? false;
    if (mustAcceptCookies)
    {
        <script>
            var mustAcceptCookies = true;
        </script>
    }
}
site.js
function getChallengeConsent() {
    if (typeof mustAcceptCookies !== 'undefined' && mustAcceptCookies) {
        if (getCookie('.AspNet.Consent') === '')
            showMessageModal('You are about to enter a page which uses cookies. You must Accept the cookie policy.',
                'alert-warning', true, 'Cancel');
        else
            window.location.href = '/Demos/Challenge';
    }    
    else
        window.location.href = '/Demos/Challenge';
}
Must Accept Cookie Policy

I noticed the cookie banner text appearing in search results. I moved the _CookieConsentPartial below the RenderBody div in _Layout. cshtml and added style to site.css.

Cookie Banner With Style
Cookie Banner With Style Mobile
Update 05/23/2020

I added the AES Cipher article link.

Update 06/09/2020

I updated the article to announce support for Bootstrap Native v3.



Comment Count = 0

Please log in to comment or follow.

Login Register
Follow to get web notifications when new comments are posted to this article.
Logged in users receive web notifications for new articles, topics and assets.
Web Notifications