diff --git a/src/BootstrapBlazor.Server/Components/Pages/Chats.razor b/src/BootstrapBlazor.Server/Components/Pages/Chats.razor
index ce3467d7870..c252677c2b0 100644
--- a/src/BootstrapBlazor.Server/Components/Pages/Chats.razor
+++ b/src/BootstrapBlazor.Server/Components/Pages/Chats.razor
@@ -57,5 +57,3 @@
         </div>
     </div>
 </DemoBlock>
-
-<BrowserFinger></BrowserFinger>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/BrowserFingers.razor b/src/BootstrapBlazor.Server/Components/Samples/BrowserFingers.razor
new file mode 100644
index 00000000000..007acbb2e10
--- /dev/null
+++ b/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()" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/BrowserFingers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/BrowserFingers.razor.cs
new file mode 100644
index 00000000000..88bcb8720b6
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/BrowserFingers.razor.cs
@@ -0,0 +1,45 @@
+// Copyright (c) Argo Zhang (argo@163.com). 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?>"
+        }
+    ];
+}
diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
index 8e502ee0809..9c037049ce9 100644
--- a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
+++ b/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"
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 68d4c7df4ed..3aaa8915328 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/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"
   }
 }
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 9a2a6570bfd..1f84a374729 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/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": "获得指纹方法"
   }
 }
diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json
index 751b7ebd2f3..59b0d852789 100644
--- a/src/BootstrapBlazor.Server/docs.json
+++ b/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",
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
index f28c04a03ba..0d830c754ad 100644
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/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'">
diff --git a/src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor b/src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor
index 7bc6cfa3d89..eb5cde9109a 100644
--- a/src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor
+++ b/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">
diff --git a/src/BootstrapBlazor/Components/BrowserFinger/BrowserFinger.razor.cs b/src/BootstrapBlazor/Components/BrowserFinger/BrowserFinger.razor.cs
index c80a034c7a8..e58bcb5d39d 100644
--- a/src/BootstrapBlazor/Components/BrowserFinger/BrowserFinger.razor.cs
+++ b/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 方法
diff --git a/src/BootstrapBlazor/Components/BrowserFinger/BrowserFinger.razor.js b/src/BootstrapBlazor/Components/BrowserFinger/BrowserFinger.razor.js
index 69c3e26edae..b954ee9ce17 100644
--- a/src/BootstrapBlazor/Components/BrowserFinger/BrowserFinger.razor.js
+++ b/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;