Add JWT encoder to WebWolf
This commit is contained in:
79
webwolf/src/main/resources/static/js/jwt.js
Normal file
79
webwolf/src/main/resources/static/js/jwt.js
Normal file
@@ -0,0 +1,79 @@
|
||||
$(document).ready(() => {
|
||||
$('#encodedToken').on('input', () => {
|
||||
var token = $('#encodedToken').val();
|
||||
var secretKey = $('#secretKey').val();
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/WebWolf/jwt/decode',
|
||||
data: JSON.stringify({encoded: token, secretKey: secretKey}),
|
||||
success: function (data) {
|
||||
if (data.validToken) {
|
||||
$('#tokenHeader').val(data.header);
|
||||
$('#tokenPayload').val(data.payload);
|
||||
}
|
||||
updateSignature(data);
|
||||
},
|
||||
contentType: "application/json",
|
||||
dataType: 'json'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function encode() {
|
||||
return () => {
|
||||
var header = $('#tokenHeader').val();
|
||||
var payload = $('#tokenPayload').val();
|
||||
var secretKey = $('#secretKey').val();
|
||||
var token = {header: header, payload: payload, secretKey: secretKey};
|
||||
|
||||
if (!parseJson(header)) {
|
||||
$('#encodedToken').val("");
|
||||
$('#tokenHeader').css('background-color', 'lightcoral');
|
||||
} else if (!parseJson(payload)) {
|
||||
$('#encodedToken').val("");
|
||||
$('#tokenPayload').css('background-color', 'lightcoral');
|
||||
} else {
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/WebWolf/jwt/encode',
|
||||
data: JSON.stringify(token),
|
||||
success: function (data) {
|
||||
$('#encodedToken').val(data.encoded);
|
||||
$('#tokenPayload').css('background-color', '#FFFFFF');
|
||||
$('#encodedToken').css('background-color', '#FFFFFF');
|
||||
$('#tokenHeader').css('background-color', '#FFFFFF');
|
||||
updateSignature(data);
|
||||
},
|
||||
contentType: "application/json",
|
||||
dataType: 'json'
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
$(document).ready(() => {
|
||||
$('#tokenPayload').on('input', encode());
|
||||
$('#tokenHeader').on('input', encode());
|
||||
$('#secretKey').on('input', encode());
|
||||
});
|
||||
|
||||
function parseJson(text) {
|
||||
try {
|
||||
if (text) {
|
||||
JSON.parse(text);
|
||||
}
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
function updateSignature(data) {
|
||||
if (data.signatureValid) {
|
||||
$('#signatureValid').val("Signature valid");
|
||||
} else {
|
||||
$('#signatureValid').val("Signature invalid");
|
||||
}
|
||||
}
|
||||
@@ -30,6 +30,9 @@
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a th:href="@{/WebWolf/requests}">Incoming requests</a></li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a th:href="@{/WebWolf/jwt}">JWT</a></li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
|
||||
<li><a href="#">
|
||||
|
||||
65
webwolf/src/main/resources/templates/jwt.html
Normal file
65
webwolf/src/main/resources/templates/jwt.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<div th:replace="fragments/header :: header-css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div th:replace="fragments/header :: header"/>
|
||||
|
||||
<script type="text/javascript" th:src="@{/js/jwt.js}"></script>
|
||||
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="alert alert-info fade in">
|
||||
|
||||
<a href="#" class="close" data-dismiss="alert">×</a>
|
||||
<p>
|
||||
Decode or encode a JWT some of the exercises need to encode or decode a new token
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
|
||||
<div class="form-group">
|
||||
<label for="encodedToken">Encoded</label>
|
||||
<form name="encodedTokenForm" id="encodedTokenForm" action="/WebWolf/jwt/encode" method="POST">
|
||||
<textarea class="form-control" style="font-size: 14pt; font-family:monospace;" id="encodedToken" rows="4"
|
||||
placeholder="Paste token here" spellcheck="false"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Decoded</label>
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-md-5">Header</div>
|
||||
<div class="col-xs-6 col-md-7">Payload</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-md-5">
|
||||
<textarea class="form-control" style="font-size: 14pt; font-family:monospace;" id="tokenHeader"
|
||||
rows="12"></textarea>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-7">
|
||||
<textarea class="form-control" style="font-size: 14pt; font-family:monospace;" id="tokenPayload"
|
||||
rows="12"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon" id="header">Secret key</span>
|
||||
<input type="text" class="form-control" id="secretKey">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<h4 id="signatureValid">Invalid signature</h4>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user