Files
libhalo/core/src.ts/web/examples/compatible.html
2024-07-14 19:45:24 +02:00

82 lines
3.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<!--
LibHaLo - Programmatically interact with HaLo tags from the web browser, mobile application or the desktop.
Copyright by Arx Research, Inc., a Delaware corporation
License: MIT
-->
<title>LibHaLo Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script type="text/javascript">
// ensure the library is always fully reloaded
document.write('<script src="../dist/libhalo.js?_v=' + (Math.random() + '') + '"></scr' + 'ipt>');
</script>
</head>
<body>
<div class="container">
<h1>LibHaLo Demo</h1>
<h2>Simple message signing (C1 compatible mode)</h2>
<p class="text-muted">
Generate an EIP 191 compliant signature of the provided message data. The message will be hashed using
Keccak algorithm on the client-side (with the appropriate prefixes) and then the digest will be transmitted
to the NFC tag for the actual asymmetric signing.
</p>
<p class="text-muted">
This demo is dedicated for earlier batches of tags. Please use it only if <code>simple.html</code> doesn't work.
</p>
<pre id="statusText"></pre>
<div class="mb-3">
<label class="form-label">Message to be signed with ECDSA/Keccak (hex-encoded)</label>
<input type="text" class="form-control" id="message" value="">
</div>
<button class="btn btn-secondary" onclick="btnSignMessageClicked();" id="btn">Sign message using key #1</button>
<script type="text/javascript">
// generate random message on load
let rnd = new Uint8Array(6);
crypto.getRandomValues(rnd);
document.getElementById('message').value = arr2hex(rnd);
async function btnSignMessageClicked() {
// disable the button and ask the user to tap the card
document.getElementById('btn').disabled = true;
document.getElementById('btn').innerText = 'Tap card to the back of your phone';
let command = {
name: "sign",
keyNo: 1,
message: document.getElementById('message').value,
legacySignCommand: true
};
let res;
try {
// --- request NFC command execution ---
res = await execHaloCmdWeb(command);
// the command has succeeded, display the result to the user
document.getElementById('statusText').innerText = JSON.stringify(res, null, 4);
} catch (e) {
// the command has failed, display error to the user
console.error(e);
if (!(e instanceof NFCAbortedError)) {
document.getElementById('statusText').innerText = e;
}
} finally {
// enable the button
document.getElementById('btn').disabled = false;
document.getElementById('btn').innerText = 'Sign message using key #1';
}
}
</script>
</div>
</body>
</html>