mirror of
https://github.com/ysoftdevs/oauth-playground-client.git
synced 2026-03-14 06:06:30 +01:00
180 lines
10 KiB
HTML
180 lines
10 KiB
HTML
<!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 - Device Authorization Grant</title>
|
|
<meta name="description"
|
|
content="Discover the Device Authorization Grant in action. Delve into its unique OAuth process tailored for limited-input devices, ensuring secure user authentication. A must-visit for developers optimizing for diverse device 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">Device Authorization Grant</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 class="line line-inactive"></div>
|
|
<div class="circle circle-inactive">
|
|
3
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col s4 circle-text">
|
|
Request a device code from the authorization server
|
|
</div>
|
|
<div class="col s4 circle-text">
|
|
Start polling authorization server periodically until the code has been successfully entered
|
|
</div>
|
|
<div class="col s4 circle-text">
|
|
Instruct the user where to enter the code
|
|
</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. Request a Device Code</h6>
|
|
<p>
|
|
In order to initiate the <b>Device Authorization Grant</b>, we need to request a device code from the authorization server.
|
|
The request is sent to the following URL:
|
|
</p>
|
|
<pre class="code-block"><code id="requestUriExample"></code></pre>
|
|
<p>With body data:</p>
|
|
<pre class="code-block"><code id="requestBodyExample"></code></pre>
|
|
<div class="row flow-submit-container">
|
|
<a id="get-code-btn" class="waves-effect waves-light btn full-width" onclick="getDeviceCode()">Get Device Code</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="code-result" style="display: none;" class="section">
|
|
<div class="col s12 m7">
|
|
<div class="card horizontal">
|
|
<div class="card-stacked">
|
|
<div class="card-content">
|
|
<h6>We have obtained a device code</h6>
|
|
<pre class="code-block"><code id="response"></code></pre>
|
|
<h6>Let's break down what we have received...</h6>
|
|
<ul class="collection">
|
|
<li class="collection-item">
|
|
<p><b>device_code</b></p>
|
|
<p>
|
|
This is a long-lived code that the client (your device or app) will use to poll the authorization server to find out if
|
|
the user completed the authorization step. This code is typically longer and not user-friendly, as it's not meant to be entered by a human but used
|
|
programmatically.
|
|
</p>
|
|
</li>
|
|
<li class="collection-item">
|
|
<p><b>user_code</b></p>
|
|
<p>
|
|
This is a short-lived, user-friendly code that the end-user will enter on another device or computer with better input
|
|
capabilities to authorize the device. The life of this code is typically shorter than the <b>device_code</b> because it's expected that users will enter it
|
|
relatively quickly after it's generated.
|
|
</p>
|
|
</li>
|
|
<li class="collection-item">
|
|
<p><b>verification_uri</b></p>
|
|
<p>
|
|
This is the URL where the user should go (on a browser on another device or computer) to enter the <b>user_code</b> and approve
|
|
or deny the authorization request. After navigating to this URL, the user will typically be asked to login (if not already) and then prompted to enter the
|
|
<b>user_code</b>.
|
|
</p>
|
|
</li>
|
|
<li class="collection-item">
|
|
<p><b>interval</b></p>
|
|
<p>
|
|
This is the recommended interval (in seconds) at which the client should poll the authorization server to check if the
|
|
user has completed the authorization step. For example, with an interval of 10, the client should wait for 10 seconds between each poll to the server. This helps in preventing too frequent requests which could overload the server.
|
|
</p>
|
|
</li>
|
|
<li class="collection-item">
|
|
<p><b>expires_in</b></p>
|
|
<p>
|
|
This is the duration (in seconds) for which the <b>device_code</b> and <b>user_code</b> remain valid. After this time, both codes will
|
|
expire and the device will need to start the authorization process again if the user has not yet completed the
|
|
authorization step.
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
<p>Now we have everything to instruct user what to do...</p>
|
|
</p>
|
|
<div class="row flow-submit-container">
|
|
<a class="waves-effect waves-light btn full-width" href="/flow/dag-2">Continue</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>
|
|
const deviceUrl = baseUrl + "/device"
|
|
|
|
function getDeviceCode() {
|
|
const bodyData = new URLSearchParams();
|
|
bodyData.append('client_id', getClientId());
|
|
|
|
fetch(deviceUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
|
},
|
|
body: bodyData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
setCookie("dag_response", JSON.stringify(data), data.expires_in / 60);
|
|
$("#code-result").show();
|
|
$("#response").text(JSON.stringify(data, null, 2));
|
|
$("#get-code-btn").addClass("disabled");
|
|
$([document.documentElement, document.body]).animate({
|
|
scrollTop: $("#code-result").offset().top
|
|
}, 1000);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching the token:', error);
|
|
});
|
|
}
|
|
|
|
function fillExample() {
|
|
$("#requestUriExample").text(deviceUrl);
|
|
$("#requestBodyExample").text("client_id=" + getClientId());
|
|
}
|
|
|
|
fillExample();
|
|
</script>
|
|
</body>
|
|
</html> |