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

Authorization code flow first proto

Browse Source
This commit is contained in:
konarfil
2023-09-18 16:06:26 +02:00
parent 9b24249aca
commit 3d4b87311d
4 changed files with 167 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/css/style.css
View File

@@ -86,4 +86,76 @@ body {
.btn-small:not(.disabled):hover {
background-color: #FF6600;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.circle-container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 70%;
margin: 0 auto;
margin-top: 40px;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #FF6600;
color: white;
font-weight: bold;
margin: 0;
/* Adjust the margin to reduce the gap */
position: relative;
/* Added for z-index to work */
z-index: 1;
/* Ensures the circle is on top of the line */
}
.circle-inactive {
background-color: #333333;
}
.line {
height: 2px;
background-color: #FF6600;
flex: 1;
position: relative;
}
.line-inactive {
background-color: #333333;
}
.circle-text {
text-align: center;
margin-top: 10px;
}
.code-block {
background-color: #f4f4f4;
/* light grey background */
border-radius: 5px;
/* rounded corners */
padding: 20px;
/* space inside the block */
overflow-x: auto;
/* allow horizontal scrolling if code is too wide */
}
.code-block code {
color: #333;
/* dark text color for code */
font-family: "Courier New", Courier, monospace;
/* monospace font */
white-space: pre;
/* keep whitespace as is */
}
.emphasis {
color: #FF6600;
}

BIN
src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

3
src/index.html
View File

@@ -4,7 +4,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OAuth Playground</title>
<title>OAuth 2.0 Playground</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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />

94
src/pages/authorization-code-flow.html
View File

@@ -1 +1,93 @@
Authorization Code flow
<div class="container">
<div class="section">
<h3 class="header" style="text-align: center;">Authorization Code Flow</h3>
<div class="circle-container">
<!-- First Circle -->
<div class="circle">
1
</div>
<!-- Line connecting first and second circle -->
<div class="line line-inactive"></div>
<!-- Second Circle -->
<div class="circle circle-inactive">
2
</div>
<!-- Line connecting second and third circle -->
<div class="line line-inactive"></div>
<!-- Third Circle -->
<div class="circle circle-inactive">
3
</div>
</div>
<!-- Texts under the circles -->
<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">
After the user is redirected back to the client, verify the state matches
</div>
<div class="col s4 circle-text">
Exchange the authorization code for an access token
</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>
<pre class="code-block"><code>https://sso.rumbuddy.cz/realms/OAuthPlayground/protocol/openid-connect/auth?
response_type=code
&client_id=oauth-playground
&redirect_uri=http://localhost:5555/
&scope=offline_access
&state=9igSQpeGo2ua52bU
</code></pre>
<h6>Let's break it down, line by line...</h6>
<ul class="collection">
<li class="collection-item">
<p><b>https://sso.rumbuddy.cz/realms/OAuthPlayground/protocol/openid-connect/auth?</b></p>
<p>URL of the authorization endpoint on the server. How is this path constructed will differ between OAuth providers (such as Keycloak or Okta). to
find out the proper URL, there always exists <b>/.well-known/openid-configuration</b> endpoint that contains all the necessary information.
</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">response_type</span>=code</b></p>
<p>OAuth 2.0 response type. In this case, we are using the Authorization Code flow, so we are requesting the authorization code.</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">client_id</span>=oauth-playground</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>=http://localhost:5555/</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>=offline_access</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 offline_access scope,
which allows the client to obtain a refresh token.</p>
</li>
<li class="collection-item">
<p><b><span class="emphasis">state</span>=9igSQpeGo2ua52bU</b></p>
<p>State parameter. This is an optional parameter 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.</p>
</li>
</ul>
<div class="row" style="text-align: center; margin-top: 25px;">
<a style="width: 20%" class="waves-effect waves-light btn"
href="https://sso.rumbuddy.cz/realms/OAuthPlayground/protocol/openid-connect/auth?response_type=code&client_id=oauth-playground&redirect_uri=http://localhost:5555/&scope=offline_access">Send request</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>