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

Code flow cleanup finished

Browse Source
This commit is contained in:
konarfil
2023-09-25 09:57:17 +02:00
parent 42fa16ef1f
commit 544c6adc4f
3 changed files with 86 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/flow/code-3.html
View File

@@ -1,10 +1,9 @@
<!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>
<title>OAuth 2.0 Playground - Authorization Code Flow (3/3)</title>
<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" />
@@ -16,13 +15,12 @@
<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>
</head>
<body>
<header id="page-header"></header>
<main>
<div class="container">
<div class="section">
<h3 class="header" style="text-align: center;">Authorization Code Flow</h3>
<h3 class="header centered">Authorization Code Flow</h3>
<div class="circle-container">
<div class="circle">
1
@@ -36,7 +34,6 @@
3
</div>
</div>
<div class="row">
<div class="col s4 circle-text">
Build the authorization URL and redirect the user to the authorization server
@@ -57,13 +54,12 @@
<h6>3. Exchange the code for token</h6>
<p>Now that we have the authorization code, we can exchange it for an access token. This is done by sending a <b>POST</b> request to the token endpoint.</p>
<pre class="code-block"><code id="requestUriExample"></code></pre>
<p>With body data</p>
<p>With body data:</p>
<pre class="code-block"><code id="requestBodyExample"></code></pre>
<h6>Let's break it down...</h6>
<p6>Let's break it down...</p>
<ul class="collection">
<li class="collection-item">
<p><b><span id="tokenUrl"></span></b>
</p>
<p><b><span id="tokenUrl"></span></b></p>
<p>The token endpoint URL</p>
</li>
<li class="collection-item">
@@ -86,19 +82,79 @@
access token.</p>
</li>
</ul>
<div class="row" style="text-align: center; margin-top: 25px;">
<a style="width: 20%" class="waves-effect waves-light btn"
onClick="getToken()">Get token</a>
<div class="row flow-submit-container">
<a id="get-token-btn" class="waves-effect waves-light btn full-width"
onClick="getToken()">Get access token</a>
</div>
<pre class="code-block"><code id="token"></code></pre>
</div>
</div>
</div>
</div>
</div>
<div class="section centered">
<a href="/">[ Take me home ]</a>
<div id="token-result" style="display: none;" class="section">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-stacked">
<div class="card-content">
<h6>Congratulations, you have just obtained an <b>access token</b></h6>
<pre class="code-block"><code id="token"></code></pre>
<h6>Let's break down what we have received...</h6>
<ul class="collection">
<li class="collection-item">
<p><b>access_token</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.).
It's encoded as a JSON Web Token (JWT), which can be decoded to reveal a header, payload, and signature.
The payload of the JWT contains claims about the user and the authentication event. For example, the iss claim indicates
the issuer of the token, the aud claim specifies the intended audience for the token, and the exp claim specifies the
expiration time of the token. <a href="https://jwt.io/" target="_blank">Want to see what's inside?</a></p>
</li>
<li class="collection-item">
<p><b>expires_in</b></p>
<p>Indicates the number of seconds for which the <b>access_token</b> is valid. After this time, the access_token will expire and a
new one must be obtained.</p>
</li>
<li class="collection-item">
<p><b>refresh_expires_in</b></p>
<p>Indicates the number of seconds for which the refresh_token is valid. Once the refresh token is expired, the client will
need to re-authenticate the user to get a new set of tokens.</p>
</li>
<li class="collection-item">
<p><b>refresh_token</b></p>
<p>Used to obtain a new <b>access_token</b> when the current one expires. This allows the client to get a new <b>access_token</b> without
requiring the user to log in again. Like the <b>access_token</b>, it's encoded as a JWT.</p>
</li>
<li class="collection-item">
<p><b>token_type</b></p>
<p>Indicates the type of token issued. In OAuth 2.0, the common type is "Bearer", which means that whoever bears the token
can access the resources.</p>
</li>
<li class="collection-item">
<p><b>not-before-policy</b></p>
<p>Specifies a time before which the token should not be accepted. A value of 0 implies the token can be immediately used.</p>
</li>
<li class="collection-item">
<p><b>session_state</b></p>
<p>Represents the state of the user's session at the Authorization Server. This is the same value that could was
returned during the Authorization Code Flow in the <b>session_state</b> parameter.
It can be used in scenarios like OpenID Connect session management to monitor the user's session.</p>
</li>
<li class="collection-item">
<p><b>scope</b></p>
<p>Specifies the scopes granted by the user to the client application. Scopes determine the permissions associated with the
<b>access_token</b>. Here, the granted scopes are email, offline_access, and profile. This means that with the provided access_token, the
client application can access the user's email and profile information and is also granted offline access (typically
used in conjunction with refresh tokens).</p>
</li>
</ul>
<p>And this concludes the Authorization Code Flow. Client application would now be able to request resources on users behalf without having to transfer his credentials with each request.</p>
<div class="row flow-submit-container">
<a class="waves-effect waves-light btn full-width" href="/">Try different flow</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
@@ -148,7 +204,12 @@
})
.then(response => response.json())
.then(data => {
$("#token-result").show();
$("#token").text(JSON.stringify(data, null, 2));
$("#get-token-btn").hide();
$([document.documentElement, document.body]).animate({
scrollTop: $("#token-result").offset().top
}, 1000);
})
.catch(error => {
console.error('Error fetching the token:', error);