j"19HxigV4QyBv3tHpQVcUEQyq1pzZVdoAutMQ<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebAuthn Fingerprint Authentication</title>
</head>
<body>
<h1>WebAuthn Fingerprint Authentication</h1>
<!-- Registration Form -->
<div id="registrationForm">
<h2>Register Fingerprint</h2>
<form id="registerForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<br />
<button type="button" id="registerButton">Register Fingerprint</button>
</form>
</div>
<!-- Authentication Form -->
<div id="authenticationForm">
<h2>Authenticate with Fingerprint</h2>
<form id="authenticateForm">
<label for="authUsername">Username:</label>
<input type="text" id="authUsername" name="authUsername" required />
<br />
<label for="authEmail">Email:</label>
<input type="email" id="authEmail" name="authEmail" required />
<br />
<button type="button" id="authenticateButton">
Authenticate with Fingerprint
</button>
</form>
</div>
<script>
async function registerFingerprint() {
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
// Validate input and handle errors
try {
const credential = await navigator.credentials.create({
publicKey: {
challenge: new Uint8Array(32), // Replace with a secure challenge
rp: {
name: "Your Website Name",
},
user: {
id: new Uint8Array(16), // Replace with a unique user ID
name: username,
displayName: username,
},
pubKeyCredParams: [
{ type: "public-key", alg: -7 }, // For fingerprint authentication
],
authenticatorSelection: {
authenticatorAttachment: "platform",
userVerification: "required",
},
attestation: "none", // Change as needed for your use case
},
});
// Send the credential to your server for registration
// Implement the server-side code to save the credential
alert(JSON.stringify(credential));
console.log(credential);
} catch (error) {
console.error("Error registering fingerprint:", error);
}
}
async function authenticateWithFingerprint() {
const authUsername = document.getElementById("authUsername").value;
const authEmail = document.getElementById("authEmail").value;
// Validate input and handle errors
try {
const credential = await navigator.credentials.get({
publicKey: {
challenge: new Uint8Array(32), // Replace with a secure challenge
rpId: "your-website.com", // Replace with your website's domain
userVerification: "required",
allowCredentials: [
{
type: "public-key",
id: new Uint8Array(16), // Replace with the credential ID you want to authenticate with
transports: ["internal"], // Allow fingerprint authentication
},
],
},
});
// Send the credential to your server for authentication
// Implement the server-side code to validate the credential
console.log(credential);
} catch (error) {
console.error("Error authenticating with fingerprint:", error);
}
}
document
.getElementById("registerButton")
.addEventListener("click", registerFingerprint);
document
.getElementById("authenticateButton")
.addEventListener("click", authenticateWithFingerprint);
</script>
</body>
</html>
text/htmlutf-8|"1PuQa7K62MiKCtssSLKy1kh56WWU7MtUR5SETapp
utxo-cloudtypewebsiteauthor"1Ky8DbJFyt79pqnYKdLCuZTzKL2n3ifGPo
https://whatsonchain.com/tx/6cba29deccdc2200f196e05e4e305a1fbb13df3f03ea73ea7b485d7781a532bd