Blazor交互式服务器模式下Passkey认证表单提交错误求助

问题本质 #

你遇到的错误是因为Blazor交互式服务器模式要求表单必须通过唯一的@formname属性关联提交上下文，而你的Passkey JS代码直接调用原生form.submit()时，无法匹配到Blazor追踪的表单实例，导致框架无法识别提交的表单。

具体修复步骤 #

• 给登录表单添加唯一FormName标识
  在Blazor登录组件的表单元素上添加@formname属性，指定唯一值：

  <form @formname="PasskeyLoginForm" method="post">
      <!-- 原有登录表单内容，包括Passkey触发按钮 -->
  </form>
  

• 修改PasskeySubmit.js的提交逻辑
  替换原有的this.internals.form.submit()逻辑，改为操作指定formname的表单，并通过Blazor兼容的方式触发提交：

  async obtainAndSubmitCredential(useConditionalMediation = false) {
      // 保留原有获取credential、构建formData的逻辑
      ...
  
      // 获取指定formname的表单
      const targetForm = document.querySelector('form[@formname="PasskeyLoginForm"]');
      if (!targetForm) {
          console.error("未找到指定formname的登录表单");
          return;
      }
  
      // 将formData转为隐藏输入项添加到表单
      for (const [key, value] of formData.entries()) {
          const hiddenInput = document.createElement('input');
          hiddenInput.type = 'hidden';
          hiddenInput.name = key;
          hiddenInput.value = value;
          targetForm.appendChild(hiddenInput);
      }
  
      // 触发Blazor可识别的表单提交事件，而非原生submit
      targetForm.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
  }
  

• 确保Blazor组件正确处理表单提交
  在登录组件中绑定表单提交回调，确保能接收Passkey返回的凭证数据：

  <form @formname="PasskeyLoginForm" method="post" OnValidSubmit="HandlePasskeyLogin">
      <button type="button" @onclick="InitiatePasskeyFlow">使用Passkey登录</button>
      <!-- 其他表单元素 -->
  </form>
  
  @code {
      [Inject] private IJSRuntime JSRuntime { get; set; }
  
      private async Task InitiatePasskeyFlow()
      {
          await JSRuntime.InvokeVoidAsync("PasskeySubmit.obtainAndSubmitCredential");
      }
  
      private async Task HandlePasskeyLogin()
      {
          // 处理Passkey凭证验证、登录逻辑
      }
  }
  

关键原理 #

Blazor交互式服务器模式依赖表单的@formname维护服务器端组件上下文，原生form.submit()会绕过这个机制，导致框架找不到对应的表单实例。通过指定唯一formname并使用事件触发提交，就能让Blazor正确追踪表单提交的上下文，解决错误问题。

内容的提问来源于stack exchange，提问作者Stanislav Gordenko