github-mirrors/oauth-playground-client
1
0
Fork 0
mirror of https://github.com/ysoftdevs/oauth-playground-client.git synced 2026-01-18 17:47:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

WebAuthn first page impl

Browse Source
This commit is contained in:
konarfil
2023-09-26 14:35:13 +02:00
parent a44031fe00
commit c4b45e91bf
2 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/flow/webauthn.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OAuth 2.0 Playground - Authorization Code Flow</title>
<meta name="description"
content="Dive deep into the Authorization Code Flow with our interactive guide. Understand its workings, best practices, and its role in OAuth for secure user authentication. Ideal for developers aiming for robust web app integrations." />
content="Step into the future of authentication with our WebAuthn guide. Experience firsthand how this web-based API redefines security, enabling passwordless and biometric verifications. Crucial for developers aiming to elevate user experience and protection in web apps." />
<link rel="icon" href="../favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link type="text/css" rel="stylesheet" href="../css/style.css" />
@@ -59,9 +59,9 @@
<div class="card-content">
<h6>1. Build the Authorization URL</h6>
<p>
In order to initiate the <b>Authorization Code Flow</b>, we need to build the
In order to initiate the <b>WebAuthn</b>, we proceed the same way as we would if we would be using <b>Authorization Code Flow</b> we need to build the
authorization URL
and redirect the user to the authorization server. The URL is constructed as
and redirect the user to the authorization server. All the passwordless logic is handled completely by the authorization server. The URL is constructed as
follows:
</p>
<pre class="code-block"><code id="requestUriExample"></code></pre>
@@ -119,10 +119,7 @@
attack</a>).</p>
</li>
</ul>
<p>All that we now need to do is click the button below and login with our credentials.
For the purposes of this
playground we already took the liberty to create <b>user</b> with password
<b>user</b> for you. After your credentials are successfully verified, you will be
<p>All that we now need to do is click the button below and perform the <b>Web Authentication Flow</b> on the server. After your account will be successfully verified, you will be
redirected back to this playground, to the URL we have specified in the
<b>redirect_uri</b> query parameter of the request.</p>
<div class="row flow-submit-container">
@@ -141,6 +138,7 @@
</main>
<footer class="page-footer"></footer>
<script src="../js/load-layout.js"></script>
<script src="../js/cookies.js"></script>
<script src="../js/env-config.js"></script>
<script>
const authUrl = baseUrl + "/passwordless"
@@ -183,6 +181,7 @@
const redirectUri = getRedirectUri();
const scope = "offline_access";
const state = generateSessionState();
setCookie("webauth-state", state, 5);
fillExample();
$("#sendRequestBtn").attr("href", constructRequestUrl());

6
src/sitemap.xml
View File

@@ -18,4 +18,10 @@
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://oauth-playground.online/flow/webauthn</loc>
<lastmod>2023-09-26</lastmod>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
</urlset>