-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
56 lines (44 loc) · 1.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebAuth demo</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<h1>Demo</h1>
<p>
Web Authentication API (WebAuthn) enables passwordless authentication through your device's fingerprint reader or
an external USB Security Key.
</p>
<p>
Register a credential using the button below and choose if you would like to authenticate using your fingerprint or
USB Security Key. After that, you can authenticate using the registered credential.
</p>
<p>
Currently, iOS only supports USB Security Key. Android and Chrome on MacOS support both USB Security Key and
fingerprint reader.
</p>
<div id="demo-buttons">
<material-button id="register-button" label="Register credential" raised></material-button>
<material-button id="authenticate-button" label="Authenticate with credential" raised></material-button>
<i class="material-icons" id="loader">autorenew</i>
<material-dialog id="auth-dialog">
<h3 slot="header">Web Authentication</h3>
<p slot="body"></p>
<footer slot="footer">
<material-button label="Close" id="close-dialog"></material-button>
</footer>
</material-dialog>
</div>
<material-button id="delete-button" label="Delete credential" raised>
<i class="material-icons" slot="left-icon">delete</i>
</material-button>
<script type="module">
import './node_modules/@dannymoerkerke/material-webcomponents/src/material-button.js';
import './node_modules/@dannymoerkerke/material-webcomponents/src/material-dialog.js';
</script>
<script src="js/index.js"></script>
</body>
</html>