保護されたローカルストレージを使う (Blazor Server)

はじめに

この記事は、以下を下敷きにしています。

https://zenn.dev/tetr4lab/articles/6b1a70ca7800ed

https://zenn.dev/link/articles/3fb1d4e8e7ff21

やりたいこと

ユーザ毎のデータを永続化する場合に、サーバ側で管理せずに、クライアント側で簡易に保持したい場合があります。
ブラウザのローカルストレージをクライアント側のkey–valueストアとして使います。

実装

ProtectedBrowserStorageを使います。

https://github.com/tetr4lab/Tetr4labNugetPackages/blob/main/Tetr4labServer/ProtectedLocalStrageHelper.cs

https://learn.microsoft.com/ja-jp/dotnet/api/microsoft.aspnetcore.components.server.protectedbrowserstorage.protectedbrowserstorage?view=aspnetcore-8.0

ストレージの内容は暗号化されるため、(復号鍵を持たない)クライアント側では可読になりません。
サーバ側ページで使用することが前提になります。

https://learn.microsoft.com/ja-jp/aspnet/core/blazor/state-management?view=aspnetcore-8.0&pivots=server#aspnet-core-protected-browser-storage

復号鍵は、同一ドメインに配置された複数のアプリ間で共有していません。
ここでは、AppDomain.CurrentDomainからアプリ識別子を得てストレージのキーに前置することで、キーの一意性を担保しています。

https://learn.microsoft.com/ja-jp/dotnet/api/system.appdomain.currentdomain?view=net-8.0

使用例

プリレンダリング中は、まだJSを実行可能なページが存在しないので、OnAfterRenderAsyncで読み出します。
以下の例では、メインレイアウトに配置することで、アプリ全体に作用するモードの保持に使用しています。

https://github.com/tetr4lab/ExLibris10/blob/master/ExLibris/ExLibris/Components/Layout/MainLayout.razor

留意事項

デバッガーのアタッチ先をhttpsとかWSLとかで切り替えると、ストレージも切り替わります。そのまま読み取とろうとすると、System.Security.Cryptography.CryptographicException(Key not found)とかが発生します。

おわりに

お読みいただきありがとうございました。
執筆者は、Blazor、ASP.NETなど諸々において初学者ですので、誤りもあるかと思います。
お気づきの際は、是非コメントや編集リクエストにてご指摘ください。
あるいは、「それでも解らない」、「自分はこう捉えている」などといった、ご意見、ご感想も歓迎いたします。