如何在 Blazor 服务器中设置同意 cookie答案

【问题标题】：How to set consent cookie in Blazor Server如何在 Blazor 服务器中设置同意 cookie
【发布时间】：2020-04-19 03:32:33
【问题描述】：

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

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

    @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 同意横幅。如果配置得当，用户在同意之前甚至无法登录身份框架。

因为 Blazor 不知道 HttpContext，所以此模板不起作用。是否有样板方式或我必须自己创建此功能？

【问题讨论】：

标签： c# cookies asp.net-identity blazor blazor-server-side

【解决方案1】：

我昨天刚刚在 Blazor 3.1 应用程序中解决了这个问题！我选择使用 JS Interop，它非常简单。

我的 Web 应用有多个前端，包括 MVC、Razor Pages 和 Blazor，因此您可以打开主解决方案文件，然后查看 Blazor 项目：

https://github.com/shahedc/NetLearnerApp

Blazor 项目中的注意事项；

我将部分视图实现为剃须刀组件
在共享文件夹中查找 /_CookieConsentPartial.razor
MainLayout.razor 使用这个剃须刀组件
_Host.cshtml 文件包含我的 js 互操作文件
在 wwwroot 中查找 netLearnerJsInterop.js
js 互操作文件包含 document.cookie 用法
razor 组件使用 JSRuntime.InvokeVoidAsync 调用 JS 方法接受 GDPR 同意消息并存储 cookie

【讨论】：

哇，非常好，效果很好。与“经典”Razor 页面/视图中的 99,999% 相同。
谢谢，如果这是您需要的，请标记为答案。祝你有美好的一天！
值得注意的是，它仅适用于@RenderMode.Server。否则，HttpContext 在第二次调用 OnInitialized 时为空，并将抛出 "Object reference not set to an instance of an object." 异常。
感谢您提供额外信息。如果可能，我会考虑创建一个更强大的示例或处理不同的渲染模式。
肯定还有其他问题。 Produktion 的行为与开发环境非常不同。

【解决方案2】：

要在客户端设置 cookie，您仍然需要 Javascript Interop。

看到这个答案：How do I create a cookie client side using blazor

或者，您可以使用此库将所需的信息存储在本地存储中，而无需编写任何 Javascript：

https://github.com/Blazored/LocalStorage

【讨论】：

【解决方案3】：

您可以从Nuget 使用此 GDPR 同意组件。

但是，它只是帮助您节省 UI 方面的工作。用户选择的 Cookie 设置存储在本地存储中，可以随时读取。 但它不会自动限制任何 Cookie 或跟踪脚本。这必须由应用开发者完成！

在demo page 上查看它的实际效果。

【讨论】：