基于.NET6 Blazor的网站如何实现移动端指纹登录认证

网页端不存在直接访问用户手机指纹传感器的实现方式，但完全可以基于标准Web API实现指纹登录能力，在Blazor + .NET6技术栈下有成熟落地方案。

搜不到直接调用指纹传感器的资料不是检索问题，是浏览器安全沙箱从设计上就禁止网页直接访问各类硬件传感器（包括指纹模组），所有合规的web端指纹/面容登录都不会直接和硬件打交道，而是走W3C标准化的WebAuthn（Web身份认证）接口：

• 生物识别的校验逻辑完全由操作系统、浏览器底层和指纹硬件交互完成，网页只能发起认证请求、拿到校验后的签名结果，全程接触不到用户原始指纹数据
• 目前移动端iOS 14+自带Safari、安卓60+版本Chrome、以及国内绝大多数基于Chromium内核的移动端主流浏览器都已支持该接口的平台认证模式，可直接唤起本机指纹、面容识别能力

服务端（.NET6）实现 #

.NET6 内置的身份认证管线原生支持FIDO2/WebAuthn 认证方案，不需要从零实现加密校验逻辑，核心只需要实现两个接口：

• 凭证注册接口：用户开启指纹登录时，生成随机挑战值返回给前端，接收前端回传的公钥凭证，和当前登录的用户ID绑定存储
• 登录校验接口：用户选择指纹登录时，生成随机挑战值返回给前端，校验前端回传的、经生物识别签名后的挑战值，签名合法即签发登录态

注意不要自己实现签名校验逻辑，WebAuthn的校验规则涉及大量加密参数校验，自行实现很容易留安全漏洞

前端（Blazor）实现 #

所有和浏览器WebAuthn接口的交互全部通过JS互操作完成，Blazor WASM和Blazor Server模式逻辑一致：

1. 封装一层极简JS脚本，调用两个浏览器原生API：
   • 注册凭证时调用navigator.credentials.create，传入服务端返回的挑战值、用户信息等参数，唤起指纹录入确认流程，拿到凭证公钥回传给服务端
   • 登录校验时调用navigator.credentials.get，传入服务端返回的挑战值、允许的凭证ID列表，唤起指纹校验窗口，拿到签名结果回传给服务端
2. 在Blazor组件里通过IJSRuntime调用封装好的JS方法，处理接口返回的成功/失败状态即可

不需要引入额外的第三方前端依赖，原生API的兼容性已经足够覆盖绝大多数移动端用户

• WebAuthn接口仅在安全上下文生效，生产环境必须部署HTTPS，本地localhost调试不受此限制
• 必须保留密码、短信验证码等传统登录方式作为兜底，部分老版本浏览器、小众浏览器可能不支持WebAuthn接口
• 不要尝试通过Native桥、自定义浏览器插件之类的方式直接调用指纹传感器，这类方案要么被浏览器安全策略拦截，要么要求用户安装额外插件，对公开网站来说完全没有实用性
• 该方案全程不采集用户原始指纹数据，所有生物特征数据仅存储在用户本地设备，符合个人信息保护的合规要求

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