authentication/token-explained/index.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="ROBOTS" content="INDEX, FOLLOW" />
    <meta name="VIEWPORT" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://saxobank.github.io/openapi-samples-js/assets/css/style.css">
    <link rel="shortcut icon" type="image/x-icon" href="https://saxobank.github.io/openapi-samples-js/favicon.ico">
    <script type="text/javascript" src="../../assets/js/boilerplate.js" defer></script>
    <script type="text/javascript" src="demo.js" defer></script>
    <title>Explain the Bearer Token (JWT)</title>
</head>
<body>
<section class="page-header">
<h1 class="project-name">JSON Web Token Debugger</h1>
<h2 class="project-tagline">Explain the Bearer Token (JWT)</h2>
<a href="https://saxobank.github.io/openapi-samples-js" class="btn">← Back to main page</a>
<a href="https://github.com/SaxoBank/openapi-samples-js/tree/main/authentication/token-explained" class="btn">View on GitHub</a>
</section>
<section class="main-content">
<div class="highlight">
<label><span>Add token <a href="https://www.developer.saxo/openapi/token" target="_blank" id="idHrefRetrieveToken">from here</a> to the box below:</span><br />
<input type="text" class="token-field" id="idBearerToken" value="" placeholder="Paste token here.." autofocus /></label>
<input type="button" class="action-button" value="Validate" id="idBtnValidate" /><br />
</div>
<h1>Unpack the JSON Web Token (JWT)</h1>
This example shows the info from the token.<br />
Keep in mind that at any moment Saxo can change the data in the token (except the OAuth2 default claims), so don't rely on the IDs in the token.
<br />
More info on this topic: <a href="https://jwt.io/#debugger-io" target="_blank">https://jwt.io/#debugger-io</a>
<br />
<br />
<input type="button" class="action-button" value="Unpack the header" id="idBtnGetHeader" />
<input type="button" class="action-button" value="Unpack the payload" id="idBtnGetPayload" />
<input type="button" class="action-button" value="Verify signature" id="idBtnVerify" />
<br />
Response: <pre class="highlight" id="idResponse">Click button to launch function.</pre>
<br />
JS code: <pre class="code-block" id="idJavaScript">Click button to show code.</pre>
<footer class="site-footer"><span class="site-footer-credits" id="idFooter"></span></footer>
</section>
</body>
</html>