Blazor WebAssembly .NET6 PWA能否无需Passkey调用手机生物识别？

一、WebAuthn 无需绑定Passkey的正确配置 #

你之前遇到的WebAuthn强制要求Passkey是参数配置问题，WebAuthn本身支持仅触发生物识别验证，无需创建或关联Passkey。在Blazor中可通过JSInterop调用浏览器WebAuthn API，调整关键参数实现：

1. 强制开启用户验证：在PublicKeyCredentialRequestOptions中指定userVerification: "required"，确保浏览器触发FaceID/指纹验证。
2. 避免Passkey关联：不设置userHandle，或将authenticatorSelection.userVerification设为"required"，同时可留空allowCredentials以触发设备默认生物识别流程。

Blazor实现示例 #

1. 编写JS脚本（wwwroot/js/biometrics.js）

async function verifyBiometrics() {
    // 生成随机挑战字符串（实际应从后端获取）
    const challenge = Uint8Array.from(crypto.getRandomValues(new Uint8Array(32)));
    const options = {
        publicKey: {
            challenge: challenge,
            rpId: window.location.hostname,
            userVerification: "required",
            allowCredentials: []
        }
    };

    try {
        const assertion = await navigator.credentials.get(options);
        return { success: true, message: "生物识别验证成功" };
    } catch (err) {
        return { success: false, message: err.message };
    }
}

2. Blazor组件调用

@inject IJSRuntime JS

<button @onclick="TriggerBiometricVerify">验证指纹/FaceID</button>
<p>@_verifyMessage</p>

private string _verifyMessage = "";

private async Task TriggerBiometricVerify()
{
    var result = await JS.InvokeAsync<BiometricResult>("verifyBiometrics");
    _verifyMessage = result.Success ? result.Message : $"验证失败：{result.Message}";
    StateHasChanged();
}

public class BiometricResult
{
    public bool Success { get; set; }
    public string Message { get; set; }
}

二、其他实现方式 #

1. JSInterop调用原生平台API #

借助Blazor的JSInterop能力，直接对接Android/iOS原生生物识别接口：

• Android：若PWA以WebAPK安装，可通过自定义WebView配置暴露原生方法，JS通过window.android调用Android的BiometricPrompt API完成验证。
• iOS：将PWA的manifest.json中display设为standalone或fullscreen后，可通过JS桥接调用iOS的LocalAuthentication框架触发FaceID/指纹验证。

2. 第三方Web生物识别SDK #

部分服务商提供Web端生物识别SDK（如人脸验证、指纹识别），通过嵌入SDK脚本，在Blazor中调用其API完成验证。这类方案需注意服务商兼容性与付费要求。

注意：所有Web端生物识别方案均需满足HTTPS环境（本地开发可用localhost），且需用户主动授权浏览器访问生物识别权限。

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