In the following example, the cookie consent banner temple will display to notify you to accept cookies. Follow the below steps to create a consent cookie in Blazor.
1. Configure the HttpContextAccessor and CookiePolicyOptions to the startup file to create a consent cookie.
[Startup.cs]
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
public class Startup
{
. . .
. . .
public void ConfigureServices(IServiceCollection services)
{
. . .
. . .
services.Configure<CookiePolicyOptions>(options =>
{
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.None;
});
services.AddHttpContextAccessor();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
. . .
. . .
app.UseCookiePolicy();
}
}2. Now, add the Cookie consent banner template as a Razor component under the Shared folder.
[ConsentCookie.razor]
@using Microsoft.AspNetCore.Http.Features
@using Microsoft.AspNetCore.Http
@inject IHttpContextAccessor Http
@inject IJSRuntime JSRuntime
@if (showBanner)
{
<div id="cookieConsent" class="alert alert-info alert-dismissible fade show" role="alert">
Consent to set cookies.
<button type="button" class="accept-policy close" data-dismiss="alert" aria-label="Close" data-cookie-string="@cookieString" @onclick="AcceptMessage">
Accept Cookie
</button>
</div>
}
@code {
ITrackingConsentFeature consentFeature;
bool showBanner;
string cookieString;
protected override void OnInitialized()
{
consentFeature = Http.HttpContext.Features.Get<ITrackingConsentFeature>();
showBanner = !consentFeature?.CanTrack ?? false;
cookieString = consentFeature?.CreateConsentCookie();
}
private void AcceptMessage()
{
// JsInterop call to store the consent cookies.
JSRuntime.InvokeVoidAsync("CookieFunction.acceptMessage", cookieString);
}
}3. Add the JavaScript function in the _Host.cshtml file to store the cookie.
[_Host.cshtml]
<body>
. . .
. . .
<script>
window.CookieFunction = {
acceptMessage: function (cookieString) {
document.cookie = cookieString;
}
};
</script>
</body>4. Refer to the cookie consent banner template Razor component in the MainLayout.razor file.
[MainLayout.razor]
<div class="page">
. . .
. . .
<div class="main">
. . .
. . .
<ConsentCookie />
<div class="content px-4">
@Body
</div>
</div>
</div>5. Run the application, and you will find the consent cookie banner.
6. Now, click the Accept cookie button to store the cookie in the browser.
Share with