github-mirrors/oauth-playground-client
1
0
Fork 0
mirror of https://github.com/ysoftdevs/oauth-playground-client.git synced 2026-03-14 06:06:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Formatting cleanup

Browse Source
This commit is contained in:
konarfil
2023-09-27 10:17:32 +02:00
parent 4b4687b899
commit 8aa2963d4f
17 changed files with 428 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/css/style.css
View File

@@ -234,6 +234,11 @@ pre {
text-align: center;
}
.y-colored {
color: #FF6600 !important;
font-weight: bold;
}
@media screen and (max-width: 600px) {
.page-header {
font-size: 1.5rem;

31
src/flow/code-2.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,14 +12,14 @@
<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/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>
@@ -56,25 +57,33 @@
<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>
<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>
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>
<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>
<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>
@@ -117,4 +126,4 @@
}
</script>
</body>
</html>
</html>

62
src/flow/code-3.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,14 +12,14 @@
<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/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>
@@ -72,9 +73,10 @@
</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>
<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>
@@ -82,13 +84,11 @@
</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>
<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>
<a id="get-token-btn" class="waves-effect waves-light btn full-width" onClick="getToken()">Get access token</a>
</div>
</div>
</div>
@@ -106,43 +106,45 @@
<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>
<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>
<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>
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>
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>
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>
<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>
@@ -218,4 +220,4 @@
fillRequestExample();
</script>
</body>
</html>
</html>

71
src/flow/code.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,14 +12,14 @@
<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/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>
@@ -64,51 +65,60 @@
<p>Let's break it down...</p>
<ul class="collection">
<li class="collection-item">
<p><b><span id="baseUrl"></span></b>
</p>
<p>URL of the authorization endpoint on the server. How is this path constructed will
differ between OAuth providers (such as Keycloak, Okta, etc.).
<p><b><span id="baseUrl"></span></b></p>
<p>
URL of the authorization endpoint on the server. How is this path constructed will
differ between OAuth providers (such as Keycloak, Okta, etc.).
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">response_type</span>=<span id="responseType"></span></b></p>
<p>OAuth 2.0 response type. In this case, we are using the Authorization Code flow, so
we are requesting the authorization <b>code</b>.</p>
<p>
OAuth 2.0 response type. In this case, we are using the Authorization Code flow, so
we are requesting the authorization <b>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>
<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>Redirect URI of the client. This is the URL that the authorization server will
redirect the user back to after the user has logged in and
granted permissions. The redirect URI must match one of the URIs registered for the
client ID.</p>
<p>
Redirect URI of the client. This is the URL that the authorization server will
redirect the user back to after the user has logged in and granted permissions.
The redirect URI must match one of the URIs registered for the client ID.
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">scope</span>=<span id="scope"></span></b></p>
<p>Scopes requested by the client. Scopes are used to limit the access of the access
<p>
Scopes requested by the client. Scopes are used to limit the access of the access
token. In this case, we are requesting the <b>offline_access</b> scope,
which allows the client to obtain a refresh token.</p>
which allows the client to obtain a refresh token.
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">state</span>=<span id="state"></span></b></p>
<p>State parameter. This is an <b>optional parameter</b> that the client can use to maintain
state between the request and callback. The authorization
server includes this parameter when redirecting the user back to the client,
allowing the client to verify that the response is coming from the
server and not a malicious third party (<a href="https://owasp.org/www-community/attacks/csrf" target="_blank">CSRF attack</a>).</p>
<p>
State parameter. This is an <b>optional parameter</b> that the client can use to maintain
state between the request and callback. The authorization server includes this parameter when
redirecting the user back to the client, allowing the client to verify that the response is coming from the
server and not a malicious third party (<a href="https://owasp.org/www-community/attacks/csrf" target="_blank">CSRF 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 redirected back to this playground, to the URL we have specified in the <b>redirect_uri</b> query parameter of the request.</p>
<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 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">
<a id="sendRequestBtn" class="waves-effect waves-light btn full-width"
href="#">Authenticate</a>
<a id="sendRequestBtn" class="waves-effect waves-light btn full-width" href="#">Authenticate</a>
</div>
</div>
</div>
@@ -153,6 +163,8 @@
$("#redirectUri").text(redirectUri);
$("#scope").text(scope);
$("#state").text(state);
$("#sendRequestBtn").attr("href", constructRequestUrl());
}
function getRedirectUri() {
@@ -163,10 +175,9 @@
const redirectUri = getRedirectUri();
const scope = "offline_access";
const state = generateSessionState();
setCookie("state", state, 5);
fillExample();
$("#sendRequestBtn").attr("href", constructRequestUrl());
</script>
</body>
</html>
</html>

79
src/flow/dag-2.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,8 +12,7 @@
<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/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>
@@ -20,6 +20,7 @@
<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>
@@ -73,21 +74,16 @@
<p><b><span class="emphasis">client_id</span>=<span id="client-id"></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.
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">device_code</span>=<span id="device-code"></span></b></p>
<p>
Device code we have obtained in the previous step.
</p>
<p>Device code we have obtained in the previous step.</p>
</li>
</ul>
<div class="row flow-submit-container">
<a id="start-polling-btn" class="waves-effect waves-light btn full-width"
onclick="startPolling()">Start polling</a>
<a id="start-polling-btn" class="waves-effect waves-light btn full-width" onclick="startPolling()">Start polling</a>
<div class="progress no-margin">
<div id="polling-bar" class="determinate" style="width: 0%"></div>
</div>
@@ -102,8 +98,9 @@
<div class="card-stacked">
<div class="card-content">
<h6>3. Instruct the user where to enter the code</h6>
<p>Device would typically show the user code on it's display (or in console output when connection to display-less device via SSH for example) and where possible, also the URL that the user should visit. Based on the capabilities the URL could be shown as a simple text, or QR code, or if the device didn't have display capable enough, than the URL could be written in a manual distributed with the device.</p>
<p>
Device would typically show the user code on it's display (or in console output when connection to display-less device via SSH for example) and where possible, also the URL that the user should visit. Based on the capabilities the URL could be shown as a simple text, or QR code, or if the device didn't have display capable enough, than the URL could be written in a manual distributed with the device.
</p>
<div class="row col s12" style="margin-top: 15px;">
<div class="col m2 s0"></div>
<div class="col m3 s12" style="padding-top: 5px;">
@@ -113,12 +110,12 @@
<input id="user-code" type="text" disabled>
</div>
<div class="col m2 s3" style="padding-top: 5px;">
<button title="Copy to clipboard" class="btn-floating waves-effect waves-light" style="background-color: #000000;" onclick="copyUserCodeToClipboard()"><i
class="material-icons" style="font-size:18px;">content_copy</i></button>
<button title="Copy to clipboard" class="btn-floating waves-effect waves-light" style="background-color: #000000;" onclick="copyUserCodeToClipboard()">
<i class="material-icons" style="font-size:18px;">content_copy</i>
</button>
</div>
<div class="col m2 s0"></div>
</div>
<p>Now that we have the user code, we can for example scan a QR code and finalize this flow on our mobile device:</p>
<div class="row qr-container">
<div id="qrcode" style="margin: 0 auto;"></div>
@@ -143,50 +140,46 @@
<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>
<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>
<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>
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>
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>
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 Device Authorization Grant flow. Client application would now be able to request resources on
users behalf without having to transfer his credentials with each request.</p>
<p>
And this concludes the Device Authorization Grant 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>
@@ -329,4 +322,4 @@
fillExample();
</script>
</body>
</html>
</html>

14
src/flow/dag.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,14 +12,14 @@
<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/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>
@@ -57,15 +58,14 @@
<div class="card-content">
<h6>1. Request a Device Code</h6>
<p>
In order to initiate the <b>Device Authorization Grant</b>, we need to request a device code from the authorization server. The request is sent to the following URL:
In order to initiate the <b>Device Authorization Grant</b>, we need to request a device code from the authorization server.
The request is sent to the following URL:
</p>
<pre class="code-block"><code id="requestUriExample"></code></pre>
<p>With body data:</p>
<pre class="code-block"><code id="requestBodyExample"></code></pre>
<div class="row flow-submit-container">
<a id="get-code-btn" class="waves-effect waves-light btn full-width"
onclick="getDeviceCode()">Get Device Code</a>
<a id="get-code-btn" class="waves-effect waves-light btn full-width" onclick="getDeviceCode()">Get Device Code</a>
</div>
</div>
</div>
@@ -177,4 +177,4 @@
fillExample();
</script>
</body>
</html>
</html>

7
src/flow/expired.html
View File

@@ -10,8 +10,7 @@
<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/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>
@@ -31,8 +30,7 @@
Flow could not continue as it was missing vital information. This can be caused by not performing the flow before codes and/or cookies expire, or by manually navigating to section of a flow, before finishing previous steps. <b>Please start the flow again.</b>
</p>
<div class="row flow-submit-container">
<a class="waves-effect waves-light btn full-width"
href="/">Start over</a>
<a class="waves-effect waves-light btn full-width" href="/">Start over</a>
</div>
</div>
</div>
@@ -44,5 +42,4 @@
<footer class="page-footer"></footer>
<script src="../js/load-layout.js"></script>
</body>
</html>

72
src/flow/pkce-2.html
View File

@@ -11,8 +11,7 @@
<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/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>
@@ -63,67 +62,78 @@
<div class="card-stacked">
<div class="card-content">
<h6>2. Build the Authorization URL</h6>
<p>
First we need to build the authorization URL and redirect the user to the authorization server. The URL is constructed as follows:
</p>
<p>First we need to build the authorization URL and redirect the user to the authorization server. The URL is constructed as follows:</p>
<pre class="code-block"><code id="requestUriExample"></code></pre>
<p>Let's break it down...</p>
<ul class="collection">
<li class="collection-item">
<p><b><span id="baseUrl"></span></b>
</p>
<p>URL of the authorization endpoint on the server. How is this path constructed will
<p><b><span id="baseUrl"></span></b></p>
<p>
URL of the authorization endpoint on the server. How is this path constructed will
differ between OAuth providers (such as Keycloak, Okta, etc.).
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">response_type</span>=<span id="responseType"></span></b></p>
<p>OAuth 2.0 response type. In this case, we are using the Authorization Code flow, so
we are requesting the authorization <b>code</b>.</p>
<p>
OAuth 2.0 response type. In this case, we are using the Authorization Code flow, so
we are requesting the authorization <b>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
<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>
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>Redirect URI of the client. This is the URL that the authorization server will
redirect the user back to after the user has logged in and
granted permissions. The redirect URI must match one of the URIs registered for the
client ID.</p>
<p>
Redirect URI of the client. This is the URL that the authorization server will
redirect the user back to after the user has logged in and granted permissions.
The redirect URI must match one of the URIs registered for the client ID.
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">scope</span>=<span id="scope"></span></b></p>
<p>Scopes requested by the client. Scopes are used to limit the access of the access
<p>
Scopes requested by the client. Scopes are used to limit the access of the access
token. In this case, we are requesting the <b>offline_access</b> scope,
which allows the client to obtain a refresh token.</p>
which allows the client to obtain a refresh token.
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">state</span>=<span id="state"></span></b></p>
<p>State parameter. This is an <b>optional parameter</b> that the client can use to maintain
state between the request and callback. The authorization
server includes this parameter when redirecting the user back to the client,
allowing the client to verify that the response is coming from the
server and not a malicious third party (<a href="https://owasp.org/www-community/attacks/csrf" target="_blank">CSRF attack</a>).</p>
<p>
State parameter. This is an <b>optional parameter</b> that the client can use to maintain
state between the request and callback. The authorization server includes this parameter when redirecting the
user back to the client, allowing the client to verify that the response is coming from the
server and not a malicious third party (<a href="https://owasp.org/www-community/attacks/csrf" target="_blank">CSRF attack</a>).
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">code_challenge</span>=<span id="codeChallenge"></span></b></p>
<p>This is the code challenge we have created in the previous step. This ensures that even if an attacker intercepts the authorization code, they can't exchange it for an access token without the original code verifier.</p>
<p>
This is the code challenge we have created in the previous step. This ensures that even if an attacker intercepts the
authorization code, they can't exchange it for an access token without the original code verifier.
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">code_challenge_method</span>=<span id="codeChallengeMethod"></span></b></p>
<p>Code Challenge method tells the identity provider how the <b>code_challenge</b> was generated from the original code verifier. <b>S256</b> means that
the challenge is a base64url encoding of the SHA-256 hash of the verifier. This is the recommended method for PKCE.</p>
<p>
Code Challenge method tells the identity provider how the <b>code_challenge</b> was generated from the original code
verifier. <b>S256</b> means that the challenge is a base64url encoding of the SHA-256 hash of the verifier. This is the recommended method for PKCE.
</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 redirected back to this playground, to the URL we have specified in the <b>redirect_uri</b> query parameter of the request.</p>
<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 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">
<a id="sendRequestBtn" class="waves-effect waves-light btn full-width"
href="#">Authenticate</a>
<a id="sendRequestBtn" class="waves-effect waves-light btn full-width" href="#">Authenticate</a>
</div>
</div>
</div>

47
src/flow/pkce-3.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,14 +12,14 @@
<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/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>
@@ -63,34 +64,42 @@
<div class="card-stacked">
<div class="card-content">
<h6>3. 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>
<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>The state value isn't strictly necessary here since the PKCE parameters provide CSRF protection themselves. In practice,
if you're sure the OAuth server supports PKCE, you can use the state parameter for application state instead of using it
for CSRF protection.</p>
</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>
<p>
The state value isn't strictly necessary here since the PKCE parameters provide CSRF protection themselves. In practice,
if you're sure the OAuth server supports PKCE, you can use the state parameter for application state instead of using it
for CSRF protection.
</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>
<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>
<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>
<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>
@@ -130,4 +139,4 @@
}
</script>
</body>
</html>
</html>

67
src/flow/pkce-4.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,14 +12,14 @@
<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/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>
@@ -79,9 +80,10 @@
</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>
<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>
@@ -89,20 +91,15 @@
</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>
<p>This is the authorization code we got in the previous step and is used to obtain the access token.</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">code_verifier</span>=<span id="codeVerifier"></span></b></p>
<p>This is the code verifier we generated in the first step. It is used to verify the
identity of the client.
</p>
<p>This is the code verifier we generated in the first step. It is used to verify the identity of the client.</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>
<a id="get-token-btn" class="waves-effect waves-light btn full-width" onClick="getToken()">Get access token</a>
</div>
</div>
</div>
@@ -120,42 +117,46 @@
<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>
<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>
<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>
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>
<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>
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 with PKCE. Client application would now be able to request resources on users behalf without having to transfer his credentials with each request.</p>
<p>
And this concludes the Authorization Code Flow with PKCE. 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>

24
src/flow/pkce.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,14 +11,14 @@
<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/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>
@@ -62,7 +63,9 @@
<div class="card-stacked">
<div class="card-content">
<h6>1. Create a Code Verifier and Challenge</h6>
<p>Before we can start the authorization process, we need to create a <b>code verifier</b> and a <b>code challenge</b>. The code verifier is a cryptographically random string that is used to verify the identity of the client. The code challenge is a hashed version of the code verifier, which is sent to the authorization server. The authorization server will then compare the code challenge with the code verifier to verify the identity of the client.</p>
<p>
Before we can start the authorization process, we need to create a <b>code verifier</b> and a <b>code challenge</b>. The code verifier is a cryptographically random string that is used to verify the identity of the client. The code challenge is a hashed version of the code verifier, which is sent to the authorization server. The authorization server will then compare the code challenge with the code verifier to verify the identity of the client.
</p>
</p>
<div class="row" style="margin-top: 20px;">
<div class="col m3 s12">
@@ -72,9 +75,10 @@
<input id="codeVerifier" style="height: 30px;" type="text" disabled/>
</div>
</div>
<p>Now that we habe the code verified, we need to create the code challenge. We do so by hashing the code verifier using the SHA256 algorithm and then encoding it using the URL-safe Base64 encoding.</p>
<p>
Now that we habe the code verified, we need to create the code challenge. We do so by hashing the code verifier using the SHA256 algorithm and
then encoding it using the URL-safe Base64 encoding.
</p>
<div class="row" style="margin-top: 20px;">
<div class="col m3 s12">
<div id="code-challenge-btn" class="waves-effect waves-light btn full-width disabled" onclick="generateCodeChallenge()">Generate Code Challenge</div>
@@ -83,12 +87,10 @@
<input id="codeChallenge" style="height: 30px;" type="text" disabled />
</div>
</div>
<p>Now that we have the code verifier and code challenge, we can start the authorization process.</p>
</p>
<div class="row flow-submit-container">
<a id="continue-btn" class="waves-effect waves-light btn full-width disabled"
href="/flow/pkce-2">Continue</a>
<a id="continue-btn" class="waves-effect waves-light btn full-width disabled" href="/flow/pkce-2">Continue</a>
</div>
</div>
</div>
@@ -124,10 +126,7 @@
const verifier = $('#codeVerifier').val();
const encoder = new TextEncoder();
const data = encoder.encode(verifier);
const digest = await crypto.subtle.digest('SHA-256', data);
// Convert hash to Base64 URL encoded string
const base64UrlEncoded = btoa(String.fromCharCode(...new Uint8Array(digest)))
.replace('+', '-')
.replace('/', '_')
@@ -140,5 +139,4 @@
}
</script>
</body>
</html>

34
src/flow/webauthn-2.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,14 +12,14 @@
<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/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>
@@ -56,25 +57,34 @@
<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>
<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>
<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>
<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>
<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>
@@ -117,4 +127,4 @@
}
</script>
</body>
</html>
</html>

63
src/flow/webauthn-3.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,14 +12,14 @@
<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/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>
@@ -72,9 +73,10 @@
</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>
<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>
@@ -82,13 +84,11 @@
</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>
<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>
<a id="get-token-btn" class="waves-effect waves-light btn full-width" onClick="getToken()">Get access token</a>
</div>
</div>
</div>
@@ -106,43 +106,46 @@
<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>
<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>
<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>
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>
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>
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>
<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>
@@ -218,4 +221,4 @@
fillRequestExample();
</script>
</body>
</html>
</html>

88
src/flow/webauthn.html
View File

@@ -12,8 +12,7 @@
<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/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>
@@ -60,71 +59,65 @@
<h6>1. Build the Authorization URL</h6>
<p>
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. All the passwordless logic is handled completely by the authorization server. The URL is constructed as
follows:
authorization URL 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>
<p>Let's break it down...</p>
<ul class="collection">
<li class="collection-item">
<p><b><span id="baseUrl"></span></b>
</p>
<p>URL of the authorization endpoint on the server. How is this path constructed
will
differ between OAuth providers (such as Keycloak, Okta, etc.).
<p><b><span id="baseUrl"></span></b></p>
<p>
URL of the authorization endpoint on the server. How is this path constructed
will differ between OAuth providers (such as Keycloak, Okta, etc.).
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">response_type</span>=<span
id="responseType"></span></b></p>
<p>OAuth 2.0 response type. In this case, we are using the Authorization Code
flow, so
we are requesting the authorization <b>code</b>.</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">client_id</span>=<span id="clientId"></span></b>
<p><b><span class="emphasis">response_type</span>=<span id="responseType"></span></b></p>
<p>
OAuth 2.0 response type. In this case, we are using the Authorization Code
flow, so we are requesting the authorization <b>code</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>Redirect URI of the client. This is the URL that the authorization server
will
redirect the user back to after the user has logged in and
<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>
Redirect URI of the client. This is the URL that the authorization server
will redirect the user back to after the user has logged in and
granted permissions. The redirect URI must match one of the URIs registered
for the
client ID.</p>
for the client ID.
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">scope</span>=<span id="scope"></span></b></p>
<p>Scopes requested by the client. Scopes are used to limit the access of the
access
token. In this case, we are requesting the <b>offline_access</b> scope,
which allows the client to obtain a refresh token.</p>
<p>
Scopes requested by the client. Scopes are used to limit the access of the
access token. In this case, we are requesting the <b>offline_access</b> scope,
which allows the client to obtain a refresh token.
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">state</span>=<span id="state"></span></b></p>
<p>State parameter. This is an <b>optional parameter</b> that the client can use
to maintain
state between the request and callback. The authorization
<p>
State parameter. This is an <b>optional parameter</b> that the client can use
to maintain state between the request and callback. The authorization
server includes this parameter when redirecting the user back to the client,
allowing the client to verify that the response is coming from the
server and not a malicious third party (<a
href="https://owasp.org/www-community/attacks/csrf" target="_blank">CSRF
attack</a>).</p>
server and not a malicious third party (<a href="https://owasp.org/www-community/attacks/csrf" target="_blank">CSRF attack</a>).
</p>
</li>
</ul>
<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>
<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">
<a id="sendRequestBtn" class="waves-effect waves-light btn full-width"
href="#">Authenticate</a>
<a id="sendRequestBtn" class="waves-effect waves-light btn full-width" href="#">Authenticate</a>
</div>
</div>
</div>
@@ -141,8 +134,6 @@
<script src="../js/cookies.js"></script>
<script src="../js/env-config.js"></script>
<script>
const authUrl = baseUrl + "/passwordless"
function generateSessionState() {
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}
@@ -171,12 +162,15 @@
$("#redirectUri").text(redirectUri);
$("#scope").text(scope);
$("#state").text(state);
$("#sendRequestBtn").attr("href", constructRequestUrl());
}
function getRedirectUri() {
return window.location.protocol + "//" + window.location.host + "/flow/webauthn-2";
}
const authUrl = baseUrl + "/passwordless"
const responseType = "code";
const redirectUri = getRedirectUri();
const scope = "offline_access";
@@ -184,8 +178,6 @@
setCookie("webauth-state", state, 5);
fillExample();
$("#sendRequestBtn").attr("href", constructRequestUrl());
</script>
</body>
</html>

128
src/index.html
View File

@@ -19,29 +19,28 @@
<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>
<header id="page-header"></header>
<main>
<div class="container">
<div class="section intro-section">
<h3 class="header section-header">Welcome to OAuth 2.0 Playground</h3>
<p>This playground serves as an interactive platform designed to familiarize developers and students with the
intricacies of OAuth authentication processes. Beyond just theoretical knowledge, this playground provides practical
insights into the OAuth token exchange,
callback handling, and potential pitfalls or challenges one might face during real-world integrations. The ultimate aim
is to bolster
understanding and confidence in implementing OAuth, ensuring secure and efficient user authentication and authorization
in modern web applications.</p>
<p>
This playground serves as an interactive platform designed to familiarize developers and students with the
intricacies of OAuth authentication processes. Beyond just theoretical knowledge, this playground provides practical
insights into the OAuth token exchange,
callback handling, and potential pitfalls or challenges one might face during real-world integrations. The ultimate aim
is to bolster
understanding and confidence in implementing OAuth, ensuring secure and efficient user authentication and authorization
in modern web applications.
</p>
<p>This project is an open-source initiative by Y Soft, as such we welcome any feedback or contributions at:</p>
<ul class="list">
<li><b>Client side: </b><a
href="https://github.com/ysoftdevs/oauth-playground-client" target="_blank">ysoftdevs/oauth-playground-client</a></li>
<li><b>Server side: </b><a
href="https://github.com/ysoftdevs/oauth-playground-server" target="_blank">ysoftdevs/oauth-playground-server</a></li>
<li><b>Client side: </b><a href="https://github.com/ysoftdevs/oauth-playground-client" target="_blank">ysoftdevs/oauth-playground-client</a></li>
<li><b>Server side: </b><a href="https://github.com/ysoftdevs/oauth-playground-server" target="_blank">ysoftdevs/oauth-playground-server</a></li>
</ul>
</div>
<div class="section">
<h3 class="header section-header">Flows</h3>
<div class="divider" style="margin-bottom: 10px;"></div>
@@ -51,12 +50,14 @@
<div class="card-stacked flow-card">
<div class="card-content">
<h5>Authorization Code Flow</h5>
<p class="justified">OAuth 2.0 protocol designed for web applications that can securely store client secrets.
The application directs users to an authorization server to log in and grant permissions. Upon consent, the server
issues an authorization code. The application then exchanges this code for an access token in a server-to-server
request, using its client ID, client secret, and redirection URI. This flow ensures the access token is never directly
exposed to users, offering enhanced security. It's best suited for server-side web applications with the capability to
protect the client secret.</p>
<p class="justified">
OAuth 2.0 protocol designed for web applications that can securely store client secrets.
The application directs users to an authorization server to log in and grant permissions. Upon consent, the server
issues an authorization code. The application then exchanges this code for an access token in a server-to-server
request, using its client ID, client secret, and redirection URI. This flow ensures the access token is never directly
exposed to users, offering enhanced security. It's best suited for server-side web applications with the capability to
protect the client secret.
</p>
</div>
<div class="card-action">
<a href="/flow/code">Try it</a>
@@ -69,12 +70,14 @@
<div class="card-stacked flow-card">
<div class="card-content">
<h5>PKCE</h5>
<p class="justified">Proof Key for Code Exchange is a security protocol for the OAuth 2.0 authorization framework, designed to prevent
interception attacks in the authorization code flow. It's especially crucial for mobile or single-page applications
where storing a client secret securely is challenging. In PKCE, the client creates a dynamic "code verifier" and its
transformed "code challenge." The server remembers this challenge, and when the authorization code is exchanged for an
access token, the client provides the original verifier. The server validates it against the stored challenge, ensuring
added security against malicious interceptions.</p>
<p class="justified">
Proof Key for Code Exchange is a security protocol for the OAuth 2.0 authorization framework, designed to prevent
interception attacks in the authorization code flow. It's especially crucial for mobile or single-page applications
where storing a client secret securely is challenging. In PKCE, the client creates a dynamic "code verifier" and its
transformed "code challenge." The server remembers this challenge, and when the authorization code is exchanged for an
access token, the client provides the original verifier. The server validates it against the stored challenge, ensuring
added security against malicious interceptions.
</p>
</div>
<div class="card-action">
<a href="/flow/pkce">Try it</a>
@@ -87,13 +90,15 @@
<div class="card-stacked flow-card">
<div class="card-content">
<h5>Device Authorization Grant</h5>
<p class="justified">OAuth 2.0 flow optimized for devices that either lack a browser or have limited input
capabilities, such as smart TVs, game consoles, and certain IoT devices. In this flow, the device makes a request to the
authorization server and receives a unique user code and a verification URL. The user then accesses this URL on a
separate device with a browser, like a smartphone or computer, and enters the user code. After successfully logging in
and providing consent, the device polls the authorization server to obtain an access token. This method ensures a
streamlined user experience for devices with restricted input or display capabilities, allowing them to access protected
resources without the need for intricate user interactions.</p>
<p class="justified">
OAuth 2.0 flow optimized for devices that either lack a browser or have limited input
capabilities, such as smart TVs, game consoles, and certain IoT devices. In this flow, the device makes a request to the
authorization server and receives a unique user code and a verification URL. The user then accesses this URL on a
separate device with a browser, like a smartphone or computer, and enters the user code. After successfully logging in
and providing consent, the device polls the authorization server to obtain an access token. This method ensures a
streamlined user experience for devices with restricted input or display capabilities, allowing them to access protected
resources without the need for intricate user interactions.
</p>
</div>
<div class="card-action underConstruction">
<a href="/flow/dag">Try it</a>
@@ -106,17 +111,14 @@
<div class="card-stacked flow-card">
<div class="card-content">
<h5>WebAuthn</h5>
<p class="justified">This protocol leverages public key cryptography and allows users to authenticate
using biometrics, mobile devices, or
FIDO security keys, instead of traditional passwords. When a user registers with a website, a unique
key pair is
generated: the private key stays securely on the user's device, and the public key is registered
with the website. For
subsequent logins, the website challenges the user to prove ownership of the private key, typically
by prompting for a
biometric or a physical action on a security key. WebAuthn enhances user security by reducing
reliance on easily
compromised passwords and defending against phishing attacks.</p>
<p class="justified">
This protocol leverages public key cryptography and allows users to authenticate using biometrics, mobile devices, or
FIDO security keys, instead of traditional passwords. When a user registers with a website, a unique key pair is
generated: the private key stays securely on the user's device, and the public key is registered with the website. For
subsequent logins, the website challenges the user to prove ownership of the private key, typically by prompting for a
biometric or a physical action on a security key. WebAuthn enhances user security by reducing reliance on easily
compromised passwords and defending against phishing attacks.
</p>
</div>
<div class="card-action">
<a href="/flow/webauthn">Try it</a>
@@ -129,21 +131,15 @@
<div class="card-stacked flow-card">
<div class="card-content">
<h5>CIBA</h5>
<p class="justified">Client Initiated Backchannel Authentication is a protocol extension for OAuth 2.0,
tailored for scenarios where
the client, such as a financial institution or IoT device, initiates the authentication process
without direct user
interaction on the client's platform. This is useful for "decoupled" authentication experiences,
where, for instance, a
user might authenticate on their smartphone when prompted by a smart TV app. In CIBA, once the
client requests
authentication, the authorization server prompts the user on a previously registered device, such as
their mobile phone.
Upon successful authentication, the authorization server sends a token back to the client. This flow
provides a seamless
and secure user experience, especially in contexts where traditional OAuth 2.0 interactions might be
cumbersome or
impractical.</p>
<p class="justified">
Client Initiated Backchannel Authentication is a protocol extension for OAuth 2.0, tailored for scenarios where
the client, such as a financial institution or IoT device, initiates the authentication process without direct user
interaction on the client's platform. This is useful for "decoupled" authentication experiences, where, for instance, a
user might authenticate on their smartphone when prompted by a smart TV app. In CIBA, once the client requests
authentication, the authorization server prompts the user on a previously registered device, such as their mobile phone.
Upon successful authentication, the authorization server sends a token back to the client. This flow provides a seamless
and secure user experience, especially in contexts where traditional OAuth 2.0 interactions might be cumbersome or impractical.
</p>
</div>
<div class="card-action underConstruction">
<i class="tiny material-icons">build</i> Under construction
@@ -156,11 +152,13 @@
<div class="card-stacked flow-card">
<div class="card-content">
<h5>Implicit Flow</h5>
<p class="justified">OAuth 2.0 Implicit Flow was designed for browser-based applications where the client cannot maintain the confidentiality
of a secret. In this flow, after user authorization, the authorization server directly redirects the browser to the
client application with an access token in the URL fragment. However, this can expose tokens in browser history or logs,
making it less secure. Consequently, the use of Implicit Flow is being discouraged in favor of the more secure
Authorization Code Flow with PKCE in recent OAuth specifications.</p>
<p class="justified">
OAuth 2.0 Implicit Flow was designed for browser-based applications where the client cannot maintain the confidentiality
of a secret. In this flow, after user authorization, the authorization server directly redirects the browser to the
client application with an access token in the URL fragment. However, this can expose tokens in browser history or logs,
making it less secure. Consequently, the use of Implicit Flow is being discouraged in favor of the more secure
Authorization Code Flow with PKCE in recent OAuth specifications.
</p>
</div>
<div class="card-action underConstruction">
<i class="tiny material-icons">build</i> Under construction
@@ -175,4 +173,4 @@
<footer class="page-footer"></footer>
<script src="js/load-layout.js"></script>
</body>
</html>
</html>

34
src/layout/footer.html
View File

@@ -4,27 +4,20 @@
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">OAuth 2.0 Playground</h5>
<p class="grey-text text-lighten-4">This playground serves as an interactive platform designed to
familiarize developers and students with the
<p class="grey-text text-lighten-4">
This playground serves as an interactive platform designed to familiarize developers and students with the
intricacies of OAuth authentication processes. Beyond just theoretical knowledge, this playground
provides practical insights into the OAuth token exchange,
callback handling, and potential pitfalls or challenges one might face during real-world
integrations. The ultimate aim is to bolster
understanding and confidence in implementing OAuth, ensuring secure and efficient user
authentication and authorization
in modern web applications.
provides practical insights into the OAuth token exchange, callback handling, and potential pitfalls or challenges one
might face during real-world integrations. The ultimate aim is to bolster understanding and confidence in
implementing OAuth, ensuring secure and efficient user authentication and authorization in modern web applications.
</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="https://www.oauth.com/" target="_blank">OAuth 2.0
Simplified</a></li>
<li><a class="grey-text text-lighten-3" href="https://en.wikipedia.org/wiki/OAuth"
target="_blank">OAuth
Wikipedia</a></li>
<li><a class="grey-text text-lighten-3" href="https://www.ietf.org/rfc/rfc6749.txt"
target="_blank">OAuth 2.0 RFC</a></li>
<li><a class="grey-text text-lighten-3" href="https://www.oauth.com/" target="_blank">OAuth 2.0 Simplified</a></li>
<li><a class="grey-text text-lighten-3" href="https://en.wikipedia.org/wiki/OAuth" target="_blank">OAuth Wikipedia</a></li>
<li><a class="grey-text text-lighten-3" href="https://www.ietf.org/rfc/rfc6749.txt" target="_blank">OAuth 2.0 RFC</a></li>
</ul>
</div>
</div>
@@ -32,13 +25,10 @@
<div class="footer-copyright">
<div class="container">
© 2023 Y Soft Corporation (
<a class="grey-text text-lighten-4" style="color:#FF6600 !important; font-weight:bold;"
href="https://github.com/m0rsalis" target="_blank">m0rsalis</a> and
<a class="grey-text text-lighten-4" style="color:#FF6600 !important; font-weight:bold;"
href="https://github.com/xRodney/" target="_blank">xRodney</a> )
<a class="grey-text text-lighten-4 right" style="color:#FF6600 !important; font-weight:bold;"
href="https://www.daretothinkbyg.com" target="_blank">Join us today!</a>
<a class="y-colored" href="https://github.com/m0rsalis" target="_blank">m0rsalis</a> and
<a class="y-colored" href="https://github.com/xRodney/" target="_blank">xRodney</a> )
<a class="y-colored right" href="https://www.daretothinkbyg.com" target="_blank">Join us today!</a>
</div>
</div>
</footer>
</div>
</div>

2
src/layout/header.html
View File

@@ -2,7 +2,7 @@
<div class="nav-wrapper page-header">
<a href="/" class="">
OAuth 2.0 Playground
<span style="font-size: 15px; color:#FF6600; font-weight:bold;">by Y Soft</span>
<span class="y-colored" style="font-size: 15px;">by Y Soft</span>
</a>
</div>
</nav>