diff --git a/web-crypto/sign-verify/ed25519.js b/web-crypto/sign-verify/ed25519.js
new file mode 100644
index 00000000..d1c13474
--- /dev/null
+++ b/web-crypto/sign-verify/ed25519.js
@@ -0,0 +1,74 @@
+(() => {
+ /*
+ Store the calculated signature here, so we can verify it later.
+ */
+ let signature;
+
+ /*
+ Fetch the contents of the "message" textbox, and encode it
+ in a form we can use for sign operation.
+ */
+ function getMessageEncoding() {
+ const messageBox = document.querySelector("#ed25519-message");
+ let message = messageBox.value;
+ let enc = new TextEncoder();
+ return enc.encode(message);
+ }
+
+ /*
+ Get the encoded message-to-sign, sign it and display a representation
+ of the first part of it in the "signature" element.
+ */
+ async function signMessage(privateKey) {
+ const signatureValue = document.querySelector(".ed25519 .signature-value");
+ signatureValue.classList.remove("valid", "invalid");
+
+ let encoded = getMessageEncoding();
+ signature = await window.crypto.subtle.sign("Ed25519", privateKey, encoded);
+
+ signatureValue.classList.add("fade-in");
+ signatureValue.addEventListener("animationend", () => {
+ signatureValue.classList.remove("fade-in");
+ });
+ let buffer = new Uint8Array(signature, 0, 5);
+ signatureValue.textContent = `${buffer}...[${signature.byteLength} bytes total]`;
+ }
+
+ /*
+ Fetch the encoded message-to-sign and verify it against the stored signature.
+ * If it checks out, set the "valid" class on the signature.
+ * Otherwise set the "invalid" class.
+ */
+ async function verifyMessage(publicKey) {
+ const signatureValue = document.querySelector(".ed25519 .signature-value");
+ signatureValue.classList.remove("valid", "invalid");
+
+ let encoded = getMessageEncoding();
+ let result = await window.crypto.subtle.verify(
+ "Ed25519",
+ publicKey,
+ signature,
+ encoded
+ );
+
+ signatureValue.classList.add(result ? "valid" : "invalid");
+ }
+
+ /*
+ Generate a sign/verify key, then set up event listeners
+ on the "Sign" and "Verify" buttons.
+ */
+ window.crypto.subtle
+ .generateKey("Ed25519", true, ["sign", "verify"])
+ .then((keyPair) => {
+ const signButton = document.querySelector(".ed25519 .sign-button");
+ signButton.addEventListener("click", () => {
+ signMessage(keyPair.privateKey);
+ });
+
+ const verifyButton = document.querySelector(".ed25519 .verify-button");
+ verifyButton.addEventListener("click", () => {
+ verifyMessage(keyPair.publicKey);
+ });
+ });
+})();
diff --git a/web-crypto/sign-verify/index.html b/web-crypto/sign-verify/index.html
index de592ff5..a184a484 100644
--- a/web-crypto/sign-verify/index.html
+++ b/web-crypto/sign-verify/index.html
@@ -1,9 +1,9 @@
-
+
Web Crypto API example
-
+
@@ -11,20 +11,62 @@
Web Crypto: sign/verify
-
This page shows the use of the sign() and verify() functions of the Web Crypto API. It contains four separate examples, one for each signing algorithm supported:
-
+
+ This page shows how to use the sign() and
+ verify() functions of the
+ Web Crypto API. It contains examples for the following signing algorithms:
+
A "Sign" button: this signs the text box contents, displays part of the signature, and stores the complete signature.
-
A "Verify" button: this verifies the text box contents against the stored signature, and styles the displayed signature according to the result.
+
+ A "Sign" button: this signs the text box contents, displays part of
+ the signature, and stores the complete signature.
+
+
+ A "Verify" button: this verifies the text box contents against the
+ stored signature, and styles the displayed signature according to
+ the result.
+