如何在Blazor Server中设置同意cookie

问题描述

我有一个具有身份的Blazor 3.1应用程序，我想在其中实施Cookie同意横幅.

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

在经典的ASP .NET Core中，有一个很好的cookie同意横幅模板.

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>
    }

如果您将此部分放置在布局中，则您将拥有一个完美的工作Cookie同意标语.如果配置正确，用户甚至在同意之前都无法登录到身份框架.

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.

因为Blazor不知道HttpContext，所以此模板不起作用.有一个样板方法，还是我必须自己创建此功能?

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?

推荐答案

昨天我刚刚在Blazor 3.1应用中解决了这个问题！我选择使用JS Interop，这非常容易.

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

我的Web应用程序具有多个前端，包括MVC，Razor Pages和Blazor，因此您可以打开主解决方案文件，然后检出Blazor项目:

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

Blazor项目中的注意事项；

Things to note in the Blazor project;

• 我将局部视图实现为剃刀组件
• 在共享"文件夹中查找/_CookieConsentPartial.razor

• MainLayout.razor使用此剃须刀组件

• I implemented the partial view as a razor component
• look for /_CookieConsentPartial.razor in the Shared folder

• MainLayout.razor uses this razor component

_Host.cshtml文件包括我的js互操作文件

The _Host.cshtml file includes my js interop file

js Interop文件包含document.cookie用法

the js Interop file contains the document.cookie usage

剃刀组件使用JSRuntime.InvokeVoidAsync调用JS方法以接受GDPR同意消息并存储cookie

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

希望有帮助！

这篇关于如何在Blazor Server中设置同意cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！