mirror of
https://github.com/ysoftdevs/oauth-playground-client.git
synced 2026-01-16 00:34:15 +01:00
Tablet optimizations
This commit is contained in:
konarfil
@@ -239,6 +239,12 @@ pre {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.flow-card {
|
||||
height: 575px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.page-header {
|
||||
font-size: 1.5rem;
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col m6 s12">
|
||||
<div class="col xl6 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked">
|
||||
<div class="card-content">
|
||||
@@ -93,7 +93,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="user-panel" class="col m6 s12" style="display: none;">
|
||||
<div id="user-panel" class="col xl6 s12" style="display: none;">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked">
|
||||
<div class="card-content">
|
||||
|
||||
350
src/index.html
350
src/index.html
@@ -1,176 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OAuth 2.0 Playground</title>
|
||||
<meta name="description"
|
||||
content="Explore the nuances of OAuth through our interactive playground. Designed for developers and students, gain hands-on experience with token exchanges, callback handling, and common challenges. Elevate your skills for secure user authentication in modern web apps." />
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
<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" />
|
||||
<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 async src="https://www.googletagmanager.com/gtag/js?id=G-CVH4GP5T69"></script>
|
||||
<script src="js/analytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header id="page-header"></header>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="section intro-section">
|
||||
<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,
|
||||
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>
|
||||
<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 section-header">Flows</h3>
|
||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||
<div class="row">
|
||||
<div class="col m4 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
<h5>Authorization Code Flow</h5>
|
||||
<p class="justified">
|
||||
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 href="/flow/code">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col m4 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
<h5>PKCE</h5>
|
||||
<p class="justified">
|
||||
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">
|
||||
<a href="/flow/pkce">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col m4 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
<h5>Device Authorization Grant</h5>
|
||||
<p class="justified">
|
||||
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 underConstruction">
|
||||
<a href="/flow/dag">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col m4 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
<h5>WebAuthn</h5>
|
||||
<p class="justified">
|
||||
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 href="/flow/webauthn">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col m4 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
<h5>CIBA</h5>
|
||||
<p class="justified">
|
||||
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 m4 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
<h5>Implicit Flow (deprecated)</h5>
|
||||
<p class="justified">
|
||||
OAuth 2.0 Implicit Flow was designed for browser-based applications where the client cannot maintain the confidentiality
|
||||
of a secret. In this flow, after user authorization, the authorization server directly redirects the browser to the
|
||||
client application with an access token in the URL fragment. However, this can expose tokens in browser history or logs,
|
||||
making it less secure. Consequently, the use of Implicit Flow is being discouraged in favor of the more secure
|
||||
Authorization Code Flow with PKCE in recent OAuth specifications.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<a href="/flow/implicit">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="page-footer"></footer>
|
||||
<script src="js/load-layout.js"></script>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OAuth 2.0 Playground</title>
|
||||
<meta name="description"
|
||||
content="Explore the nuances of OAuth through our interactive playground. Designed for developers and students, gain hands-on experience with token exchanges, callback handling, and common challenges. Elevate your skills for secure user authentication in modern web apps." />
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
<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" />
|
||||
<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 async src="https://www.googletagmanager.com/gtag/js?id=G-CVH4GP5T69"></script>
|
||||
<script src="js/analytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header id="page-header"></header>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="section intro-section">
|
||||
<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,
|
||||
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>
|
||||
<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 section-header">Flows</h3>
|
||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||
<div class="row">
|
||||
<div class="col xl4 m6 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
<h5>Authorization Code Flow</h5>
|
||||
<p class="justified">
|
||||
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 href="/flow/code">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col xl4 m6 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
<h5>PKCE</h5>
|
||||
<p class="justified">
|
||||
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">
|
||||
<a href="/flow/pkce">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col xl4 m6 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
<h5>Device Authorization Grant</h5>
|
||||
<p class="justified">
|
||||
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 underConstruction">
|
||||
<a href="/flow/dag">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col xl4 m6 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
<h5>WebAuthn</h5>
|
||||
<p class="justified">
|
||||
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 href="/flow/webauthn">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col xl4 m6 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
<h5>CIBA</h5>
|
||||
<p class="justified">
|
||||
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 xl4 m6 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
<h5>Implicit Flow (deprecated)</h5>
|
||||
<p class="justified">
|
||||
OAuth 2.0 Implicit Flow was designed for browser-based applications where the client cannot maintain the confidentiality
|
||||
of a secret. In this flow, after user authorization, the authorization server directly redirects the browser to the
|
||||
client application with an access token in the URL fragment. However, this can expose tokens in browser history or logs,
|
||||
making it less secure. Consequently, the use of Implicit Flow is being discouraged in favor of the more secure
|
||||
Authorization Code Flow with PKCE in recent OAuth specifications.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<a href="/flow/implicit">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="page-footer"></footer>
|
||||
<script src="js/load-layout.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user