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

Add: implicit flow

Browse Source
This commit is contained in:
Dusan Jakub
2023-10-02 12:37:10 +02:00
parent 85ea1ed1ea
commit 7f4a3490e7
3 changed files with 469 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/flow/implicit-2.html Normal file
View File

@@ -0,0 +1,118 @@
<!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 - Authorization Code Flow (2/3)</title>
<meta name="description"
content="Dive deep into the Authorization Code Flow with our interactive guide. Understand its workings, best practices, and its role in OAuth for secure user authentication. Ideal for developers aiming for robust web app integrations." />
<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">
<h3 class="header centered">Authorization Code Flow</h3>
<div class="circle-container circle-3">
<div class="circle">
1
</div>
<div class="line"></div>
<div class="circle">
2
</div>
</div>
<div class="row">
<div class="col s4 circle-text">
Build the authorization URL and redirect the user to the authorization server
</div>
<div class="col s4 circle-text">
User is redirected back with token in query
</div>
</div>
</div>
<div class="section">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-stacked">
<div class="card-content">
<h6>2. Read token from query</h6>
<p>
You have now been redirected back to the application, to the page that was specified in the <b>redirect-url</b> parameter.
In the URL you can notice, that there are addtional query parameters:
</p>
<pre class="code-block"><code id="queryParams"></code></pre>
<p>Let's break it down...</p>
<ul class="collection">
<li class="collection-item">
<p><b><span class="emphasis">state</span>=<span id="state"></span></b></p>
<p>
The state parameter is an opaque value used by the client to maintain state between the request and the callback.
Essentially, it is used to prevent Cross-Site Request Forgery (<a href="https://owasp.org/www-community/attacks/csrf" target="_blank">CSRF</a>) attacks and to ensure the response belongs to the request made by the client.
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">access_token</span>=<span id="access_token"></span></b></p>
<p>
This is the actual access token, which allows the client application to access the user's protected resources
on the resource server (e.g., user profile, photos, etc.).
</p>
</li>
</ul>
<p>
As the last thing, the client should verify that state we have sent (<b><span id="sent-state"></span></b>) equivalent to the one we received back (<b><span id="received-state"></span></b>).
If not, someone is tampering with us.
</p>
<p>
And this concludes the Implicit Flow.
</p>
<p>
Please be aware that by using the Implicit flow, you are making your application <b>vulnerable to various attacks</b>, which is why this flow is <b>deprecated in OAuth 2.0 and removed in OAuth 2.1</b>.
</p>
<p>
Just use <a href="/flow/pkce">Authorization flow with PKCE</a> everywhere you can.
</p>
<div class="row flow-submit-container">
<a class="waves-effect waves-light btn full-width" href="/">Try a different flow</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section centered">
<a href="/">[ Take me home ]</a>
</div>
</div>
</main>
<footer class="page-footer"></footer>
<script src="../js/load-layout.js"></script>
<script src="../js/cookies.js"></script>
<script>
const urlParams = new URLSearchParams(window.location.search);
const access_token = urlParams.get("access_token");
const state = urlParams.get("state");
const sentState = getCookie("state");
$("#queryParams").text(window.location.search)
$("#state").text(state);
$("#sent-state").text(sentState);
$("#received-state").text(state);
$("#access_token").text(access_token);
</script>
</body>
</html>

176
src/flow/implicit.html Normal file
View File

@@ -0,0 +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 - Authorization Code Flow</title>
<meta name="description"
content="Dive deep into the Authorization Code Flow with our interactive guide. Understand its workings, best practices, and its role in OAuth for secure user authentication. Ideal for developers aiming for robust web app integrations." />
<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">
<h3 class="header centered">Implicit Flow (deprecated)</h3>
<div class="circle-container circle-3">
<div class="circle">
1
</div>
<div class="line line-inactive"></div>
<div class="circle circle-inactive">
2
</div>
</div>
<div class="row">
<div class="col s4 circle-text">
Build the authorization URL and redirect the user to the authorization server
</div>
<div class="col s4 circle-text">
User is redirected back with token in query
</div>
</div>
</div>
<div class="section">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-stacked">
<div class="card-content">
<h6>1. Build the Authorization URL</h6>
<p>
In order to initiate the <b>Authorization Code Flow</b>, we need to build the authorization URL
and redirect the user to the authorization server. The URL is constructed as follows:
</p>
<pre class="code-block"><code id="requestUriExample"></code></pre>
<p>Let's break it down...</p>
<ul class="collection">
<li class="collection-item">
<p><b><span id="baseUrl"></span></b></p>
<p>
URL of the authorization endpoint on the server. How is this path constructed will
differ between OAuth providers (such as Keycloak, Okta, etc.).
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">response_type</span>=<span id="responseType"></span></b></p>
<p>
OAuth 2.0 response type. In this case, we are using the Implicit flow, so
we are requesting the authorization <b>token</b>.
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">client_id</span>=<span id="clientId"></span></b></p>
<p>
Client ID of the application. This is a public identifier for the client, and it is
used by the authorization server to identify the application when redirecting the user back to the client.
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">redirect_uri</span>=<span id="redirectUri"></span></b></p>
<p>
Redirect URI of the client. This is the URL that the authorization server will
redirect the user back to after the user has logged in and granted permissions.
The redirect URI must match one of the URIs registered for the client ID.
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">scope</span>=<span id="scope"></span></b></p>
<p>
Scopes requested by the client. Scopes are used to limit the access of the access
token. In this case, we are requesting the <b>offline_access</b> scope,
which allows the client to obtain a refresh token.
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">state</span>=<span id="state"></span></b></p>
<p>
State parameter. This is an <b>optional parameter</b> that the client can use to maintain
state between the request and callback. The authorization server includes this parameter when
redirecting the user back to the client, allowing the client to verify that the response is coming from the
server and not a malicious third party (<a href="https://owasp.org/www-community/attacks/csrf" target="_blank">CSRF attack</a>).
</p>
</li>
</ul>
<p>
All that we now need to do is click the button below and login with our credentials.
For the purposes of this playground we already took the liberty to create <b>user</b> with password <b>user</b> for you.
After your credentials are successfully verified, you will be redirected back to this playground, to the URL we have specified in
the <b>redirect_uri</b> query parameter of the request.
</p>
<div class="row flow-submit-container">
<a id="sendRequestBtn" class="waves-effect waves-light btn full-width" href="#">Authenticate</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section centered">
<a href="/">[ Take me home ]</a>
</div>
</div>
</main>
<footer class="page-footer"></footer>
<script src="../js/load-layout.js"></script>
<script src="../js/cookies.js"></script>
<script src="../js/env-config.js"></script>
<script>
function generateSessionState () {
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}
function constructRequestUrl () {
return baseUrl
+ "?" + "response_type=" + responseType
+ "&" + "client_id=" + getClientId()
+ "&" + "redirect_uri=" + redirectUri
+ "&" + "scope=" + scope
+ "&" + "state=" + state;
}
function fillExample() {
const requestExample = baseUrl + "\n"
+ "?response_type=" + responseType + "\n"
+ "&client_id=" + getClientId() + "\n"
+ "&redirect_uri=" + redirectUri + "\n"
+ "&scope=" + scope + "\n"
+ "&state=" + state;
$("#requestUriExample").text(requestExample);
$("#baseUrl").text(baseUrl);
$("#responseType").text(responseType);
$("#clientId").text(getClientId());
$("#redirectUri").text(redirectUri);
$("#scope").text(scope);
$("#state").text(state);
$("#sendRequestBtn").attr("href", constructRequestUrl());
}
function getRedirectUri() {
return window.location.protocol + "//" + window.location.host + "/flow/implicit-2";
}
const responseType = "token";
const redirectUri = getRedirectUri();
const scope = "offline_access";
const state = generateSessionState();
setCookie("state", state, 5);
fillExample();
</script>
</body>
</html>

350
src/index.html
View File

@@ -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</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 underConstruction">
<i class="tiny material-icons">build</i> Under construction
</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 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>
</html>