-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (122 loc) · 4.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<html>
<head>
<title>Flask Webauthn</title>
<script src="simplewebauthn.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="login-form">
<div id="success" class="content" hidden></div>
<div id="error" class="content" hidden></div>
<div class="action">
<button id="btnBegin" hidden>Register</button>
<button id="btnBeginAuth">Login</button>
</div>
</div>
<script>
const { startRegistration } = SimpleWebAuthnBrowser;
// <button>
const elemBegin = document.getElementById('btnBegin');
// <span>/<p>/etc...
const elemSuccess = document.getElementById('success');
// <span>/<p>/etc...
const elemError = document.getElementById('error');
// Start registration when the user clicks a button
elemBegin.addEventListener('click', async () => {
// Reset success/error messages
elemSuccess.innerHTML = '';
elemError.innerHTML = '';
// GET registration options from the endpoint that calls
// @simplewebauthn/server -> generateRegistrationOptions()
const resp = await fetch('/generate-registration-options');
let attResp;
try {
// Pass the options to the authenticator and wait for a response
attResp = await startRegistration(await resp.json());
} catch (error) {
// Some basic error handling
if (error.name === 'InvalidStateError') {
elemError.innerText = 'Error: Authenticator was probably already registered by user';
} else {
elemError.innerText = error;
}
throw error;
}
// POST the response to the endpoint that calls
// @simplewebauthn/server -> verifyRegistrationResponse()
const verificationResp = await fetch('/verify-registration', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(attResp),
});
// Wait for the results of verification
const verificationJSON = await verificationResp.json();
// Show UI appropriate for the `verified` status
if (verificationJSON && verificationJSON.verified) {
elemSuccess.innerHTML = 'Registered!';
elemSuccess.hidden = false;
} else {
elemError.innerHTML = `Oh no, something went wrong! Response: <pre>${JSON.stringify(
verificationJSON,
)}</pre>`;
elemError.hidden = false;
}
});
const { startAuthentication } = SimpleWebAuthnBrowser;
// <button>
const elemBeginAuthentication = document.getElementById('btnBeginAuth');
// <span>/<p>/etc...
const elemSuccessAuth = document.getElementById('successAuth');
// <span>/<p>/etc...
const elemErrorAuth = document.getElementById('errorAuth');
// Start authentication when the user clicks a button
elemBeginAuthentication.addEventListener('click', async () => {
// Reset success/error messages
elemSuccess.innerHTML = '';
elemError.innerHTML = '';
// GET authentication options from the endpoint that calls
// @simplewebauthn/server -> generateAuthenticationOptions()
const resp = await fetch('/generate-authentication-options');
let asseResp;
try {
// Pass the options to the authenticator and wait for a response
asseResp = await startAuthentication(await resp.json());
} catch (error) {
// Some basic error handling
elemError.innerText = error;
throw error;
}
// POST the response to the endpoint that calls
// @simplewebauthn/server -> verifyAuthenticationResponse()
const verificationResp = await fetch('/verify-authentication', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(asseResp),
});
// Wait for the results of verification
const verificationJSON = await verificationResp.json();
// Show UI appropriate for the `verified` status
if (verificationJSON && verificationJSON.verified) {
elemSuccess.innerHTML = 'Logged in!';
elemSuccess.hidden = false;
} else {
elemError.innerHTML = `Oh no, something went wrong! Response: <pre>${JSON.stringify(
verificationJSON,
)}</pre>`;
elemError.hidden = false;
}
});
fetch('/get-config').then(resp => resp.json()).then(config => {
if (config.registrationPossible) {
document.querySelector("#btnBegin").hidden = false
}
//document.querySelector("#btnBeginAuth").click()
})
//document.querySelector("#btnBeginAuth").click()
</script>
</body>
</html>