mirror of
https://github.com/ysoftdevs/oauth-playground-client.git
synced 2026-01-11 22:41:29 +01:00
WebAuthn impl
This commit is contained in:
konarfil
120
src/flow/webauthn-2.html
Normal file
120
src/flow/webauthn-2.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OAuth 2.0 Playground - WebAuthn (2/3)</title>
|
||||
<meta name="description"
|
||||
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" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CVH4GP5T69"></script>
|
||||
<script src="../js/analytics.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header id="page-header"></header>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
<h3 class="header centered">WebAuthn</h3>
|
||||
<div class="circle-container circle-3">
|
||||
<div class="circle">
|
||||
1
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="circle">
|
||||
2
|
||||
</div>
|
||||
<div class="line line-inactive"></div>
|
||||
<div class="circle circle-inactive">
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s4 circle-text">
|
||||
Build the authorization URL and redirect the user to the authorization server
|
||||
</div>
|
||||
<div class="col s4 circle-text">
|
||||
After the user is redirected back to the client, verify that the state matches
|
||||
</div>
|
||||
<div class="col s4 circle-text">
|
||||
Exchange the authorization code for an access token
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="col s12 m7">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked">
|
||||
<div class="card-content">
|
||||
<h6>2. Verify the state parameter</h6>
|
||||
<p>You have now been redirected back to the application, to the page that was specified in the <b>redirect-url</b> parameter. In the URL you can notice, that there are addtional query parameters:</p>
|
||||
<pre class="code-block"><code id="queryParams"></code></pre>
|
||||
<p>Let's break it down...</p>
|
||||
<ul class="collection">
|
||||
<li class="collection-item">
|
||||
<p><b><span class="emphasis">state</span>=<span id="state"></span></b></p>
|
||||
<p>The state parameter is an opaque value used by the client to maintain state between the request and the callback.
|
||||
Essentially, it is used to prevent Cross-Site Request Forgery (<a href="https://owasp.org/www-community/attacks/csrf" target="_blank">CSRF</a>) attacks and to ensure the response belongs to the request made by the client.
|
||||
</p>
|
||||
</li>
|
||||
<li class="collection-item">
|
||||
<p><b><span class="emphasis">code</span>=<span id="code"></span></b></p>
|
||||
<p>The code parameter contains the actual authorization code. This is a temporary code that the client can exchange for an
|
||||
access token (and optionally, a refresh token) by making a back-channel request to the Authorization Server.
|
||||
The format and structure of the code is determined by the Authorization Server. It can be just a random string, or a more complex construction. The exact significance of this structure is specific to the Authorization Server implementation and might include different identifiers or information encoded in
|
||||
the structure.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Now we have everything necessary to obtain token for the user. But is the state we have sent (<b><span id="sent-state"></span></b>) equivalent to the one we received back (<b><span id="received-state"></span></b>)?</p>
|
||||
<div class="row flow-submit-container">
|
||||
<div class="col m6 s12" style="margin-bottom: 5px;">
|
||||
<a class="waves-effect waves-light btn btn-success full-width" onclick="proceedToNextStep()">States are matching</a>
|
||||
</div>
|
||||
<div class="col m6 s12">
|
||||
<a class="waves-effect waves-light btn btn-error full-width" href="/flow/code">States are not matching</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section centered">
|
||||
<a href="/">[ Take me home ]</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="page-footer"></footer>
|
||||
<script src="../js/load-layout.js"></script>
|
||||
<script src="../js/cookies.js"></script>
|
||||
<script>
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const code = urlParams.get("code");
|
||||
const state = urlParams.get("state");
|
||||
const sentState = getCookie("webauth-state");
|
||||
|
||||
if (!code || !state || !sentState) {
|
||||
window.location = "/flow/expired";
|
||||
}
|
||||
|
||||
$("#queryParams").text(window.location.search)
|
||||
$("#state").text(state);
|
||||
$("#sent-state").text(sentState);
|
||||
$("#received-state").text(state);
|
||||
$("#code").text(code);
|
||||
|
||||
function proceedToNextStep() {
|
||||
window.location.href = "/flow/webauthn-3" + window.location.search;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
221
src/flow/webauthn-3.html
Normal file
221
src/flow/webauthn-3.html
Normal file
@@ -0,0 +1,221 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OAuth 2.0 Playground - WebAuthn (3/3)</title>
|
||||
<meta name="description"
|
||||
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" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CVH4GP5T69"></script>
|
||||
<script src="../js/analytics.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header id="page-header"></header>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
<h3 class="header centered">WebAuthn</h3>
|
||||
<div class="circle-container circle-3">
|
||||
<div class="circle">
|
||||
1
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="circle">
|
||||
2
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="circle">
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s4 circle-text">
|
||||
Build the authorization URL and redirect the user to the authorization server
|
||||
</div>
|
||||
<div class="col s4 circle-text">
|
||||
After the user is redirected back to the client, verify that the state matches
|
||||
</div>
|
||||
<div class="col s4 circle-text">
|
||||
Exchange the authorization code for an access token
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="col s12 m7">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked">
|
||||
<div class="card-content">
|
||||
<h6>3. Exchange the code for token</h6>
|
||||
<p>Now that we have the authorization code, we can exchange it for an access token. This is done by sending a <b>POST</b> request to the token endpoint.</p>
|
||||
<pre class="code-block"><code id="requestUriExample"></code></pre>
|
||||
<p>With body data:</p>
|
||||
<pre class="code-block"><code id="requestBodyExample"></code></pre>
|
||||
<p6>Let's break it down...</p>
|
||||
<ul class="collection">
|
||||
<li class="collection-item">
|
||||
<p><b><span id="tokenUrl"></span></b></p>
|
||||
<p>The token endpoint URL</p>
|
||||
</li>
|
||||
<li class="collection-item">
|
||||
<p><b><span class="emphasis">grant_type</span>=<span id="grantType"></span></b></p>
|
||||
<p>The grant type, in this case <b>authorization_code</b></p>
|
||||
</li>
|
||||
<li class="collection-item">
|
||||
<p><b><span class="emphasis">client_id</span>=<span id="clientId"></span></b></p>
|
||||
<p>Client ID of the application. This is a public identifier for the client, and it is
|
||||
used by the authorization server to identify the application
|
||||
when redirecting the user back to the client.</p>
|
||||
</li>
|
||||
<li class="collection-item">
|
||||
<p><b><span class="emphasis">redirect_uri</span>=<span id="redirectUri"></span></b></p>
|
||||
<p>The redirect URI</p>
|
||||
</li>
|
||||
<li class="collection-item">
|
||||
<p><b><span class="emphasis">code</span>=<span id="code"></span></b></p>
|
||||
<p>This is the authorization code we got in the previous step and is used to obtain the
|
||||
access token.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="row flow-submit-container">
|
||||
<a id="get-token-btn" class="waves-effect waves-light btn full-width"
|
||||
onClick="getToken()">Get access token</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="token-result" style="display: none;" class="section">
|
||||
<div class="col s12 m7">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked">
|
||||
<div class="card-content">
|
||||
<h6>Congratulations, you have just obtained an <b>access token</b></h6>
|
||||
<pre class="code-block"><code id="token"></code></pre>
|
||||
<h6>Let's break down what we have received...</h6>
|
||||
<ul class="collection">
|
||||
<li class="collection-item">
|
||||
<p><b>token_type</b></p>
|
||||
<p>Indicates the type of token issued. In OAuth 2.0, the common type is "Bearer", which means that whoever bears
|
||||
the token
|
||||
can access the resources.</p>
|
||||
</li>
|
||||
<li class="collection-item">
|
||||
<p><b>expires_in</b></p>
|
||||
<p>Indicates the number of seconds for which the <b>access_token</b> is valid. After this time, the access_token
|
||||
will expire and a
|
||||
new one must be obtained.</p>
|
||||
</li>
|
||||
<li class="collection-item">
|
||||
<p><b>access_token</b></p>
|
||||
<p>This is the actual access token, which allows the client application to access the user's protected resources
|
||||
on the
|
||||
resource server (e.g., user profile, photos, etc.).
|
||||
</p>
|
||||
</li>
|
||||
<li class="collection-item">
|
||||
<p><b>refresh_token</b></p>
|
||||
<p>Used to obtain a new <b>access_token</b> when the current one expires. This allows the client to get a new
|
||||
<b>access_token</b> without
|
||||
requiring the user to log in again.
|
||||
</p>
|
||||
</li>
|
||||
<li class="collection-item">
|
||||
<p><b>scope</b></p>
|
||||
<p>Specifies the scopes granted by the user to the client application. Scopes determine the permissions
|
||||
associated with the
|
||||
<b>access_token</b>. Here, the granted scopes are email, offline_access, and profile. This means that with
|
||||
the provided access_token, the
|
||||
client application can access the user's email and profile information and is also granted offline access
|
||||
(typically
|
||||
used in conjunction with refresh tokens).
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>And this concludes the Authorization Code Flow. Client application would now be able to request resources on users behalf without having to transfer his credentials with each request.</p>
|
||||
<div class="row flow-submit-container">
|
||||
<a class="waves-effect waves-light btn full-width" href="/">Try different flow</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="page-footer"></footer>
|
||||
<script src="../js/load-layout.js"></script>
|
||||
<script src="../js/env-config.js"></script>
|
||||
<script>
|
||||
const tokenEndpoint = baseUrl + "/token";
|
||||
const code = new URLSearchParams(window.location.search).get('code');
|
||||
|
||||
if (!code) {
|
||||
window.location = "/flow/expired";
|
||||
}
|
||||
|
||||
function fillRequestExample() {
|
||||
const requestExample =
|
||||
"grant_type=authorization_code" + "\n"
|
||||
+ "&client_id=" + getClientId() + "\n"
|
||||
+ "&redirect_uri=" + getRedirectUri() + "\n"
|
||||
+ "&code=" + code;
|
||||
|
||||
$("#requestUriExample").text(tokenEndpoint);
|
||||
$("#requestBodyExample").text(requestExample);
|
||||
|
||||
$("#tokenUrl").text(tokenEndpoint);
|
||||
$("#grantType").text("authorization_code");
|
||||
$("#clientId").text(getClientId());
|
||||
$("#redirectUri").text(getRedirectUri());
|
||||
$("#code").text(code);
|
||||
}
|
||||
|
||||
function getRedirectUri() {
|
||||
return window.location.protocol + "//" + window.location.host + "/flow/webauthn-2";
|
||||
}
|
||||
|
||||
function getToken() {
|
||||
const redirectURI = getRedirectUri();
|
||||
|
||||
const bodyData = new URLSearchParams();
|
||||
bodyData.append('grant_type', 'authorization_code');
|
||||
bodyData.append('client_id', getClientId());
|
||||
bodyData.append('redirect_uri', getRedirectUri());
|
||||
bodyData.append('code', code);
|
||||
|
||||
fetch(tokenEndpoint, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||
},
|
||||
body: bodyData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
$("#token-result").show();
|
||||
$("#token").text(JSON.stringify(data, null, 2));
|
||||
$("#get-token-btn").hide();
|
||||
$([document.documentElement, document.body]).animate({
|
||||
scrollTop: $("#token-result").offset().top
|
||||
}, 1000);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching the token:', error);
|
||||
});
|
||||
}
|
||||
|
||||
fillRequestExample();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,7 +4,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OAuth 2.0 Playground - Authorization Code Flow</title>
|
||||
<title>OAuth 2.0 Playground - WebAuthn</title>
|
||||
<meta name="description"
|
||||
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">
|
||||
@@ -174,7 +174,7 @@
|
||||
}
|
||||
|
||||
function getRedirectUri() {
|
||||
return window.location.protocol + "//" + window.location.host + "/flow/code-2";
|
||||
return window.location.protocol + "//" + window.location.host + "/flow/webauthn-2";
|
||||
}
|
||||
|
||||
const responseType = "code";
|
||||
|
||||
Reference in New Issue
Block a user