github-mirrors/oauth-playground-client
1
0
Fork 0
mirror of https://github.com/ysoftdevs/oauth-playground-client.git synced 2026-04-20 23:51:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

Code Flow 1 cleanup

Browse Source
This commit is contained in:
konarfil
2023-09-25 09:17:00 +02:00
parent dd7d683d2d
commit f2ba27ca42
2 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/css/style.css
View File

@@ -193,4 +193,13 @@ pre {
.centered { .centered {
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
.full-width {
width: 100%;
}
.flow-submit-container {
margin-top: 25px;
padding: 0 10px;
}

28
src/flow/code-1.html
View File

@@ -4,7 +4,7 @@
<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 - Authorization Code Flow (1/3)</title>
<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" />
@@ -55,23 +55,24 @@
<div class="card-stacked"> <div class="card-stacked">
<div class="card-content"> <div class="card-content">
<h6>1. Build the Authorization URL</h6> <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> <pre class="code-block"><code id="requestUriExample"></code></pre>
<h6>Let's break it down...</h6> <p>Let's break it down...</p>
<ul class="collection"> <ul class="collection">
<li class="collection-item"> <li class="collection-item">
<p><b><span id="baseUrl"></span></b> <p><b><span id="baseUrl"></span></b>
</p> </p>
<p>URL of the authorization endpoint on the server. How is this path constructed will <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 differ between OAuth providers (such as Keycloak, Okta, etc.).
find out the proper URL, there always exists
<b>/.well-known/openid-configuration</b> endpoint that contains all the necessary
information.
</p> </p>
</li> </li>
<li class="collection-item"> <li class="collection-item">
<p><b><span class="emphasis">response_type</span>=<span id="responseType"></span></b></p> <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 Authorization Code flow, so <p>OAuth 2.0 response type. In this case, we are using the Authorization Code flow, so
we are requesting the authorization code.</p> we are requesting the authorization <b>code</b>.</p>
</li> </li>
<li class="collection-item"> <li class="collection-item">
<p><b><span class="emphasis">client_id</span>=<span id="clientId"></span></b></p> <p><b><span class="emphasis">client_id</span>=<span id="clientId"></span></b></p>
@@ -89,20 +90,23 @@
<li class="collection-item"> <li class="collection-item">
<p><b><span class="emphasis">scope</span>=<span id="scope"></span></b></p> <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 <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, token. In this case, we are requesting the <b>offline_access</b> scope,
which allows the client to obtain a refresh token.</p> which allows the client to obtain a refresh token.</p>
</li> </li>
<li class="collection-item"> <li class="collection-item">
<p><b><span class="emphasis">state</span>=<span id="state"></span></b></p> <p><b><span class="emphasis">state</span>=<span id="state"></span></b></p>
<p>State parameter. This is an optional parameter that the client can use to maintain <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 state between the request and callback. The authorization
server includes this parameter when redirecting the user back to the client, server includes this parameter when redirecting the user back to the client,
allowing the client to verify that the response is coming from the allowing the client to verify that the response is coming from the
server and not a malicious third party.</p> server and not a malicious third party (<a href="https://owasp.org/www-community/attacks/csrf" target="_blank">CSRF attack</a>).</p>
</li> </li>
</ul> </ul>
<div class="row" style="text-align: center; margin-top: 25px;"> <p>All that we now need to do is click the button below and login with our credentials.
<a id="sendRequestBtn" style="width: 20%" class="waves-effect waves-light btn" 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> href="#">Authenticate</a>
</div> </div>
</div> </div>