Skip to content

Update the Demo website #626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 3, 2025
+89 −50
Merged

Update the Demo website #626

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 26 additions & 27 deletions Demo/Pages/_Layout.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,20 @@
<html lang="en">

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


<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sweetalert2"></script>
<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>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.1/sweetalert2.min.css" />
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" type="text/css" />
<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>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.1/sweetalert2.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"
type="text/css" />
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<style>
html {
Expand All @@ -30,8 +31,8 @@
}

.hero {
background-color: #861657;
background-image: linear-gradient(326deg, #861657 0%, #ffa69e 74%);
background-color: #4f46e5;
background-image: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
}
</style>
<!--<link href="/stylesheets/styles.css" rel="stylesheet" type="text/css" />-->
Expand All @@ -43,16 +44,6 @@
<div class="hero-head">
<nav class="navbar">
<div class="container">
@*<div class="navbar-brand">
@*<a class="navbar-item">
<img src="https://bulma.io/images/bulma-type-white.png" alt="Logo">
</a>
<span class="navbar-burger burger" data-target="navbarMenuHeroB">
<span></span>
<span></span>
<span></span>
</span>
</div>*@
<div id="navbarMenuHeroB" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item" asp-page="/overview">
Expand All @@ -63,9 +54,10 @@
</a>
<a class="navbar-item" href="https://opencollective.com/passwordless">
Become a backer
</a>
</a>
<span class="navbar-item">
<a class="button is-info is-inverted" href="https://github.com/passwordless-lib/fido2-net-lib">
<a class="button is-info is-inverted"
href="https://github.com/passwordless-lib/fido2-net-lib">
<span class="icon">
<i class="fab fa-github"></i>
</span>
Expand All @@ -81,10 +73,10 @@
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">
Passwordless - FIDO2 for .NET
Passkeys, FIDO2 & WebAuthn for .NET
</p>
<p class="subtitle">
Enabling smoooth sign in using FIDO2 / WebAuthn
Enabling simple, secure authentication and mfa using FIDO2 / WebAuthn
</p>
</div>
</div>
Expand Down Expand Up @@ -117,16 +109,23 @@
<footer class="footer" style=" margin-top: 20vh">
<div class="content has-text-centered">
<p>
<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
<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>
<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
<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>
</p>

<p><small>Supported by the <a href="https://dotnetfoundation.org">.NET Foundation</a></small></p>
<img src="~/images/dotnetfoundation_v4_horizontal.svg" alt=".NET foundation logo" width="220" />

<p><small>Illustrations from <a href="https://medium.com/@@herrjemand/introduction-to-webauthn-api-5fd1fb46c285">Ackermann Yuriy</a></small></p>

<p><small>Illustrations from <a
href="https://medium.com/@@herrjemand/introduction-to-webauthn-api-5fd1fb46c285">Ackermann
Yuriy</a></small></p>
</div>
</footer>
<script src="~/js/instant.js"></script>
</body>

</html>
46 changes: 35 additions & 11 deletions Demo/Pages/overview.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,35 @@
<h1 class="title is-1">FIDO2 .NET Library (WebAuthn)</h1>
<div class="content">
<p>
A working implementation library + demo for FIDO2 and WebAuthn using .NET.
A battle tested library for FIDO2 and WebAuthn using .NET.
</p>
<p>Bringing FIDO2 &amp; WebAuthn to asp.net, .net core and full framework.</p>
<p>Bringing FIDO2 &amp; WebAuthn to asp.net and .NET Core.</p>
<p>
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>.
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>.
</p>
</div>

<h2 class="title is-2">Purpose</h2>
<div class="content">
<p>Enable passwordless sign in for all .net apps (asp, core, native).</p>
<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>
<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>
<p>Consider to <a href="https://opencollective.com/passwordless">become a backer.</a></p>
</div>
<h2 class="title is-2">What is FIDO2 / WebAuthn?</h2>
<div class="content">
<h3 class="subtitle is-6">The passwordless web is coming</h3>
<p>
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.
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.

Read more:

Expand Down Expand Up @@ -68,7 +78,8 @@
<span class="icon has-text-success">
<i class="fas fa-check-square"></i>
</span>
FIDO2 security keys aka roaming authenticators , like SoloKeys Solo, Yubico YubiKey, and Feitian BioPass FIDO2)
FIDO2 security keys aka roaming authenticators , like SoloKeys Solo, Yubico YubiKey, and Feitian
BioPass FIDO2)
</li>
<li>
<span class="icon has-text-success">
Expand Down Expand Up @@ -98,7 +109,8 @@
<span class="icon has-text-success">
<i class="fas fa-check-square"></i>
</span>
All current attestation formats: "packed", "tpm", "android-key", "android-safetynet", "fido-u2f", and "none"
All current attestation formats: "packed", "tpm", "android-key", "android-safetynet",
"fido-u2f", and "none"
</li>
<li>
<span class="icon has-text-success">
Expand Down Expand Up @@ -131,16 +143,28 @@
<p>The following chapter will explain some of the concepts mentioned in the 3 scenarios</p>

<h4 class="title is-4">Fido2 vs WebAuthn?</h4>
<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>
<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>

<h4 class="title is-4">Relying Party (RP)</h4>
<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>
<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>

<h4 class="title is-4">User Verification</h4>
<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>
<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>

<h4 class="title is-4">Resident Credentials (RK)</h4>
<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>
<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>
</div>
</div>
</div>
Expand Down
11 changes: 9 additions & 2 deletions Demo/wwwroot/sass/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@
word-wrap: break-word;
background: #fff;
padding: 15px;
border-radius: 10px;
border-radius: 12px;
margin: 10px 15px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

.create-date {
font-style: italic;
Expand All @@ -17,7 +19,12 @@
.delete {
float: right;
a {
color: red;
color: #ef4444;
transition: color 0.2s ease-in-out;

&:hover {
color: #dc2626;
}
}
}
}
Expand Down
9 changes: 5 additions & 4 deletions Demo/wwwroot/sass/_login.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
body {
padding-top: 6em;
padding-bottom: 2em;
background-color: #dddddd;
background-color: #f8fafc;
font-size: 1.2em;
}

.login-wrapper {
background-color: #eeeeee;
background-color: #ffffff;
padding: 15px;
border-radius: 15px;
border: 2px solid #cccccc;
border: 2px solid #e2e8f0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.buttons {
Expand All @@ -25,7 +26,7 @@ body {
font-size: 10px;
}
a {
color: #6BBF4E
color: #4f46e5;
}
}

Expand Down
20 changes: 14 additions & 6 deletions Demo/wwwroot/stylesheets/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
word-wrap: break-word;
background: #fff;
padding: 15px;
border-radius: 10px;
border-radius: 12px;
margin: 10px 15px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
/* line 13, ../sass/_index.scss */
.credentials .credential .create-date {
Expand All @@ -21,7 +23,12 @@
}
/* line 19, ../sass/_index.scss */
.credentials .credential .delete a {
color: red;
color: #ef4444;
transition: color 0.2s ease-in-out;
}

.credentials .credential .delete a:hover {
color: #dc2626;
}

/* line 27, ../sass/_index.scss */
Expand All @@ -42,16 +49,17 @@
body {
padding-top: 6em;
padding-bottom: 2em;
background-color: #dddddd;
background-color: #f8fafc;
font-size: 1.2em;
}

/* line 8, ../sass/_login.scss */
.login-wrapper {
background-color: #eeeeee;
background-color: #ffffff;
padding: 15px;
border-radius: 15px;
border: 2px solid #cccccc;
border: 2px solid #e2e8f0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* line 15, ../sass/_login.scss */
Expand All @@ -70,7 +78,7 @@ body {
}
/* line 27, ../sass/_login.scss */
.footer a {
color: #6BBF4E;
color: #4f46e5;
}

/* line 32, ../sass/_login.scss */
Expand Down
Loading