在 blazor wasm 应用中打开 touch\\face ID\\biometric auth答案

【问题标题】：Open touch\face ID\biometric auth in blazor wasm app在 blazor wasm 应用中打开 touch\\face ID\\biometric auth
【发布时间】：2022-11-17 05:57:04
【问题描述】：

我需要将生物识别身份验证添加到我的 blazor wasm 应用程序中。

我发现一些难以实施\理解使用第三方身份验证服务器端的库。

我只需要从设备（iOS、Android、桌面浏览器等）打开生物识别对话框，然后我将使用我的实际方法手动管理身份验证。

有可能的？如果是，如何？

谢谢！ :)

【问题讨论】：

得到它的工作。 JS 部分中的 console.log 将实际数据放入控制台，所以这就是我知道它有效的原因。不幸的是，无法将其放入 dotnet 运行时。

标签： authentication blazor-webassembly biometrics

【解决方案1】：

还没有发现任何内置于 blazor 中的东西，所以现在看来你必须使用 jsinterop。还没有真正在 Blazor 中尝试过，但我希望它主要发生在 js 代码中。有一个很好的网站就是为了这个，因为你必须添加一些选项并找出非对称密钥：https://webauthn.guide/

可能会尽快尝试，看看是否有更压缩的方式来呈现 MCVE - 如果我弄清楚了，我会更新它。

更新

试过了，这会为我打开对话框。

实际调用发生在 JS 中：

async function doIt(options) {
    var newCreds = await navigator.credentials.create({ publicKey: options });
    console.log("Created new credentials:", newCreds);
    return newCreds;
}
window.doIt = doit;

在我的剃须刀上放一个按钮：

<button @onclick="DoIt">Do it</button>

然后是@code块中对应的方法和类型：

private async void DoIt()
{
    var credOptions = new PublicKeyCredentialCreationOptions();
    Console.WriteLine("Sending options for " + credOptions.user.displayName);
    var cred = await Js.InvokeAsync<PublicKeyCredential>("doIt", credOptions);
    Console.WriteLine("Received cred");
    Console.WriteLine(cred);
}

// Do all the things (I think this is like pattern/faceID/touchID/etc)
static readonly int[] Algs = { -7, -8, -35, -36, -37, -38, -39, -257, -258, -259, -65535 };
private static PublicKeyCredentialCreationOptions.PublicKeyCredentialParameters Alg(int alg)
{
    return new PublicKeyCredentialCreationOptions.PublicKeyCredentialParameters("public-key", alg);
}

public class PublicKeyCredentialCreationOptions
{
    public byte[] challenge { get; set; } = DateTime.Now.ToString().Select(c => (byte)c).ToArray(); // Just random stuff here I think?
    public RelyingParty rp { get; set; } = new ("WebAuthnExample"); // If I understand correctly, id will be auto filled with the current domain
    public User user { get; set; } = 
        new("metallkiller".Select(c => (byte)c).ToArray(), "metallkiller", "Metallkiller");
    public PublicKeyCredentialParameters[] pubKeyCredParams { get; set; } = Algs.Select(Alg).ToArray();
    public long timeout { get; set; } = 60000; // Not entirely sure what this does - docs has more info
    public string attestation { get; set; } = "direct"; // No idea I just copied this

    public record RelyingParty(string name);

    public record User(byte[] id, string name, string displayName);

    public record PublicKeyCredentialParameters(string type, int alg);
}

好消息：这将打开生物识别身份验证对话框并创建凭证。

坏消息：无法将凭据返回到 dotnet，也许我忘了做一些 jsinterop-magic 或者它只是不适用于凭据，那么我们可能必须读取 JS 中的所有内容并将它们返回到我们自己的对象中或者其他的东西。如果有人告诉我这里发生了什么，我将不胜感激。

编辑：返回类型的来源：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e57ff15825e1a05c923f80f39dbb7966d20db950/types/webappsec-credential-management/index.d.ts

【讨论】：