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

Various fixes and improvements

Browse Source
This commit is contained in:
konarfil
2023-09-22 15:31:41 +02:00
parent 7e4e38cc88
commit dd7d683d2d
6 changed files with 85 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/css/style.css
View File

@@ -188,4 +188,9 @@ pre {
.section-header {
text-align: center;
}
.centered {
text-align: center;
width: 100%;
}

58
src/flow/code-1.html
View File

@@ -55,17 +55,11 @@
<div class="card-stacked">
<div class="card-content">
<h6>1. Build the Authorization URL</h6>
<pre class="code-block"><code><span id="baseUrl"></span>?
&<span id="responseType"></span>
&<span id="clientId"></span>
&<span id="redirectUri"></span>
&<span id="scope"></span>
&<span id="state"></span></code></pre>
<pre class="code-block"><code id="requestUriExample"></code></pre>
<h6>Let's break it down...</h6>
<ul class="collection">
<li class="collection-item">
<p><b><span id="baseUrlExpl"></span></b>
<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 or Okta). to
@@ -75,31 +69,31 @@
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">response_type</span>=<span id="responseTypeExpl"></span></b></p>
<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 code.</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">client_id</span>=<span id="clientIdExpl"></span></b></p>
<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="redirectUriExpl"></span></b></p>
<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>
</li>
<li class="collection-item">
<p><b><span class="emphasis">scope</span>=<span id="scopeExpl"></span></b></p>
<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 offline_access 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="stateExpl"></span></b></p>
<p><b><span class="emphasis">state</span>=<span id="state"></span></b></p>
<p>State parameter. This is an optional parameter 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,
@@ -116,10 +110,13 @@
</div>
</div>
</div>
<div class="section centered">
<a href="/">[ Take me home ]</a>
</div>
</div>
</main>
<footer class="page-footer"></footer>
<script src="js/load-layout.js"></script>
<script src="../js/load-layout.js"></script>
<script>
function setCookie(name, value, minutes) {
const date = new Date();
@@ -143,6 +140,23 @@
+ "&" + "state=" + state;
}
function fillExample() {
const requestExample = baseUrl + "\n"
+ " ?response_type=" + responseType + "\n"
+ " &client_id=" + clientId + "\n"
+ " &redirect_uri=" + redirectUri + "\n"
+ " &scope=" + scope + "\n"
+ " &state=" + state;
$("#requestUriExample").text(requestExample);
$("#baseUrl").text(baseUrl);
$("#responseType").text(responseType);
$("#clientId").text(clientId);
$("#redirectUri").text(redirectUri);
$("#scope").text(scope);
$("#state").text(state);
}
function getRedirectUri() {
return window.location.protocol + "//" + window.location.host + "/flow/code-2";
}
@@ -154,22 +168,8 @@
const scope = "offline_access";
const state = generateSessionState();
console.debug(window.location);
fillExample();
$("#sendRequestBtn").attr("href", constructRequestUrl());
$("#baseUrl").text(baseUrl);
$("#baseUrlExpl").text(baseUrl);
$("#responseType").text("response_type=" + responseType);
$("#responseTypeExpl").text(responseType);
$("#clientId").text("client_id=" + clientId);
$("#clientIdExpl").text(clientId);
$("#redirectUri").text("redirect_uri=" + redirectUri);
$("#redirectUriExpl").text(redirectUri);
$("#scope").text("scope=" + scope);
$("#scopeExpl").text(scope);
$("#state").text("state=" + state);
$("#stateExpl").text(state);
</script>
</body>
</html>

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

@@ -85,10 +85,13 @@
</div>
</div>
</div>
<div class="section centered">
<a href="/">[ Take me home ]</a>
</div>
</div>
</main>
<footer class="page-footer"></footer>
<script src="js/load-layout.js"></script>
<script src="../js/load-layout.js"></script>
<script>
$("#queryParams").text(window.location.search)

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

@@ -97,10 +97,13 @@
</div>
</div>
</div>
<div class="section centered">
<a href="/">[ Take me home ]</a>
</div>
</div>
</main>
<footer class="page-footer"></footer>
<script src="js/load-layout.js"></script>
<script src="../js/load-layout.js"></script>
<script>
const tokenEndpoint = 'https://sso.rumbuddy.cz/realms/OAuthPlayground/protocol/openid-connect/token';
const clientID = 'oauth-playground';

4
src/js/load-layout.js
View File

@@ -1,2 +1,2 @@
$(".page-footer").load("layout/footer.html");
$("#page-header").load("layout/header.html");
$(".page-footer").load("/layout/footer.html");
$("#page-header").load("/layout/header.html");

76
src/layout/footer.html
View File

@@ -1,38 +1,44 @@
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">OAuth Playground</h5>
<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.
</p>
<div>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">OAuth Playground</h5>
<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.
</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>
</ul>
</div>
</div>
</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>
</ul>
<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>
</div>
</div>
</div>
</div>
<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>
</div>
</footer>
</div>