first commit
This commit is contained in:
commit
85218ab024
4 changed files with 155 additions and 0 deletions
39
README.md
Normal file
39
README.md
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
# Client Webauthn con vite
|
||||||
|
```sh
|
||||||
|
npm create vite@latest webauthn-clien
|
||||||
|
```
|
||||||
|
scegliere
|
||||||
|
|
||||||
|
vanilla js no yes
|
||||||
|
|
||||||
|
entrare nellaa cartella salvare con altro nome i file index.html src/main.js
|
||||||
|
|
||||||
|
ed inserire quelli nuovi compreso vite.config.js con quelli del git
|
||||||
|
```sh
|
||||||
|
cd webauthn-client
|
||||||
|
mv index.html index.html.old
|
||||||
|
mv src/main.js src/main.js.old
|
||||||
|
|
||||||
|
nano index.html
|
||||||
|
nano src/main.js
|
||||||
|
nano vite.config.json
|
||||||
|
```
|
||||||
|
|
||||||
|
in vite.config.js ci sono host e porta
|
||||||
|
|
||||||
|
installare
|
||||||
|
```sh
|
||||||
|
npm install @simplewebauthn/browser
|
||||||
|
```
|
||||||
|
|
||||||
|
poi lanciare in modalità sviluppo
|
||||||
|
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
oppure costruirlo
|
||||||
|
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
e poi avviarlo
|
||||||
|
|
||||||
|
npm run preview
|
||||||
18
index.html
Normal file
18
index.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="it">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>WebAuthn Client</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Demo WebAuthn</h1>
|
||||||
|
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input type="text" id="username" value="fabio" />
|
||||||
|
|
||||||
|
<button id="registerBtn">Registrati</button>
|
||||||
|
<button id="loginBtn">Login</button>
|
||||||
|
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
73
src/main.js
Normal file
73
src/main.js
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
import { startRegistration, startAuthentication } from '@simplewebauthn/browser';
|
||||||
|
/*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 }),
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
const options = await resp.json();
|
||||||
|
if (!resp.ok) throw new Error(options.message || 'Errore sconosciuto');
|
||||||
|
|
||||||
|
const attResp = await startRegistration(options);
|
||||||
|
|
||||||
|
const payload = { username, attestationResponse: attResp };
|
||||||
|
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();
|
||||||
|
alert(`Registrazione: ${verification.success ? 'OK' : 'Fallita'}`);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
alert(`Errore nella registrazione: ${err.message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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 }),
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
const options = await resp.json();
|
||||||
|
if (!resp.ok) throw new Error(options.message || 'Errore sconosciuto');
|
||||||
|
|
||||||
|
const authResp = await startAuthentication(options);
|
||||||
|
|
||||||
|
const verif = await fetch(`${API_BASE}/my/login-verify`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ username, assertionResponse: authResp }),
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
const verification = await verif.json();
|
||||||
|
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);
|
||||||
25
vite.config.js
Normal file
25
vite.config.js
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
server: {
|
||||||
|
host: '192.168.1.3', // ascolta su tutte le interfacce (LAN, localhost)
|
||||||
|
port: 3000,
|
||||||
|
strictPort: true,
|
||||||
|
allowedHosts: [
|
||||||
|
'my.patachina2.casacam.net' // autorizza questo host
|
||||||
|
],
|
||||||
|
proxy: {
|
||||||
|
// tutte le chiamate a /my/... vengono inoltrate al backend remoto
|
||||||
|
'/my': {
|
||||||
|
target: 'https://auth.patachina.it',
|
||||||
|
changeOrigin: true,
|
||||||
|
secure: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
preview: {
|
||||||
|
host: '192.168.1.3', // oppure '192.168.1.3'
|
||||||
|
port: 3000,
|
||||||
|
strictPort: true
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue