mirror of
https://github.com/ysoftdevs/oauth-playground-client.git
synced 2026-06-10 08:22:51 +02:00
Formatting cleanup
This commit is contained in:
konarfil
+34
-33
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@@ -11,14 +12,14 @@
|
||||
<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/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>
|
||||
@@ -79,9 +80,10 @@
|
||||
</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>
|
||||
<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>
|
||||
@@ -89,20 +91,15 @@
|
||||
</li>
|
||||
<li class="collection-item">
|
||||
<p><b><span class="emphasis">code</span>=<span id="code"></span></b></p>
|
||||
<p>This is the authorization code we got in the previous step and is used to obtain the
|
||||
access token.
|
||||
</p>
|
||||
<p>This is the authorization code we got in the previous step and is used to obtain the access token.</p>
|
||||
</li>
|
||||
<li class="collection-item">
|
||||
<p><b><span class="emphasis">code_verifier</span>=<span id="codeVerifier"></span></b></p>
|
||||
<p>This is the code verifier we generated in the first step. It is used to verify the
|
||||
identity of the client.
|
||||
</p>
|
||||
<p>This is the code verifier we generated in the first step. It is used to verify the identity of the client.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
<a id="get-token-btn" class="waves-effect waves-light btn full-width" onClick="getToken()">Get access token</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,42 +117,46 @@
|
||||
<ul class="collection">
|
||||
<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>
|
||||
<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>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>
|
||||
<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>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.).
|
||||
<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>
|
||||
<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.</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.
|
||||
</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>
|
||||
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 with PKCE. Client application would now be able to request resources on users behalf without having to transfer his credentials with each request.</p>
|
||||
<p>
|
||||
And this concludes the Authorization Code Flow with PKCE. 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>
|
||||
|
||||
Reference in New Issue
Block a user