我正在考虑构建一个 spring-thymeleaf 应用程序,该应用程序支持基于 webauthn 的密钥。
https://github.com/webauthn4j/webauthn4j-spring-security/tree/master/samples显示了使用Java的服务器和使用Angular的客户端。服务器端对我来说很清楚。我想知道的是客户端以及如何用百里香构建前端? 我的示例想法:
<head>
<!-- Include your JavaScript file -->
<script th:src="@{/js/webauthn.js}"></script>
</head>
// webauthn.js
function initWebAuthn(challenge, userId, userName, displayName) {
const createOptions = {
publicKey: {
// ... set up your create options using the variables
challenge: Uint8Array.from(atob(challenge), c => c.charCodeAt(0)),
user: {
id: Uint8Array.from(atob(userId), c => c.charCodeAt(0)),
name: userName,
displayName: displayName
},
// ... other options
}
};
document.getElementById('registerButton').addEventListener('click', function() {
navigator.credentials.create({ publicKey: createOptions.publicKey })
.then((credential) => {
// Process and send the credential to the server
})
.catch((error) => {
console.error(error);
});
});
}
这种方法是使用 webauthn 客户端库的有效替代方法吗?或者有没有计划将 webauthn 与 thymeleaf 集成以更方便实施?
是的,我最近创建了一个支持 webauthn 的 spring-thymeleaf 应用程序。这正是我所采取的方法。 thymeleaf 页面仅包含 javascript 库,用于处理与浏览器支持的 Web 身份验证 API (WebAuthn) 的通信。在服务器端,我利用了 Yubico FIDO 库。您肯定走在正确的道路上。