mirror of
https://github.com/ysoftdevs/oauth-playground-client.git
synced 2026-03-20 08:15:17 +01:00
151 lines
9.5 KiB
HTML
151 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OAuth Playground</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
|
<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/icon?family=Material+Icons" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<div class="nav-wrapper">
|
|
<a href="/" class="brand-logo center">
|
|
OAuth 2.0 Playground
|
|
<span style="font-size: 15px; color:#FF6600; font-weight:bold;">by Y Soft</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<div class="container">
|
|
<div class="section">
|
|
<h3 class="header" style="text-align: center;">Lorem Ipsum</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
|
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
|
|
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
|
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
|
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis
|
|
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
|
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3 class="header" style="text-align: center;">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-content">
|
|
<h5>Authorization Code Flow</h5>
|
|
<p>OAuth 2.0 protocol designed for web applications that can securely store client secrets.
|
|
The application directs users to an authorization server to log in and grant permissions. Upon consent, the server
|
|
issues an authorization code. The application then exchanges this code for an access token in a server-to-server
|
|
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 class="card-action">
|
|
<a onclick="loadAuthorizationCodeFlowPage()">Try it</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s4">
|
|
<div class="card horizontal">
|
|
<div class="card-stacked" style="height: 500px">
|
|
<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
|
|
capabilities, such as smart TVs, game consoles, and certain IoT devices. In this flow, the device makes a request to the
|
|
authorization server and receives a unique user code and a verification URL. The user then accesses this URL on a
|
|
separate device with a browser, like a smartphone or computer, and enters the user code. After successfully logging in
|
|
and providing consent, the device polls the authorization server to obtain an access token. This method ensures a
|
|
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="loadDeviceAuthorizationGrantPage()">Try it</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s4">
|
|
<div class="card horizontal">
|
|
<div class="card-stacked" style="height: 500px">
|
|
<div class="card-content">
|
|
<h5>WebAuthN</h5>
|
|
<p>This protocol leverages public key cryptography and allows users to authenticate using biometrics, mobile devices, or
|
|
FIDO security keys, instead of traditional passwords. When a user registers with a website, a unique key pair is
|
|
generated: the private key stays securely on the user's device, and the public key is registered with the website. For
|
|
subsequent logins, the website challenges the user to prove ownership of the private key, typically by prompting for a
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<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="#!">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" target="_blank">OAuth 2.0 RFC</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-copyright">
|
|
<div class="container">
|
|
© 2023 Y Soft Corporation
|
|
<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>
|
|
</footer>
|
|
<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>
|
|
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>
|
|
</body>
|
|
</html> |