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

Index cleanup

Browse Source
This commit is contained in:
konarfil
2023-09-22 12:30:23 +02:00
parent de26cdca67
commit 7e4e38cc88
7 changed files with 83 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/css/style.css
View File

@@ -171,4 +171,21 @@ pre {
.card-stacked {
width: 100%;
}
.list>li {
list-style-type: circle !important;
margin-left: 20px;
}
.underConstruction {
color:#999999;
}
.flow-card {
height: 550px;
}
.section-header {
text-align: center;
}

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

@@ -109,7 +109,7 @@
</ul>
<div class="row" style="text-align: center; margin-top: 25px;">
<a id="sendRequestBtn" style="width: 20%" class="waves-effect waves-light btn"
href="#">Send request</a>
href="#">Authenticate</a>
</div>
</div>
</div>
@@ -119,10 +119,8 @@
</div>
</main>
<footer class="page-footer"></footer>
<script src="js/load-layout.js"></script>
<script>
$(".page-footer").load("../layout/footer.html");
$("#page-header").load("../layout/header.html");
function setCookie(name, value, minutes) {
const date = new Date();
date.setTime(date.getTime() + (minutes * 60 * 1000));

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

@@ -88,10 +88,8 @@
</div>
</main>
<footer class="page-footer"></footer>
<script src="js/load-layout.js"></script>
<script>
$(".page-footer").load("../layout/footer.html");
$("#page-header").load("../layout/header.html");
$("#queryParams").text(window.location.search)
const urlParams = new URLSearchParams(window.location.search);

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

@@ -100,10 +100,8 @@
</div>
</main>
<footer class="page-footer"></footer>
<script src="js/load-layout.js"></script>
<script>
$(".page-footer").load("../layout/footer.html");
$("#page-header").load("../layout/header.html");
const tokenEndpoint = 'https://sso.rumbuddy.cz/realms/OAuthPlayground/protocol/openid-connect/token';
const clientID = 'oauth-playground';
const code = new URLSearchParams(window.location.search).get('code');

70
src/index.html
View File

@@ -21,7 +21,7 @@
<main>
<div class="container">
<div class="section">
<h3 class="header" style="text-align: center;">Welcome to OAuth 2.0 Playground</h3>
<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,
@@ -29,16 +29,23 @@
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>
</ul>
</div>
<div class="section">
<h3 class="header" style="text-align: center;">Flows</h3>
<h3 class="header section-header">Flows</h3>
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="row">
<div class="col s4">
<div class="card horizontal">
<div class="card-stacked" style="height: 500px">
<div class="card-stacked flow-card">
<div class="card-content">
<h5>Authorization Code Flow</h5>
<p>OAuth 2.0 protocol designed for web applications that can securely store client secrets.
@@ -56,7 +63,25 @@
</div>
<div class="col s4">
<div class="card horizontal">
<div class="card-stacked" style="height: 500px">
<div class="card-stacked flow-card">
<div class="card-content">
<h5>PKCE</h5>
<p>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 underConstruction">
<i class="tiny material-icons">build</i> Under construction
</div>
</div>
</div>
</div>
<div class="col s4">
<div class="card horizontal">
<div class="card-stacked flow-card">
<div class="card-content">
<h5>Device Authorization Grant</h5>
<p>OAuth 2.0 flow optimized for devices that either lack a browser or have limited input
@@ -67,15 +92,35 @@
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">
<!--<a onclick="loadWebAuthNPage()">Try it</a>-->
<div class="card-action underConstruction">
<i class="tiny material-icons">build</i> Under construction
</div>
</div>
</div>
</div>
<div class="col s4">
<div class="card horizontal">
<div class="card-stacked" style="height: 500px">
<div class="card-stacked flow-card">
<div class="card-content">
<h5>CIBA</h5>
<p>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
</div>
</div>
</div>
</div>
<div class="col s4">
<div class="card horizontal">
<div class="card-stacked flow-card">
<div class="card-content">
<h5>WebAuthN</h5>
<p>This protocol leverages public key cryptography and allows users to authenticate using biometrics, mobile devices, or
@@ -85,8 +130,8 @@
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 onclick="loadWebAuthNPage()">Try it</a>-->
<div class="card-action underConstruction">
<i class="tiny material-icons">build</i> Under construction
</div>
</div>
</div>
@@ -96,9 +141,6 @@
</div>
</main>
<footer class="page-footer"></footer>
<script>
$(".page-footer").load("layout/footer.html");
$("#page-header").load("layout/header.html");
</script>
<script src="js/load-layout.js"></script>
</body>
</html>
</html>

2
src/js/load-layout.js Normal file
View File

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

6
src/layout/footer.html
View File

@@ -18,7 +18,6 @@
<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="#!">Link 2</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"
@@ -29,7 +28,10 @@
</div>
<div class="footer-copyright">
<div class="container">
© 2023 Y Soft Corporation
© 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>