Skip to content

Instantly share code, notes, and snippets.

@tdhsmith

tdhsmith/index.html

Last active February 5, 2016 18:34
Show Gist options
  • Save tdhsmith/9c64d84fd77801dc782f to your computer and use it in GitHub Desktop.
Save tdhsmith/9c64d84fd77801dc782f to your computer and use it in GitHub Desktop.
Download ZIP
JWTAuth Token Flow Diagram
Raw
index.html
<html>
<head>
<title>Token Diagram for tymon/jwt</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background: rgba(0,0,0,0.0); height: 100%; padding: 10%;">
<div style="position: relative;">
<div class="progress" style="position: relative; margin-top: 20px; border: solid 0.2px rgba(0,0,0,0.2);">
<div class="progress-bar" style="width: 10%; visibility: hidden;">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-success" style="width: 20%">
<span>Valid</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 40%">
<span>Expired but Refreshable</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 30%">
<span>Nonrefreshable</span>
</div>
</div>
<span style="position: absolute; z-index: 5; width: 20%; height: 20px; left: 10%; top: -24px; background: white; overflow: hidden; text-align: center;">
<div style='position: relative; top: 0; padding-left: 5px; padding-right: 5px; background-color: inherit; text-align: center; margin: auto; z-index: 100; width: 50px; font-family: monospace; font-weight: bold;'>ttl</div>
<div style='width: 100%; height: 100%; position: relative; top: -50%; border: 1px black solid;'></div>
</span>
<span style="position: absolute; z-index: 6; width: 60%; height: 20px; left: 10%; top: -42px; background: white; overflow: hidden; text-align: center;">
<div style='position: relative; top: 0; padding-left: 5px; padding-right: 5px; background-color: inherit; text-align: center; margin: auto; z-index: 100; width: 110px; font-family: monospace; font-weight: bold;'>refresh_ttl</div>
<div style='width: 100%; height: 100%; position: relative; top: -50%; border: 1px black solid;'></div>
</span>
<span style="position: absolute; z-index: 10; left: 10%; top: 20px; margin-left: -1em; text-align: center; font-family: monospace; font-weight: bold;">iat</span>
<span style="position: absolute; z-index: 10; left: 10%; top: 40px; margin-left: -1em; text-align: center; font-family: monospace; font-weight: bold;">nbf</span>
<span style="position: absolute; z-index: 10; left: 30%; top: 20px; margin-left: -1em; text-align: center; font-family: monospace; font-weight: bold;">exp</span>
<!--<span style="position: absolute; z-index: 10; left: 63.5%; top: 20px; width: 15px; margin: auto; text-align: center; font-family: monospace; font-weight: bold;">???</span>-->
<svg width="20px" height="50px" style="position: absolute; left: 55%; margin-left: -10px; top: 28px">
<defs>
<marker id='arrowhead' orient='auto' markerWidth='2' markerHeight='4'
refX='0.1' refY='2'>
<path d='M0,0 V4 L2,2 Z' fill="#337ab7" />
</marker>
</defs>
<line x1="10" y1="0" x2="10" y2="40"
marker-end="url(#arrowhead)" stroke="#337ab7" stroke-width="4"/>
</svg>
<div style="position: absolute; left: 55%; margin-left: 10px; top: 38px; font-weight: bold; font-size: 1.2em; color: #337ab7">refresh</div>
</div>
<div style="position: relative; margin-top: 80px;">
<div class="progress">
<div class="progress-bar" style="width: 55%; visibility: hidden;">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-success" style="width: 15%">
<span>Valid</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 5%">
<span></span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 25%">
<span>Nonrefreshable</span>
</div>
</div>
<span style="position: absolute; z-index: -1; width: 20%; height: 20px; left: 55%; top: -24px; background: white; overflow: hidden; text-align: center;">
<div style='position: relative; top: 0; padding-left: 5px; padding-right: 5px; background-color: inherit; text-align: center; margin: auto; z-index: 100; width: 50px; font-family: monospace; font-weight: bold;'>ttl</div>
<div style='width: 100%; height: 100%; position: relative; top: -50%; border: 1px black solid;'></div>
</span>
<span style="position: absolute; z-index: 10; left: 10%; top: 20px; margin-left: -1em; text-align: center; font-family: monospace; font-weight: bold;">iat</span>
<span style="position: absolute; z-index: 10; left: 55%; top: 20px; margin-left: -1em; text-align: center; font-family: monospace; font-weight: bold;">nbf</span>
<span style="position: absolute; z-index: 10; left: 75%; top: 20px; margin-left: -1em; text-align: center; font-family: monospace; font-weight: bold;">exp</span>
<!--<span style="position: absolute; z-index: 10; left: 70%; top: 40px; margin-left: -4.5em; text-align: center; font-family: monospace; font-weight: bold;">(iat+refresh_ttl)</span>-->
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment