github-mirrors/oauth-playground-client
1
0
Fork 0
mirror of https://github.com/ysoftdevs/oauth-playground-client.git synced 2026-05-08 17:03:40 +02: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

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>