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

Switching of pages added

Browse Source
This commit is contained in:
konarfil
2023-09-18 14:51:50 +02:00
parent db5fdf3c3f
commit a3b76509ba
5 changed files with 39 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/index.html
View File

@@ -45,63 +45,61 @@
<div class="row"> <div class="row">
<div class="col s4"> <div class="col s4">
<div class="card horizontal"> <div class="card horizontal">
<div class="card-stacked"> <div class="card-stacked" style="height: 500px">
<div class="card-content"> <div class="card-content">
<h5>Authorization Code Flow</h5> <h5>Authorization Code Flow</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <p>OAuth 2.0 protocol designed for web applications that can securely store client secrets.
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis The application directs users to an authorization server to log in and grant permissions. Upon consent, the server
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint issues an authorization code. The application then exchanges this code for an access token in a server-to-server
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> request, using its client ID, client secret, and redirection URI. This flow ensures the access token is never directly
exposed to users, offering enhanced security. It's best suited for server-side web applications with the capability to
protect the client secret.</p>
</div> </div>
<div class="card-action"> <div class="card-action">
<a href="#">Try it</a> <a onclick="loadAuthorizationCodeFlowPage()">Try it</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col s4"> <div class="col s4">
<div class="card horizontal"> <div class="card horizontal">
<div class="card-stacked"> <div class="card-stacked" style="height: 500px">
<div class="card-content"> <div class="card-content">
<h5>Device Authorization Grant</h5> <h5>Device Authorization Grant</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <p>OAuth 2.0 flow optimized for devices that either lack a browser or have limited input
et dolore magna capabilities, such as smart TVs, game consoles, and certain IoT devices. In this flow, the device makes a request to the
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea authorization server and receives a unique user code and a verification URL. The user then accesses this URL on a
commodo consequat. Duis separate device with a browser, like a smartphone or computer, and enters the user code. After successfully logging in
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. and providing consent, the device polls the authorization server to obtain an access token. This method ensures a
Excepteur sint streamlined user experience for devices with restricted input or display capabilities, allowing them to access protected
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> resources without the need for intricate user interactions.</p>
</div> </div>
<div class="card-action"> <div class="card-action">
<a href="#">Try it</a> <a onclick="loadDeviceAuthorizationGrantPage()">Try it</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col s4"> <div class="col s4">
<div class="card horizontal"> <div class="card horizontal">
<div class="card-stacked"> <div class="card-stacked" style="height: 500px">
<div class="card-content"> <div class="card-content">
<h5>WebAuthN</h5> <h5>WebAuthN</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <p>This protocol leverages public key cryptography and allows users to authenticate using biometrics, mobile devices, or
et dolore magna FIDO security keys, instead of traditional passwords. When a user registers with a website, a unique key pair is
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea generated: the private key stays securely on the user's device, and the public key is registered with the website. For
commodo consequat. Duis subsequent logins, the website challenges the user to prove ownership of the private key, typically by prompting for a
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. biometric or a physical action on a security key. WebAuthn enhances user security by reducing reliance on easily
Excepteur sint compromised passwords and defending against phishing attacks.</p>
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div> </div>
<div class="card-action"> <div class="card-action">
<a href="#">Try it</a> <a onclick="loadWebAuthNPage()">Try it</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</main> </main>
<footer class="page-footer"> <footer class="page-footer">
@@ -137,7 +135,17 @@
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <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 src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script> <script>
function loadAuthorizationCodeFlowPage() {
$("main").load("pages/authorization_code_flow.html");
}
function loadDeviceAuthorizationGrantPage() {
$("main").load("pages/device-authorization-grant.html");
}
function loadWebAuthNPage() {
$("main").load("pages/webauthn.html");
}
</script> </script>
</body> </body>
</html> </html>

1
src/pages/authorization-code-flow.html Normal file
View File

@@ -0,0 +1 @@
Authorization Code flow

1
src/pages/device-authorization-grant.html Normal file
View File

@@ -0,0 +1 @@
Device Authorization Grant

0
src/pages/user-registration.html
View File

1
src/pages/webauthn.html Normal file
View File

@@ -0,0 +1 @@
WebAuthN