doc(BrowserFinger): add BrowserFinger service sample code (#2862)

* chore: bump version 8.1.10-beta03

* doc: 增加指纹服务菜单

* doc: 更新源码映射配置

* doc: 更新示例

* doc: 移除指纹组件

* refactor: 增加指纹组件

* doc: 增加指纹浏览器示例

* refactor: 精简代码

src/BootstrapBlazor.Server/Components/Pages/Chats.razor

@@ -57,5 +57,3 @@
         </div>
     </div>
 </DemoBlock>
-
-<BrowserFinger></BrowserFinger>

src/BootstrapBlazor.Server/Components/Samples/BrowserFingers.razor

@@ -0,0 +1,19 @@
+@page "/browser-finger"
+@inject IStringLocalizer<BrowserFingers> Localizer
+
+<DemoBlock Title="@Localizer["BrowserFingerTitle"]" Introduction="@Localizer["BrowserFingerIntro"]" ShowCode="false" Name="BrowserFinger">
+    <Pre>[Inject]
+[NotNull]
+private IBrowserFingerService? BrowserFingerService { get; set; }
+
+private async Task GetFingerCodeAsync()
+{
+    await BrowserFingerService.GetFingerCodeAsync();
+}</Pre>
+    <BootstrapInputGroup>
+        <BootstrapInputGroupLabel DisplayText="Browser-Finger"></BootstrapInputGroupLabel>
+        <BootstrapInput @bind-Value="@_code" />
+    </BootstrapInputGroup>
+</DemoBlock>
+
+<MethodTable Items="GetMethods()" />

src/BootstrapBlazor.Server/Components/Samples/BrowserFingers.razor.cs

@@ -0,0 +1,45 @@
+// Copyright (c) Argo Zhang ([email protected]). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// 浏览器指纹服务示例
+/// </summary>
+public partial class BrowserFingers
+{
+    [Inject]
+    [NotNull]
+    private IBrowserFingerService? BrowserFingerService { get; set; }
+
+    private string? _code;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender)
+        {
+            _code = await GetFingerCodeAsync();
+            StateHasChanged();
+        }
+    }
+
+    private Task<string?> GetFingerCodeAsync() => BrowserFingerService.GetFingerCodeAsync();
+
+    private MethodItem[] GetMethods() =>
+    [
+        new()
+        {
+            Name = "GetFingerCodeAsync",
+            Description = Localizer["GetFingerCodeAsync"],
+            Parameters = " — ",
+            ReturnValue = "Task<string?>"
+        }
+    ];
+}

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -1278,6 +1278,11 @@ void AddServices(DemoMenuItem item)
                     Url = "ocr"
                 },
                 new()
+                {
+                    Text = Localizer["BrowserFinger"],
+                    Url = "browser-finger"
+                },
+                new()
                 {
                     Text = Localizer["Clipboard"],
                     Url = "clipboard-service"

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -4557,7 +4557,8 @@
     "Services": "Services",
     "AzureTranslator": "AzureTranslator",
     "BarcodeGenerator": "BarcodeGenerator",
-    "ZipArchive": "IZipArchiveService"
+    "ZipArchive": "IZipArchiveService",
+    "BrowserFinger": "BrowserFingerService"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -6183,5 +6184,10 @@
     "HeightIntro": "Change the height of the dropdown box by setting the <code>Height</code> value",
     "CustomComponentTitle": "Custom Components",
     "CustomComponentIntro": "Any component can be placed in a dropdown box, and a callback is required for assignment or window closure"
+  },
+  "BootstrapBlazor.Server.Components.Samples.BrowserFingers": {
+    "BrowserFingerTitle": "Browser fingerprint",
+    "BrowserFingerIntro": "Obtain the client browser fingerprint by calling the <code>IBrowserFingerService</code> service instance method <code>GetFingerCodeAsync</code>. The fingerprint is consistent in privacy mode",
+    "GetFingerCodeAsync": "Method for obtaining fingerprints"
   }
 }

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -4557,7 +4557,8 @@
     "Services": "内置服务",
     "AzureTranslator": "翻译服务 AzureTranslator",
     "BarcodeGenerator": "条码生成器 BarcodeGenerator",
-    "ZipArchive": "压缩归档服务 IZipArchiveService"
+    "ZipArchive": "压缩归档服务 IZipArchiveService",
+    "BrowserFinger": "浏览器指纹 BrowserFingerService"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -6183,5 +6184,10 @@
     "HeightIntro": "通过设置 <code>Height</code> 值，来改变下拉框高度",
     "CustomComponentTitle": "自定义组件",
     "CustomComponentIntro": "任意组件均可放入下拉框内，需要有一个回调进行赋值或者关窗即可"
+  },
+  "BootstrapBlazor.Server.Components.Samples.BrowserFingers": {
+    "BrowserFingerTitle": "浏览器指纹",
+    "BrowserFingerIntro": "通过调用 <code>IBrowserFingerService</code> 服务实例方法 <code>GetFingerCodeAsync</code> 获得客户端浏览器指纹，隐私模式下指纹是一致的",
+    "GetFingerCodeAsync": "获得指纹方法"
   }
 }

src/BootstrapBlazor.Server/docs.json

@@ -13,6 +13,7 @@
     "block": "Blocks",
     "blue-tooth": "Bluetooth",
     "breadcrumb": "Breadcrumbs",
+    "browser-fingter": "BrowserFingers",
     "button": "Buttons",
     "calendar": "Calendars",
     "camera": "Cameras",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.1.10-beta02</Version>
+    <Version>8.1.10-beta03</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor

@@ -7,11 +7,13 @@
 <FullScreen></FullScreen>
 <Clipboard></Clipboard>
 <Title></Title>
-<ResizeNotification></ResizeNotification>
 
 <Message @ref="MessageContainer"></Message>
 <ToastContainer @ref="ToastContainer"></ToastContainer>
 
+<ResizeNotification></ResizeNotification>
+<BrowserFinger></BrowserFinger>
+
 @code {
     RenderFragment RenderChildContent =>
     @<CascadingValue Value="this" IsFixed="true">

src/BootstrapBlazor/Components/BrowserFinger/BrowserFinger.razor.cs

@@ -14,6 +14,8 @@ public partial class BrowserFinger : IDisposable
     [NotNull]
     private IBrowserFingerService? BrowserFingerService { get; set; }
 
+    private string? _fingerCode;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -24,7 +26,33 @@ protected override void OnInitialized()
         BrowserFingerService.Subscribe(this, Callback);
     }
 
-    private async Task<string?> Callback() => await InvokeAsync<string?>("getFingerCode");
+    private readonly TaskCompletionSource _tcs = new();
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender)
+        {
+            _fingerCode = await InvokeAsync<string?>("getFingerCode");
+            _tcs.TrySetResult();
+        }
+    }
+
+    private async Task<string?> Callback()
+    {
+        if (string.IsNullOrEmpty(_fingerCode))
+        {
+            await _tcs.Task;
+            _fingerCode = await InvokeAsync<string?>("getFingerCode");
+        }
+        return _fingerCode;
+    }
 
     /// <summary>
     /// Dispose 方法

src/BootstrapBlazor/Components/BrowserFinger/BrowserFinger.razor.js

@@ -1,8 +1,4 @@
 export function getFingerCode() {
-    return getCanvasFingerprint();
-}
-
-const getCanvasFingerprint = () => {
     const canvas = document.createElement('canvas');
     canvas.width = 200;
     canvas.height = 200;