46 lines
1.5 KiB
HTML
46 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Passkey Login</title>
|
|
</head>
|
|
<body>
|
|
<h1>Passkey Login</h1>
|
|
<form id="register-form">
|
|
<button type="button" id="register">Register Passkey</button>
|
|
</form>
|
|
<form id="login-form">
|
|
<button type="button" id="login">Login with Passkey</button>
|
|
</form>
|
|
|
|
<script>
|
|
async function registerPasskey() {
|
|
const res = await fetch('/registration.php');
|
|
const options = await res.json();
|
|
|
|
// Convert the challenge and user ID to ArrayBuffer
|
|
options.challenge = new Uint8Array(Object.values(options.challenge)).buffer;
|
|
options.user.id = new Uint8Array(Object.values(options.user.id)).buffer;
|
|
|
|
const credential = await navigator.credentials.create({ publicKey: options });
|
|
console.log(credential);
|
|
}
|
|
|
|
async function loginPasskey() {
|
|
const res = await fetch('/login.php');
|
|
const options = await res.json();
|
|
|
|
// Convert challenge to ArrayBuffer
|
|
options.challenge = new Uint8Array(Object.values(options.challenge)).buffer;
|
|
|
|
const assertion = await navigator.credentials.get({ publicKey: options });
|
|
console.log(assertion);
|
|
}
|
|
|
|
document.getElementById('register').addEventListener('click', registerPasskey);
|
|
document.getElementById('login').addEventListener('click', loginPasskey);
|
|
</script>
|
|
</body>
|
|
</html>
|