-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
191 lines (177 loc) · 9.79 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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<title>WebAuthn demo</title>
<link rel="icon" type="image/png" href="/webauthn-logo-icon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/webauthn-logo-icon-16x16.png" sizes="16x16" />
<!-- Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-webauthn.css" rel="stylesheet">
<!-- for logo on advanced menu -->
<link href="css/fontawesome-all.css" rel="stylesheet">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- this can't be a local file - it loads buttons.html which will fail CORS if this is a local JS file -->
<script src="https://buttons.github.io/buttons.js"></script>
<style type="text/css">
.tt-info:hover {
text-decoration: underline;
}
</style>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="base">
<div class="content">
<div class="header-logo visible-desktop">
<a href="http://webauthn.org/" title="WebAuthn"><img src="/webauthn-logo.png" alt="WebAuthn"></a>
</div>
<h1>WebAuthn Demo</h1>
<p>This demo will let you create a user and register using WebAuthn, then authenticate yourself without a password.</p>
<p>Start by registering a user, then try logging in.</p>
<p><a class="github-button" href="https://github.com/apowers313/fido2-server-demo/" data-size="large" aria-label="View apowers313/fido2-server-demo on GitHub">View the Source</a></p>
<br>
<div class="card card-body bg-light" role="tablist">
<!-- tab header -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="?tab=register" class="nav-link active" data-target="#register" data-toggle="tab">Register</a>
</li>
<li class="nav-item">
<a href="?tab=login" class="nav-link" data-target="#login" data-toggle="tab">Login</a></li>
</ul>
<div class="tab-content">
<!-- register tab -->
<div class="tab-pane fade show active" role="tabpanel" id="register">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2>Create a New Account</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
<form id="register-form" name="register-form" method="post">
<br>
<input type="text" id="username" name="username" placeholder="Username" autofocus="autofocus">
<br>
<br>
<input type="submit" id="registerButton" class="btn btn-success" value="Register">
</form>
</div>
<div class="col-md-6">
<p>Enter a username and click 'next' initialize the WebAuthn registration process. In the next step you will be prompted to register with WebAuthn -- No password required!</p>
</div>
</div>
</div>
</div>
<!-- login tab -->
<div class="tab-pane fade" role="tabpanel" id="login">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2>Log in to Account Using WebAuthn</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
<form id="login-form" name="login-form" method="post">
<br>
<input type="text" name="username" placeholder="Username" autofocus="autofocus">
<br>
<br>
<input type="submit" id="loginButton" class="btn btn-success" value="Login">
</form>
</div>
<div class="col-md-6">
<p>If you've completed the registration step, you can authenticate yourself using the form to the left. In the next step your WebAuthn device will be authenticated.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- accordion for advanced content -->
<div id="accordion">
<div class="card">
<div class="card-header" id="headingAdvanced">
<h5 class="mb-0">
<button id="collapseButton" class="btn btn-link" data-toggle="collapse" data-target="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced"> Advanced
</button>
</h5>
</div>
<div id="collapseAdvanced" class="collapse" aria-labelledby="headingAdvanced" data-parent="#accordion">
<!-- debug output text area -->
<div id="terminal" contenteditable="true">
</div>
</div>
</div>
</div>
<!-- Modals -->
<!-- this is the modal that pops up when webauthn is not supported -->
<div id="notSupportedModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">WebAuthn Not Supported</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="notSupportedBody" class="modal-body">
<p>WebAuthn is not currently supported in this configuration. Please ensure you are using a secure context (https) and that your browser supports WebAuthn</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<!-- this is the user presence modal that pops up to prompt users to "press their button" -->
<div id="upModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Perform User Verification</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Please perform your user verification on your authenticator now.</p>
<p>If you have a U2F token, it should be flashing now. Otherwise, please press your fingerprint sensor or follow the instructions provided by your browser or operating system.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Abort</button>
</div>
</div>
</div>
</div>
<!-- this is the modal that shows the final result. the content is controlled by ux-events.js -->
<div id="resultModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id="resultHeader" class="modal-title">Whatever Complete</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="resultBody" class="modal-body">
<p>Something something passed or failed or whatever. Results go here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/ux-events.js"></script>
<script src="js/webauthn-simple-app/webauthn-simple-app.js"></script>
</body>
</html>