mirror of
https://github.com/ysoftdevs/oauth-playground-client.git
synced 2026-03-25 02:21:50 +01:00
Tablet optimizations
This commit is contained in:
konarfil
@@ -239,6 +239,12 @@ pre {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.flow-card {
|
||||||
|
height: 575px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
.page-header {
|
.page-header {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
|||||||
@@ -53,7 +53,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row section">
|
<div class="row section">
|
||||||
<div class="col m6 s12">
|
<div class="col xl6 s12">
|
||||||
<div class="card horizontal">
|
<div class="card horizontal">
|
||||||
<div class="card-stacked">
|
<div class="card-stacked">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
@@ -93,7 +93,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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 horizontal">
|
||||||
<div class="card-stacked">
|
<div class="card-stacked">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
|
|||||||
350
src/index.html
350
src/index.html
@@ -1,176 +1,176 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>OAuth 2.0 Playground</title>
|
<title>OAuth 2.0 Playground</title>
|
||||||
<meta name="description"
|
<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." />
|
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="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 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 type="text/css" rel="stylesheet" href="css/style.css" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<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/css2?family=Roboto:wght@300;400;500;600;700&display=swap" />
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
<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://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 async src="https://www.googletagmanager.com/gtag/js?id=G-CVH4GP5T69"></script>
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CVH4GP5T69"></script>
|
||||||
<script src="js/analytics.js"></script>
|
<script src="js/analytics.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header id="page-header"></header>
|
<header id="page-header"></header>
|
||||||
<main>
|
<main>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section intro-section">
|
<div class="section intro-section">
|
||||||
<h3 class="header section-header">Welcome to OAuth 2.0 Playground</h3>
|
<h3 class="header section-header">Welcome to OAuth 2.0 Playground</h3>
|
||||||
<p>
|
<p>
|
||||||
This playground serves as an interactive platform designed to familiarize developers and students with the
|
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
|
intricacies of OAuth authentication processes. Beyond just theoretical knowledge, this playground provides practical
|
||||||
insights into the OAuth token exchange,
|
insights into the OAuth token exchange,
|
||||||
callback handling, and potential pitfalls or challenges one might face during real-world integrations. The ultimate aim
|
callback handling, and potential pitfalls or challenges one might face during real-world integrations. The ultimate aim
|
||||||
is to bolster
|
is to bolster
|
||||||
understanding and confidence in implementing OAuth, ensuring secure and efficient user authentication and authorization
|
understanding and confidence in implementing OAuth, ensuring secure and efficient user authentication and authorization
|
||||||
in modern web applications.
|
in modern web applications.
|
||||||
</p>
|
</p>
|
||||||
<p>This project is an open-source initiative by Y Soft, as such we welcome any feedback or contributions at:</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">
|
<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>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>
|
<li><b>Server side: </b><a href="https://github.com/ysoftdevs/oauth-playground-server" target="_blank">ysoftdevs/oauth-playground-server</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h3 class="header section-header">Flows</h3>
|
<h3 class="header section-header">Flows</h3>
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col m4 s12">
|
<div class="col xl4 m6 s12">
|
||||||
<div class="card horizontal">
|
<div class="card horizontal">
|
||||||
<div class="card-stacked flow-card">
|
<div class="card-stacked flow-card">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<h5>Authorization Code Flow</h5>
|
<h5>Authorization Code Flow</h5>
|
||||||
<p class="justified">
|
<p class="justified">
|
||||||
OAuth 2.0 protocol designed for web applications that can securely store client secrets.
|
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
|
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
|
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
|
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
|
exposed to users, offering enhanced security. It's best suited for server-side web applications with the capability to
|
||||||
protect the client secret.
|
protect the client secret.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-action">
|
<div class="card-action">
|
||||||
<a href="/flow/code">Try it</a>
|
<a href="/flow/code">Try it</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col m4 s12">
|
<div class="col xl4 m6 s12">
|
||||||
<div class="card horizontal">
|
<div class="card horizontal">
|
||||||
<div class="card-stacked flow-card">
|
<div class="card-stacked flow-card">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<h5>PKCE</h5>
|
<h5>PKCE</h5>
|
||||||
<p class="justified">
|
<p class="justified">
|
||||||
Proof Key for Code Exchange is a security protocol for the OAuth 2.0 authorization framework, designed to prevent
|
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
|
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
|
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
|
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
|
access token, the client provides the original verifier. The server validates it against the stored challenge, ensuring
|
||||||
added security against malicious interceptions.
|
added security against malicious interceptions.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-action">
|
<div class="card-action">
|
||||||
<a href="/flow/pkce">Try it</a>
|
<a href="/flow/pkce">Try it</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col m4 s12">
|
<div class="col xl4 m6 s12">
|
||||||
<div class="card horizontal">
|
<div class="card horizontal">
|
||||||
<div class="card-stacked flow-card">
|
<div class="card-stacked flow-card">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<h5>Device Authorization Grant</h5>
|
<h5>Device Authorization Grant</h5>
|
||||||
<p class="justified">
|
<p class="justified">
|
||||||
OAuth 2.0 flow optimized for devices that either lack a browser or have limited input
|
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
|
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
|
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
|
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
|
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
|
streamlined user experience for devices with restricted input or display capabilities, allowing them to access protected
|
||||||
resources without the need for intricate user interactions.
|
resources without the need for intricate user interactions.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-action underConstruction">
|
<div class="card-action underConstruction">
|
||||||
<a href="/flow/dag">Try it</a>
|
<a href="/flow/dag">Try it</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col m4 s12">
|
<div class="col xl4 m6 s12">
|
||||||
<div class="card horizontal">
|
<div class="card horizontal">
|
||||||
<div class="card-stacked flow-card">
|
<div class="card-stacked flow-card">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<h5>WebAuthn</h5>
|
<h5>WebAuthn</h5>
|
||||||
<p class="justified">
|
<p class="justified">
|
||||||
This protocol leverages public key cryptography and allows users to authenticate using biometrics, mobile devices, or
|
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
|
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
|
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
|
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
|
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.
|
compromised passwords and defending against phishing attacks.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-action">
|
<div class="card-action">
|
||||||
<a href="/flow/webauthn">Try it</a>
|
<a href="/flow/webauthn">Try it</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col m4 s12">
|
<div class="col xl4 m6 s12">
|
||||||
<div class="card horizontal">
|
<div class="card horizontal">
|
||||||
<div class="card-stacked flow-card">
|
<div class="card-stacked flow-card">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<h5>CIBA</h5>
|
<h5>CIBA</h5>
|
||||||
<p class="justified">
|
<p class="justified">
|
||||||
Client Initiated Backchannel Authentication is a protocol extension for OAuth 2.0, tailored for scenarios where
|
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
|
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
|
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
|
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.
|
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
|
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.
|
and secure user experience, especially in contexts where traditional OAuth 2.0 interactions might be cumbersome or impractical.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-action underConstruction">
|
<div class="card-action underConstruction">
|
||||||
<i class="tiny material-icons">build</i> Under construction
|
<i class="tiny material-icons">build</i> Under construction
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col m4 s12">
|
<div class="col xl4 m6 s12">
|
||||||
<div class="card horizontal">
|
<div class="card horizontal">
|
||||||
<div class="card-stacked flow-card">
|
<div class="card-stacked flow-card">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<h5>Implicit Flow (deprecated)</h5>
|
<h5>Implicit Flow (deprecated)</h5>
|
||||||
<p class="justified">
|
<p class="justified">
|
||||||
OAuth 2.0 Implicit Flow was designed for browser-based applications where the client cannot maintain the confidentiality
|
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
|
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,
|
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
|
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.
|
Authorization Code Flow with PKCE in recent OAuth specifications.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-action">
|
<div class="card-action">
|
||||||
<a href="/flow/implicit">Try it</a>
|
<a href="/flow/implicit">Try it</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user