feat(ITotpService): add ITotpService interface (#5900)

ArgoZhang · gudufy · web-flow · commit a5803ed8de4a · 2025-04-27T15:11:12.000+08:00
* refactor: 增加 IAuthenticatorService 接口 * doc: 增加示例 * refactor: 更改为 ITOTPService 服务 * refactor: 增加菜单 * doc: 增加源码映射 * feat: 增加 OtpInput 组件 * doc: 更新示例 * refactor: 增加空检查 * chore: 增加工程引用 * refactor: 代码格式化 * refactor: 增加模板 * refactor: 更新脚本错误 * doc: 更新样式 * Revert "refactor: 增加模板" This reverts commit c83b2de. * doc: 更新示例 * refactor: 增加样式文件扩展名 * feat: 增加 OtpInput 组件 * refactor: 增加样式文件扩展名 * refactor: 增加 Readonly 功能 * feat: 增加禁用只读功能 * doc: 增加示例 * chore: 更新字典 * feat: 增加 MaxLength 属性 * refactor: 增加脚本 * doc: 增加示例 * refactor: 更新示例 * refactor: 增加默认实现 * refactor: 增加默认服务逻辑 * chore: 更新字典 * test: 增加单元测试 * test: 增加单元测试 * chore: 更新字典 * refactor: 更新接口 * chore: bump version 9.5.11-beta04 * chore: bump version 9.5.11-beta02 Co-Authored-By: gudufy <117419+gudufy@users.noreply.github.com> --------- Co-authored-by: gudufy <117419+gudufy@users.noreply.github.com>
diff --git a/BootstrapBlazor.sln b/BootstrapBlazor.sln
@@ -78,6 +78,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "tools", "tools", "{9BAF50BE
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "UnitTest.Benchmarks", "tools\Benchmarks\UnitTest.Benchmarks.csproj", "{3E6D8D0E-5A36-4CFD-8612-7D64E3FFE7B1}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.Authenticator", "..\BootstrapBlazor.Extensions\src\components\BootstrapBlazor.Authenticator\BootstrapBlazor.Authenticator.csproj", "{51641ADB-69FA-6DDF-F83F-FEA0C5AFFD88}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -112,6 +114,10 @@ Global
 		{3E6D8D0E-5A36-4CFD-8612-7D64E3FFE7B1}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{3E6D8D0E-5A36-4CFD-8612-7D64E3FFE7B1}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{3E6D8D0E-5A36-4CFD-8612-7D64E3FFE7B1}.Release|Any CPU.Build.0 = Release|Any CPU
+		{51641ADB-69FA-6DDF-F83F-FEA0C5AFFD88}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{51641ADB-69FA-6DDF-F83F-FEA0C5AFFD88}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{51641ADB-69FA-6DDF-F83F-FEA0C5AFFD88}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{51641ADB-69FA-6DDF-F83F-FEA0C5AFFD88}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -128,6 +134,7 @@ Global
 		{D8AEAFE7-10AF-4A5B-BC67-FE740A2CA1DF} = {7C1D79F1-87BC-42C1-BD5A-CDE4044AC1BD}
 		{C075C6C8-B9CB-4AC0-9BDF-B2002B4AB99C} = {EA765165-0542-41C8-93F2-85787FEDEDFF}
 		{3E6D8D0E-5A36-4CFD-8612-7D64E3FFE7B1} = {9BAF50BE-141D-4429-93A9-942F373D1F68}
+		{51641ADB-69FA-6DDF-F83F-FEA0C5AFFD88} = {A2182155-43ED-44C1-BF6F-1B70EBD2DFFE}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {0DCB0756-34FA-4FD0-AE1D-D3F08B5B3A6B}
diff --git a/exclusion.dic b/exclusion.dic
@@ -111,3 +111,6 @@ iframe
 Sqlite
 maxlength
 inputmode
+Totp
+otpauth
+Hotp
diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -78,6 +78,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <ProjectReference Include="..\..\..\BootstrapBlazor.Extensions\src\components\BootstrapBlazor.Authenticator\BootstrapBlazor.Authenticator.csproj" />
     <ProjectReference Include="..\BootstrapBlazor\BootstrapBlazor.csproj" />
   </ItemGroup>
 
diff --git a/src/BootstrapBlazor.Server/Components/Components/Pre.razor.js b/src/BootstrapBlazor.Server/Components/Components/Pre.razor.js
@@ -110,7 +110,9 @@ export function dispose(id) {
     EventHandler.off(el, 'click', '.btn-minus');
 
     const { Pre } = window.BootstrapBlazor;
-    Pre.dispose(id, () => {
-        EventHandler.off(document, 'changed.bb.theme', updateTheme);
-    });
+    if (Pre) {
+        Pre.dispose(id, () => {
+            EventHandler.off(document, 'changed.bb.theme', updateTheme);
+        });
+    }
 }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Authenticators.razor b/src/BootstrapBlazor.Server/Components/Samples/Authenticators.razor
@@ -0,0 +1,39 @@
+﻿@page "/authenticator"
+
+<HeadContent>
+    <style>
+        .qrcode {
+            display: flex;
+            justify-content: center;
+        }
+
+        .progress {
+            max-width: 500px;
+            margin: 0 auto;
+        }
+
+        .opt-progress-label {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 0.75rem;
+            color: var(--bs-body-color);
+        }
+    </style>
+</HeadContent>
+
+<h3>@Localizer["Title"]</h3>
+
+<h4>@Localizer["SubTitle"]</h4>
+
+<PackageTips Name="BootstrapBlazor.Authenticator"></PackageTips>
+
+<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["IntroText1"]" Name="Normal">
+    <QRCode Content="@_content" Width="190" class="mb-3"></QRCode>
+    <OtpInput Value="@_code" IsReadonly="true" class="text-center mb-3"></OtpInput>
+    <div class="position-relative">
+        <BootstrapBlazor.Components.Progress Value="@_progress" IsShowValue="false"></BootstrapBlazor.Components.Progress>
+        <span class="opt-progress-label">@_remain</span>
+    </div>
+</DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Authenticators.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Authenticators.razor.cs
@@ -0,0 +1,56 @@
+﻿// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// Authenticators sample
+/// </summary>
+public partial class Authenticators
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Anchors>? Localizer { get; set; }
+
+    [Inject]
+    [NotNull]
+    private ITotpService? TotpService { get; set; }
+
+    private string _content = "";
+
+    private string? _code;
+
+    private double _progress = 0;
+
+    private int _remain = 0;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _content = TotpService.GenerateOtpUri();
+        _code = TotpService.Compute("OMM2LVLFX6QJHMYI");
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        await Task.Delay(1000);
+        _code = TotpService.Compute("OMM2LVLFX6QJHMYI");
+        _remain = TotpService.Instance.GetRemainingSeconds();
+        _progress = (30d - _remain) * 100 / 30d;
+        StateHasChanged();
+    }
+}
diff --git a/src/BootstrapBlazor.Server/Extensions/ServiceCollectionSharedExtensions.cs b/src/BootstrapBlazor.Server/Extensions/ServiceCollectionSharedExtensions.cs
@@ -30,6 +30,9 @@ public static IServiceCollection AddBootstrapBlazorServices(this IServiceCollect
         services.AddSingleton<MenuService>();
         services.AddScoped<FanControllerDataService>();
 
+        // 增加 Authenticator 服务
+        services.AddBootstrapBlazorAuthenticator();
+
         // 增加示例网站配置
         services.AddOptionsMonitor<WebsiteOptions>();
 
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4919,7 +4919,8 @@
     "Typed": "Typed",
     "UniverSheet": "UniverSheet",
     "ShieldBadge": "ShieldBadge",
-    "OtpInput": "OtpInput"
+    "OtpInput": "OtpInput",
+    "Authenticator": "Authenticator"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -7101,5 +7102,9 @@
     "OtpInputsNormalIntro": "Control the password type or length by setting parameters such as <code>Type</code>",
     "OtpInputsValidateFormTitle": "ValidateForm",
     "OtpInputsValidateFormIntro": "When the password is not provided, click the Submit button, the password box will be displayed in red and it will be prompted that it cannot be empty."
+  },
+  "BootstrapBlazor.Server.Components.Samples.Authenticators": {
+    "Title": "Authenticator",
+    "SubTitle": "An implementation TOTP RFC 6238 and HOTP RFC 4226 Authenticator service."
   }
 }
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -4919,7 +4919,8 @@
     "Typed": "打字机效果 Typed",
     "UniverSheet": "表格组件 UniverSheet",
     "ShieldBadge": "徽章组件 ShieldBadge",
-    "OtpInput": "验证码输入框 OtpInput"
+    "OtpInput": "验证码输入框 OtpInput",
+    "Authenticator": "密码验证服务 Authenticator"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -7101,5 +7102,9 @@
     "OtpInputsNormalIntro": "通过设置 <code>Type</code> 等参数控制密码类型或者长度",
     "OtpInputsValidateFormTitle": "表单内使用",
     "OtpInputsValidateFormIntro": "密码未提供值时，点击提交按钮，密码框显示为红色，并且提示不可为空"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Authenticators": {
+    "Title": "Authenticator 密码验证服务",
+    "SubTitle": "实现 TOTP RFC 6238 和 HOTP RFC 4226 认证器服务"
   }
 }
diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json
@@ -229,7 +229,8 @@
     "typed": "Typeds",
     "univer-sheet": "UniverSheets",
     "shield-badge": "ShieldBadges",
-    "opt-input": "OtpInputs"
+    "opt-input": "OtpInputs",
+    "authenticator": "Authenticators"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 ﻿<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.5.11-beta06</Version>
+    <Version>9.5.11-beta04</Version>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/BootstrapBlazor/Extensions/BootstrapBlazorServiceCollectionExtensions.cs b/src/BootstrapBlazor/Extensions/BootstrapBlazorServiceCollectionExtensions.cs
@@ -36,6 +36,12 @@ public static IServiceCollection AddBootstrapBlazor(this IServiceCollection serv
         services.TryAddSingleton<IZipArchiveService, DefaultZipArchiveService>();
         services.TryAddSingleton(typeof(IDispatchService<>), typeof(DefaultDispatchService<>));
 
+        // 增加 OtpOptions 配置支持
+        services.AddOptionsMonitor<OtpOptions>();
+
+        // 增加 ITotpService
+        services.TryAddSingleton<ITotpService, DefaultTotpService>();
+
         // BootstrapBlazorRootRegisterService 服务
         services.AddScoped<BootstrapBlazorRootRegisterService>();
 
diff --git a/src/BootstrapBlazor/Options/OtpOptions.cs b/src/BootstrapBlazor/Options/OtpOptions.cs
@@ -0,0 +1,129 @@
+﻿// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// OtpOptions class
+/// </summary>
+public class OtpOptions
+{
+    /// <summary>
+    /// Gets or sets the secret key used for generating the QR code.
+    /// </summary>
+    public string? SecretKey { get; set; }
+
+    /// <summary>
+    /// Gets or sets the Issuer name
+    /// </summary>
+    public string? IssuerName { get; set; }
+
+    /// <summary>
+    /// Gets or sets the Account name
+    /// </summary>
+    public string? AccountName { get; set; }
+
+    /// <summary>
+    /// Gets or sets the user name
+    /// </summary>
+    public string? UserName { get; set; }
+
+    /// <summary>
+    /// Gets or sets the OTP hash mode.
+    /// </summary>
+    public OtpHashMode Algorithm { get; set; }
+
+    /// <summary>
+    /// Gets or sets the OTP type.
+    /// </summary>
+    public OtpType Type { get; set; }
+
+    /// <summary>
+    /// Gets or sets the code length. Default is 6.
+    /// </summary>
+    public int Digits { get; set; } = 6;
+
+    /// <summary>
+    /// Gets or sets the period in seconds for TOTP. Default is 30.
+    /// </summary>
+    public int Period { get; set; } = 30;
+
+    /// <summary>
+    /// Gets or sets the counter for Hotp. Default is 0.
+    /// </summary>
+    public int Counter { get; set; }
+}
+
+/// <summary>
+/// Abstract class representing a Time-based One-Time Password (TOTP) instance.
+/// </summary>
+public abstract class TotpInstanceBase
+{
+    /// <summary>
+    /// Get the remaining seconds until the next TOTP expiration for the given secret key and timestamp.
+    /// </summary>
+    /// <param name="timestamp"></param>
+    /// <returns></returns>
+    public abstract int GetRemainingSeconds(DateTime? timestamp = null);
+
+    /// <summary>
+    /// Verify the given TOTP code against the expected value using the provided secret key.
+    /// </summary>
+    /// <param name="code"></param>
+    /// <param name="timestamp"></param>
+    /// <returns></returns>
+    public abstract bool Verify(string code, DateTime? timestamp = null);
+}
+
+/// <summary>
+/// Abstract class representing an HMAC-based One-Time Password (HOTP) instance.
+/// </summary>
+public abstract class HotpInstanceBase
+{
+    /// <summary>
+    ///
+    /// </summary>
+    /// <param name="code"></param>
+    /// <param name="counter"></param>
+    /// <returns></returns>
+    public abstract bool Verify(string code, long counter);
+}
+
+/// <summary>
+/// Enum representing the OTP hash modes.
+/// </summary>
+public enum OtpHashMode
+{
+    /// <summary>
+    /// SHA1 hash mode
+    /// </summary>
+    Sha1,
+
+    /// <summary>
+    /// SHA256 hash mode
+    /// </summary>
+    Sha256,
+
+    /// <summary>
+    /// SHA512 hash mode
+    /// </summary>
+    Sha512,
+}
+
+/// <summary>
+/// Enum representing the OTP types.
+/// </summary>
+public enum OtpType
+{
+    /// <summary>
+    /// Time-based One-Time Password (TOTP) algorithm
+    /// </summary>
+    Totp,
+
+    /// <summary>
+    /// HMAC-based One-Time Password (HOTP) algorithm
+    /// </summary>
+    Hotp
+}
diff --git a/src/BootstrapBlazor/Services/DefaultTotpService.cs b/src/BootstrapBlazor/Services/DefaultTotpService.cs
@@ -0,0 +1,30 @@
+﻿// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+class DefaultTotpService : ITotpService
+{
+    public TotpInstanceBase Instance { get; } = new DefaultTotpInstance();
+
+    public string Compute(string secretKey, int step = 6, OtpHashMode mode = OtpHashMode.Sha1, int totpSize = 6, DateTime? timestamp = null) => "123456";
+
+    public string GenerateOtpUri(OtpOptions? options = null) => "otpauth://totp/BootstrapBlazor?secret=OMM2LVLFX6QJHMYI&issuer=Simulator";
+
+    public string GenerateSecretKey(int length = 20) => "OMM2LVLFX6QJHMYI";
+
+    public int GetRemainingSeconds(DateTime? timestamp = null) => 30;
+
+    public byte[] GetSecretKeyBytes(string input) => [];
+
+    public bool Verify(string code, DateTime? timestamp = null) => false;
+
+    class DefaultTotpInstance : TotpInstanceBase
+    {
+        public override int GetRemainingSeconds(DateTime? timestamp = null) => 30;
+
+        public override bool Verify(string code, DateTime? timestamp = null) => false;
+    }
+}
diff --git a/src/BootstrapBlazor/Services/ITotpService.cs b/src/BootstrapBlazor/Services/ITotpService.cs
diff --git a/test/UnitTest/Options/OtpOptionsTest.cs b/test/UnitTest/Options/OtpOptionsTest.cs
diff --git a/test/UnitTest/Services/TotpServiceTest.cs b/test/UnitTest/Services/TotpServiceTest.cs
