WebAuthn 客户端注册：如何访问用户凭据并将其发送到服务器进行用户身份验证？

Question

我想在客户端使用 Java/Vaadin 实现 WebAuthn。

我的目标是实现任何用户都可以在 2FA 环境中注册/注册 WebAuthn。 创建的令牌应保存在privacyIDEA服务器上以供以后使用。它还处理用户的身份验证。

到目前为止我所做的：

• 使用 Vaadin（Java 框架）创建 Web 应用程序
• Java中token管理的实现方法（未完成）
• 使用 JavaScript 客户端插件促进使用 WebAuthn 令牌对 PrivacyIDEA 服务器进行身份验证

来自 JavaScript 客户端库的代码片段：

window.registerWebAuthn = function (challenge, rpName, rpId, userId, userName, displayName) {
            const publicKeyCredentialCreationOptions = {
                challenge: new Uint8Array(challenge),
                 rp: {
                    name: "rpName",
                    id  : "rpId"
            },
                user: {
                    id: new Uint8Array(userId),
                    name: "userName",
                    displayName: "displayName"
                }
            };
            
            navigator
                .credentials
                .create({publicKey: publicKeyCredentialCreationOptions})
                .then(function (newCredentialInfo) {
                    console.log(newCredentialInfo);
              }).catch(function (err) {
                 console.error(err);
              });

   };

JavaScript 函数

registerWebAuthn

采用多个参数并利用 WebAuthn API 创建新的公钥凭证。

then

块处理凭证的成功创建，并将

newCredentialInfo

记录到控制台。

预计通过按按钮创建令牌启动 WebAuthn 注册过程。为此，我在 Vaadins

registerWebAuthn()

函数中调用 Js 函数

executeJs()

。

Vaadin/Java 代码：

@JsModule("./src/pi-webauthn.js")
public class MFAPageView {

    private Button buttonPrimary0 = new Button();

    public MFAPageView() {

        buttonPrimary0.setText("Create token");

        layoutColumn2.add(buttonPrimary0);
        buttonPrimary0.addClickListener(e -> {
            UI.getCurrent().getPage().executeJs("registerWebAuthn()");
    }
}

如何访问

newCredentialInfo

中的WebAuthn凭证并将其发送到privacyIDEA服务器以执行用户身份验证？

你有什么想法吗？

Answer 1

如何访问newCredentialInfo中的WebAuthn凭据并将其发送到privacyIDEA服务器以执行用户身份验证？

恐怕，

toJSON 方法尚未得到广泛支持。因此，在大多数情况下，您需要从“对象”中获取字段并自行序列化它们。