Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit c0cdfc5

Browse files
authored
Update the Demo website (#626)
Some copy + style changes to make sure it updates as it should
1 parent a24bf92 commit c0cdfc5

File tree

5 files changed

+89
-50
lines changed

5 files changed

+89
-50
lines changed

‎Demo/Pages/_Layout.cshtml

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,20 @@
66
<html lang="en">
77

88
<head>
9-
<title>FIDO2 &amp; Webauthn for .NET</title>
9+
<title>Passkeys, FIDO2 &amp; WebAuthn for .NET</title>
1010
<meta charset="utf-8">
1111
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
1212

1313

1414
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
1515
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sweetalert2"></script>
16-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
17-
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>-->
18-
19-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.1/sweetalert2.min.css" />
20-
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
21-
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" type="text/css" />
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
17+
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
18+
crossorigin="anonymous"></script>
19+
<link rel="stylesheet"
20+
href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.1/sweetalert2.min.css" />
21+
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"
22+
type="text/css" />
2223
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
2324
<style>
2425
html {
@@ -30,8 +31,8 @@
3031
}
3132
3233
.hero {
33-
background-color: #861657;
34-
background-image: linear-gradient(326deg, #861657 0%, #ffa69e74%);
34+
background-color: #4f46e5;
35+
background-image: linear-gradient(135deg, #4f46e5 0%, #7c3aed50%, #ec4899100%);
3536
}
3637
</style>
3738
<!--<link href="/stylesheets/styles.css" rel="stylesheet" type="text/css" />-->
@@ -43,16 +44,6 @@
4344
<div class="hero-head">
4445
<nav class="navbar">
4546
<div class="container">
46-
@*<div class="navbar-brand">
47-
@*<a class="navbar-item">
48-
<img src="https://bulma.io/images/bulma-type-white.png" alt="Logo">
49-
</a>
50-
<span class="navbar-burger burger" data-target="navbarMenuHeroB">
51-
<span></span>
52-
<span></span>
53-
<span></span>
54-
</span>
55-
</div>*@
5647
<div id="navbarMenuHeroB" class="navbar-menu">
5748
<div class="navbar-end">
5849
<a class="navbar-item" asp-page="/overview">
@@ -63,9 +54,10 @@
6354
</a>
6455
<a class="navbar-item" href="https://opencollective.com/passwordless">
6556
Become a backer
66-
</a>
57+
</a>
6758
<span class="navbar-item">
68-
<a class="button is-info is-inverted" href="https://github.com/passwordless-lib/fido2-net-lib">
59+
<a class="button is-info is-inverted"
60+
href="https://github.com/passwordless-lib/fido2-net-lib">
6961
<span class="icon">
7062
<i class="fab fa-github"></i>
7163
</span>
@@ -81,10 +73,10 @@
8173
<div class="hero-body">
8274
<div class="container has-text-centered">
8375
<p class="title">
84-
Passwordless - FIDO2 for .NET
76+
Passkeys, FIDO2 & WebAuthn for .NET
8577
</p>
8678
<p class="subtitle">
87-
Enabling smoooth sign in using FIDO2 / WebAuthn
79+
Enabling simple, secure authentication and mfa using FIDO2 / WebAuthn
8880
</p>
8981
</div>
9082
</div>
@@ -117,16 +109,23 @@
117109
<footer class="footer" style=" margin-top: 20vh">
118110
<div class="content has-text-centered">
119111
<p>
120-
<strong>Fido2 .NET library</strong> by <a href="https://github.com/abergs">Anders Åberg</a>, <a href="https://github.com/aseigler">Alex Seigler</a> and <a href="https://github.com/passwordless-lib/fido2-net-lib/graphs/contributors">contributors</a>. The source code is licensed
121-
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. Available on <a href="https://github.com/passwordless-lib/fido2-net-lib">Github</a>
112+
<strong>Fido2 .NET library</strong> by <a href="https://github.com/abergs">Anders Åberg</a>, <a
113+
href="https://github.com/aseigler">Alex Seigler</a> and <a
114+
href="https://github.com/passwordless-lib/fido2-net-lib/graphs/contributors">contributors</a>. The
115+
source code is licensed
116+
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. Available on <a
117+
href="https://github.com/passwordless-lib/fido2-net-lib">Github</a>
122118
</p>
123119

124120
<p><small>Supported by the <a href="https://dotnetfoundation.org">.NET Foundation</a></small></p>
125121
<img src="~/images/dotnetfoundation_v4_horizontal.svg" alt=".NET foundation logo" width="220" />
126-
127-
<p><small>Illustrations from <a href="https://medium.com/@@herrjemand/introduction-to-webauthn-api-5fd1fb46c285">Ackermann Yuriy</a></small></p>
122+
123+
<p><small>Illustrations from <a
124+
href="https://medium.com/@@herrjemand/introduction-to-webauthn-api-5fd1fb46c285">Ackermann
125+
Yuriy</a></small></p>
128126
</div>
129127
</footer>
130128
<script src="~/js/instant.js"></script>
131129
</body>
130+
132131
</html>

‎Demo/Pages/overview.cshtml

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,35 @@
1111
<h1 class="title is-1">FIDO2 .NET Library (WebAuthn)</h1>
1212
<div class="content">
1313
<p>
14-
A working implementation library + demo for FIDO2 and WebAuthn using .NET.
14+
A battle tested library for FIDO2 and WebAuthn using .NET.
1515
</p>
16-
<p>Bringing FIDO2 &amp; WebAuthn to asp.net, .net core and full framework.</p>
16+
<p>Bringing FIDO2 &amp; WebAuthn to asp.netand .NET Core.</p>
1717
<p>
18-
Available on <a href="https://github.com/passwordless-lib/fido2-net-lib">GitHub</a> and <a href="https://www.nuget.org/packages/Fido2">Nuget</a>.
18+
Available on <a href="https://github.com/passwordless-lib/fido2-net-lib">GitHub</a> and <a
19+
href="https://www.nuget.org/packages/Fido2">Nuget</a>.
1920
</p>
2021
</div>
2122

2223
<h2 class="title is-2">Purpose</h2>
2324
<div class="content">
2425
<p>Enable passwordless sign in for all .net apps (asp, core, native).</p>
25-
<p>To provide a developer friendly and well tested .NET FIDO2 Server / WebAuthn relying party library for the easy validation of registration (attestation) and authentication (assertion) of FIDO2 / WebAuthn credentials, in order to increase the adoption of the technology, ultimately defeating phishing attacks.</p>
26+
<p>To provide a developer friendly and well tested .NET FIDO2 Server / WebAuthn relying party
27+
library for the easy validation of registration (attestation) and authentication (assertion) of
28+
FIDO2 / WebAuthn credentials, in order to increase the adoption of the technology, ultimately
29+
defeating phishing attacks.</p>
2630
<p>Consider to <a href="https://opencollective.com/passwordless">become a backer.</a></p>
2731
</div>
2832
<h2 class="title is-2">What is FIDO2 / WebAuthn?</h2>
2933
<div class="content">
3034
<h3 class="subtitle is-6">The passwordless web is coming</h3>
3135
<p>
32-
FIDO2 / WebAuthn is a new open authentication standard, supported by browsers and many large tech companies such as Microsoft, Google etc. The main driver is to allow a user to login without passwords, creating passwordless flows or strong MFA for user signup/login on websites. The standard is not limited to web applications with support coming to Active Directory and native apps. The technology builds on public/private keys, allowing authentication to happen without sharing a secret between the user & platform. This brings many benefits, such as easier and safer logins and makes phishing attempts extremely hard.
36+
FIDO2 / WebAuthn is a new open authentication standard, supported by browsers and many large
37+
tech companies such as Microsoft, Google etc. The main driver is to allow a user to login
38+
without passwords, creating passwordless flows or strong MFA for user signup/login on websites.
39+
The standard is not limited to web applications with support coming to Active Directory and
40+
native apps. The technology builds on public/private keys, allowing authentication to happen
41+
without sharing a secret between the user & platform. This brings many benefits, such as easier
42+
and safer logins and makes phishing attempts extremely hard.
3343

3444
Read more:
3545

@@ -68,7 +78,8 @@
6878
<span class="icon has-text-success">
6979
<i class="fas fa-check-square"></i>
7080
</span>
71-
FIDO2 security keys aka roaming authenticators , like SoloKeys Solo, Yubico YubiKey, and Feitian BioPass FIDO2)
81+
FIDO2 security keys aka roaming authenticators , like SoloKeys Solo, Yubico YubiKey, and Feitian
82+
BioPass FIDO2)
7283
</li>
7384
<li>
7485
<span class="icon has-text-success">
@@ -98,7 +109,8 @@
98109
<span class="icon has-text-success">
99110
<i class="fas fa-check-square"></i>
100111
</span>
101-
All current attestation formats: "packed", "tpm", "android-key", "android-safetynet", "fido-u2f", and "none"
112+
All current attestation formats: "packed", "tpm", "android-key", "android-safetynet",
113+
"fido-u2f", and "none"
102114
</li>
103115
<li>
104116
<span class="icon has-text-success">
@@ -131,16 +143,28 @@
131143
<p>The following chapter will explain some of the concepts mentioned in the 3 scenarios</p>
132144

133145
<h4 class="title is-4">Fido2 vs WebAuthn?</h4>
134-
<p>Fido2 is the umbrella term and branding of two new w3c standards: WebAuthn and CTAP2. WebAuthn is the JS API that allows browser to talk to the operating system to generate assertions and CTAP2 is the API that allows the operating system to talk to Authenticators (usb security keys etc)</p>
146+
<p>Fido2 is the umbrella term and branding of two new w3c standards: WebAuthn and CTAP2. WebAuthn is
147+
the JS API that allows browser to talk to the operating system to generate assertions and CTAP2
148+
is the API that allows the operating system to talk to Authenticators (usb security keys etc)
149+
</p>
135150

136151
<h4 class="title is-4">Relying Party (RP)</h4>
137-
<p>The Relying Party - often called RP - is the server that the browser communicates with. If you are a developer reading this, the Relying Party is probably your webserver. It's the server that runs the fido2-net-lib library.</p>
152+
<p>The Relying Party - often called RP - is the server that the browser communicates with. If you
153+
are a developer reading this, the Relying Party is probably your webserver. It's the server that
154+
runs the fido2-net-lib library.</p>
138155

139156
<h4 class="title is-4">User Verification</h4>
140-
<p>A FIDO2 server (a.k.a the Relying Party, RP) can ask the authenticator to verify the user. This can be done either via PIN code, biometrics or other factors that securely verifies that it's the expected human in front of the device, not just any human.</p>
157+
<p>A FIDO2 server (a.k.a the Relying Party, RP) can ask the authenticator to verify the user. This
158+
can be done either via PIN code, biometrics or other factors that securely verifies that it's
159+
the expected human in front of the device, not just any human.</p>
141160

142161
<h4 class="title is-4">Resident Credentials (RK)</h4>
143-
<p>The resident credential is a credential that can be accessed simply with RP ID. When not using RK you will have to provide a list of the credentials (array of ID's) you want the authenticator to use. With RK you don’t need it because the authentication will locate all RK's (only RK credentials), and for each of them generate the assertion over the challenge and return all of them to the client. The client then will display all of the credentials to the user and user will pick one, thus returning selected credential to the relying party.</p>
162+
<p>The resident credential is a credential that can be accessed simply with RP ID. When not using RK
163+
you will have to provide a list of the credentials (array of ID's) you want the authenticator to
164+
use. With RK you don’t need it because the authentication will locate all RK's (only RK
165+
credentials), and for each of them generate the assertion over the challenge and return all of
166+
them to the client. The client then will display all of the credentials to the user and user
167+
will pick one, thus returning selected credential to the relying party.</p>
144168
</div>
145169
</div>
146170
</div>

‎Demo/wwwroot/sass/_index.scss

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@
77
word-wrap: break-word;
88
background: #fff;
99
padding: 15px;
10-
border-radius: 10px;
10+
border-radius: 12px;
1111
margin: 10px 15px;
12+
border: 1px solid #e2e8f0;
13+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
1214

1315
.create-date {
1416
font-style: italic;
@@ -17,7 +19,12 @@
1719
.delete {
1820
float: right;
1921
a {
20-
color: red;
22+
color: #ef4444;
23+
transition: color 0.2s ease-in-out;
24+
25+
&:hover {
26+
color: #dc2626;
27+
}
2128
}
2229
}
2330
}

‎Demo/wwwroot/sass/_login.scss

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
body {
22
padding-top: 6em;
33
padding-bottom: 2em;
4-
background-color: #dddddd;
4+
background-color: #f8fafc;
55
font-size: 1.2em;
66
}
77

88
.login-wrapper {
9-
background-color: #eeeeee;
9+
background-color: #ffffff;
1010
padding: 15px;
1111
border-radius: 15px;
12-
border: 2px solid #cccccc;
12+
border: 2px solid #e2e8f0;
13+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1314
}
1415

1516
.buttons {
@@ -25,7 +26,7 @@ body {
2526
font-size: 10px;
2627
}
2728
a {
28-
color: #6BBF4E
29+
color: #4f46e5;
2930
}
3031
}
3132

‎Demo/wwwroot/stylesheets/styles.css

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@
88
word-wrap: break-word;
99
background: #fff;
1010
padding: 15px;
11-
border-radius: 10px;
11+
border-radius: 12px;
1212
margin: 10px 15px;
13+
border: 1px solid #e2e8f0;
14+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
1315
}
1416
/* line 13, ../sass/_index.scss */
1517
.credentials .credential .create-date {
@@ -21,7 +23,12 @@
2123
}
2224
/* line 19, ../sass/_index.scss */
2325
.credentials .credential .delete a {
24-
color: red;
26+
color: #ef4444;
27+
transition: color 0.2s ease-in-out;
28+
}
29+
30+
.credentials .credential .delete a:hover {
31+
color: #dc2626;
2532
}
2633

2734
/* line 27, ../sass/_index.scss */
@@ -42,16 +49,17 @@
4249
body {
4350
padding-top: 6em;
4451
padding-bottom: 2em;
45-
background-color: #dddddd;
52+
background-color: #f8fafc;
4653
font-size: 1.2em;
4754
}
4855

4956
/* line 8, ../sass/_login.scss */
5057
.login-wrapper {
51-
background-color: #eeeeee;
58+
background-color: #ffffff;
5259
padding: 15px;
5360
border-radius: 15px;
54-
border: 2px solid #cccccc;
61+
border: 2px solid #e2e8f0;
62+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
5563
}
5664

5765
/* line 15, ../sass/_login.scss */
@@ -70,7 +78,7 @@ body {
7078
}
7179
/* line 27, ../sass/_login.scss */
7280
.footer a {
73-
color: #6BBF4E;
81+
color: #4f46e5;
7482
}
7583

7684
/* line 32, ../sass/_login.scss */

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /