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

Posted 2023-03-27

【中文标题】如何在 Blazor 服务器中设置同意 cookie

【英文标题】：How to set consent cookie in Blazor Server

【发布时间】：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，所以此模板不起作用。是否有样板方式或我必须自己创建此功能？

【参考方案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 上查看它的实际效果。