github-mirrors/oauth-playground-client
1
0
Fork 0
mirror of https://github.com/ysoftdevs/oauth-playground-client.git synced 2026-03-29 21:41:56 +02: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 { .section-header {
text-align: center; 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-stacked">
<div class="card-content"> <div class="card-content">
<h6>1. Build the Authorization URL</h6> <h6>1. Build the Authorization URL</h6>
<pre class="code-block"><code id="requestUriExample"></code></pre>
<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>
<h6>Let's break it down...</h6> <h6>Let's break it down...</h6>
<ul class="collection"> <ul class="collection">
<li class="collection-item"> <li class="collection-item">
<p><b><span id="baseUrlExpl"></span></b> <p><b><span id="baseUrl"></span></b>
</p> </p>
<p>URL of the authorization endpoint on the server. How is this path constructed will <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 differ between OAuth providers (such as Keycloak or Okta). to
@@ -75,31 +69,31 @@
</p> </p>
</li> </li>
<li class="collection-item"> <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 <p>OAuth 2.0 response type. In this case, we are using the Authorization Code flow, so
we are requesting the authorization code.</p> we are requesting the authorization code.</p>
</li> </li>
<li class="collection-item"> <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 <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 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>
<li class="collection-item"> <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 <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 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 granted permissions. The redirect URI must match one of the URIs registered for the
client ID.</p> client ID.</p>
</li> </li>
<li class="collection-item"> <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 <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, token. In this case, we are requesting the offline_access scope,
which allows the client to obtain a refresh token.</p> which allows the client to obtain a refresh token.</p>
</li> </li>
<li class="collection-item"> <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 <p>State parameter. This is an optional parameter that the client can use to maintain
state between the request and callback. The authorization state between the request and callback. The authorization
server includes this parameter when redirecting the user back to the client, server includes this parameter when redirecting the user back to the client,
@@ -116,10 +110,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section centered">
<a href="/">[ Take me home ]</a>
</div>
</div> </div>
</main> </main>
<footer class="page-footer"></footer> <footer class="page-footer"></footer>
<script src="js/load-layout.js"></script> <script src="../js/load-layout.js"></script>
<script> <script>
function setCookie(name, value, minutes) { function setCookie(name, value, minutes) {
const date = new Date(); const date = new Date();
@@ -143,6 +140,23 @@
+ "&" + "state=" + state; + "&" + "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() { function getRedirectUri() {
return window.location.protocol + "//" + window.location.host + "/flow/code-2"; return window.location.protocol + "//" + window.location.host + "/flow/code-2";
} }
@@ -154,22 +168,8 @@
const scope = "offline_access"; const scope = "offline_access";
const state = generateSessionState(); const state = generateSessionState();
console.debug(window.location); fillExample();
$("#sendRequestBtn").attr("href", constructRequestUrl()); $("#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> </script>
</body> </body>
</html> </html>

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

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

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

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

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

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

76
src/layout/footer.html
View File

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