130 lines
4.2 KiB
HTML
130 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="it">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>WebAuthn Client</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
</head>
|
||
<body class="flex flex-col items-center p-6 font-sans bg-gray-50 min-h-screen">
|
||
<h1 class="text-3xl font-bold mb-8 text-center">Demo WebAuthn</h1>
|
||
|
||
<div class="flex flex-col gap-6 w-full max-w-md">
|
||
<label for="username" class="font-semibold text-lg">Username:</label>
|
||
<input
|
||
type="text"
|
||
id="username"
|
||
value="fabio"
|
||
class="border rounded px-4 py-3 w-full text-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
/>
|
||
|
||
<button
|
||
id="registerBtn"
|
||
class="bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition text-lg w-full"
|
||
>
|
||
Registrati
|
||
</button>
|
||
|
||
<button
|
||
id="loginBtn"
|
||
class="bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 transition text-lg w-full"
|
||
>
|
||
Login
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Script come ES Module -->
|
||
<script type="module">
|
||
import {
|
||
startRegistration,
|
||
startAuthentication
|
||
} from 'https://cdn.jsdelivr.net/npm/@simplewebauthn/browser/+esm';
|
||
|
||
const API_BASE = 'https://auth.patachina.it';
|
||
|
||
function getUsername() {
|
||
return document.getElementById('username').value.trim();
|
||
}
|
||
|
||
async function registerUser() {
|
||
try {
|
||
|
||
const username = getUsername();
|
||
|
||
const resp = await fetch(`${API_BASE}/my/register-options`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
// body: JSON.stringify({ username: 'fabio' }),
|
||
body: JSON.stringify({ username }),
|
||
credentials: 'include',
|
||
});
|
||
const options = await resp.json();
|
||
const attResp = await startRegistration(options);
|
||
console.log('attResp: ',attResp);
|
||
const payload = {
|
||
username: 'fabio',
|
||
attestationResponse: attResp
|
||
};
|
||
console.log(payload);
|
||
const verif = await fetch(`${API_BASE}/my/register-verify`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload),
|
||
credentials: 'include',
|
||
})
|
||
const verification = await verif.json();
|
||
console.log('verification: ', verification);
|
||
alert(`Registrazione: ${verification.success ? 'OK' : 'Fallita'}`);
|
||
} catch (err) {
|
||
console.error(err);
|
||
alert('Errore nella registrazione');
|
||
}
|
||
}
|
||
|
||
async function loginUser() {
|
||
try {
|
||
|
||
const username = getUsername();
|
||
|
||
const resp = await fetch(`${API_BASE}/my/login-options`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
/* body: JSON.stringify({
|
||
username: 'fabio',
|
||
}, // tutto l’oggetto di risposta
|
||
), */
|
||
body: JSON.stringify({ username }),
|
||
credentials: 'include',
|
||
});
|
||
const options = await resp.json();
|
||
if (!resp.ok) {
|
||
// Qui uso il campo message inviato dal server
|
||
throw new Error(options.message || 'Errore sconosciuto');
|
||
}
|
||
console.log('options: ',options);
|
||
const authResp = await startAuthentication(options);
|
||
console.log('authResp: ',authResp);
|
||
const verif = await fetch(`${API_BASE}/my/login-verify`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(
|
||
{username: 'fabio',
|
||
assertionResponse: authResp}, // tutto l’oggetto di risposta
|
||
),
|
||
credentials: 'include',
|
||
});
|
||
const verification = await verif.json();
|
||
console.log('verification: ', verification);
|
||
//alert(JSON.stringify(verification));
|
||
alert(`Login: ${verification.success ? 'OK' : 'Fallito'}`);
|
||
} catch (err) {
|
||
console.error(err);
|
||
alert(`Login fallito: ${err.message}`);
|
||
}
|
||
}
|
||
|
||
document.getElementById('registerBtn').addEventListener('click', registerUser);
|
||
document.getElementById('loginBtn').addEventListener('click', loginUser);
|
||
</script>
|
||
</body>
|
||
</html>
|