Skip to content

Instantly share code, notes, and snippets.

@oseiskar

oseiskar/tupasform.html

Created June 5, 2015 14:31
Show Gist options
  • Save oseiskar/4950ebdbb3f091b254f7 to your computer and use it in GitHub Desktop.
Save oseiskar/4950ebdbb3f091b254f7 to your computer and use it in GitHub Desktop.
Download ZIP
TUPAS test form
Raw
tupasform.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/hmac-sha256.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<title>TUPAS test</title>
</head>
<body style="margin: 5%">
<div class="row-fluid">
<div class="col-sm-4 offset-sm-2">
<form id="settings-form">
<div class="form-group">
<label>Secret key</label>
<input id="secret-key" class="form-control" type="text" value=""/>
</div>
<div class="form-group" id="request-type-radio">
<label>Request type</label>
<label class="radio-inline"><input type="radio" name="request-type" value="client"/>Client request</label>
<label class="radio-inline"><input type="radio" name="request-type" value="bank"/>Bank response</label>
</div>
<div id="client-group">
<div class="form-group">
<label>Bank URL</label>
<input id="request-url" class="form-control" type="text" value=""/>
</div>
<div class="form-group" id="response-path-group">
<label>Response path</label>
<input id="response-path" class="form-control" type="text" value=""/>
</div>
</div>
<div id ="bank-group">
<div class="form-group" id="response-url-group">
<label>Response URL</label>
<input id="response-url" class="form-control" type="text" value=""/>
</div>
</div>
</form>
</div>
<div id="tupas-request" class="col-sm-6"></div>
</div>
</body>
<script>
clientAddress = 'http://localhost:3000/tupas/';
// OP test site
bankAddress = 'https://kultaraha.op.fi/cgi-bin/krcgi';
secretKey = 'Esittelykauppiaansalainentunnus';
function timeStamp() {
time = new Date((new Date()).getTime() + (new Date()).getTimezoneOffset() * -60000).toISOString();
return time.replace(/[\-:T\.Z]/g, '');
}
function requestFields() {
return [
['A01Y_ACTION_ID', '701'],
['A01Y_VERS', '0002'],
['A01Y_RCVID', 'Esittelymyyja'],
['A01Y_LANGCODE', 'FI'],
['A01Y_STAMP', timeStamp()],
['A01Y_IDTYPE', '02'],
['A01Y_RETLINK', ''],
['A01Y_CANLINK', ''],
['A01Y_REJLINK', ''],
['A01Y_KEYVERS', '0003'],
['A01Y_ALG', '03']
];
}
function responseFields() {
bankId = '500';
return [
['B02K_VERS', '0002'],
['B02K_TIMESTMP', bankId + timeStamp()],
['B02K_IDNBR', '123456'],
['B02K_STAMP', timeStamp()],
['B02K_CUSTNAME', 'Erkki Esimerkki'],
['B02K_KEYVERS', '0001'],
['B02K_ALG', '03'],
['B02K_CUSTID', '010203-004'],
['B02K_CUSTTYPE', '01'] //,
//['B02K_USERID', 'asdfasdf'],
//['B02K_USERNAME', 'asdfasdf']
];
}
function writeTheForm(el, fields, hashField) {
el.html('');
form = $('<form/>', {
method: 'post',
id: 'request-form',
role: 'form',
class: 'form-horizontal'
});
fields = fields.concat([[hashField, '']]);
for (i in fields) {
name_and_default = fields[i];
name = name_and_default[0];
def = name_and_default[1];
input = $('<input/>', {
type: 'text',
name: name,
id: name,
value: def,
class: 'form-control input-sm'
});
if (i < fields.length - 1) {
input.change(computeHashes);
input.addClass('request-field');
}
else
input.addClass('hash-field');
div = $('<div/>', {class: 'form-group'});
div.append($('<label/>', {text: name, class: 'control-label col-sm-3'}),
$('<div/>', {class: 'col-sm-9'}).append(input)
);
form.append(div);
}
form.append($('<input/>', {type: 'submit', value: 'Submit', class: 'btn btn-primary pull-right'}));
el.append(form);
}
function writeResponseForm(el) {
writeTheForm(el, responseFields(), 'B02K_MAC');
setFormMethod('get');
setResponseAddrs();
computeHashes(null);
}
function writeRequestForm(el) {
writeTheForm(el, requestFields(), 'A01Y_MAC');
setFormMethod('post');
setRequestAddrs();
}
function writeForm() {
targetBox = $('#tupas-request');
val = $('input[name=request-type]:checked').val();
if (val == 'client') {
writeRequestForm(targetBox);
$('#client-group').show();
$('#bank-group').hide();
}
else {
writeResponseForm(targetBox);
$('#client-group').hide();
$('#bank-group').show();
}
}
function computeHashes(event) {
shared_secret = $('#secret-key').val();
str = '';
$('.request-field').each(function(i) {
str += $(this).val() + '&';
});
console.log(str);
hash = CryptoJS.SHA256(str + shared_secret + '&').toString().toUpperCase();
$('.hash-field').attr('value', hash);
}
function setFormMethod(method) {
form = $('#request-form');
form.attr('method', method);
}
function setRequestAddrs() {
$('#request-form').attr('action', $('#request-url').val());
responsePath = $('#response-path').val();
$('#A01Y_RETLINK').attr('value', responsePath + 'return');
$('#A01Y_CANLINK').attr('value', responsePath + 'cancel');
$('#A01Y_REJLINK').attr('value', responsePath + 'reject');
computeHashes(null);
}
function setResponseAddrs() {
$('#request-form').attr('action', $('#response-url').val());
}
$(document).ready(function(){
$('#request-url').attr('value', bankAddress);
$('#response-path').attr('value', clientAddress);
$('#response-url').attr('value', clientAddress + 'return');
$('#secret-key').attr('value', secretKey);
$('#request-url').change(setRequestAddrs);
$('#response-path').change(setRequestAddrs);
$('#response-url').change(setResponseAddrs);
$('#secret-key').change(computeHashes);
$('#request-type-radio').find('input').change(writeForm);
$('#bank-group').hide();
$('#client-group').hide();
});
</script>
</html>
@jlehikoi
Copy link

jlehikoi commented Jun 9, 2016

The js inclusions on lines 5 and 6 give 404, they should be replaced with

<script src="https://raw.githubusercontent.com/sytelus/CryptoJS/master/rollups/sha256.js"></script>
<script src="https://raw.githubusercontent.com/sytelus/CryptoJS/master/rollups/hmac-sha256.js"></script>

Also, unlike the other banks, Danske Bank responds with POST requests, so if you want to test with Danske, you should change the setFormMethod('get'); to setFormMethod('post'); on line 137.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment