1
<h1>自然人憑證 數位簽章</h1>
2
signatureType: <select id="signatureType">
3
  <option value="PKCS1" selected>PKCS1</option>
4
  <option value="PKCS7">PKCS7</option>
5
  <option value="RAW">RAW</option>
6
</select><br>
7
tbs: <input type="text" id="tbs" /><br>
8
tbsEncoding: <select id="tbsEncoding">
9
  <option value="none" selected>none</option>
10
  <option value="base64">base64</option>
11
</select><br>
12
pin: <input type="text" id="pin" /><br>
13
hashAlgorithm: <select id="hashAlgorithm">
14
  <option value="SHA1">SHA1</option>
15
  <option value="SHA256" selected>SHA256</option>
16
  <option value="SHA384">SHA384</option>
17
  <option value="SHA512">SHA512</option>
18
</select><br><br>
19
<b>PKCS7 專用</b><br>
20
nonce: <input type="text" id="nonce" /><br>
21
withCardSN: <select id="withCardSN">
22
  <option value="false" selected>false</option>
23
  <option value="true">true</option>
24
</select><br>
25
<input type="button" value="簽章" onclick="submit()"><br>
26
<hr>
27
cardSN (卡號): <input type="text" id="cardSN" /><br>
28
ret_code (結果): <input type="text" id="ret_code" /><br>
29
signature (簽章值)<br>
30
<textarea id="signature" rows="8" cols="65"></textarea><br>
31
certb64 (憑證)<br>
32
<textarea id="certb64" rows="8" cols="65"></textarea><br>
33
last_error: <input type="text" id="last_error" /><br>
34
message (錯誤訊息): <input type="text" id="message" /><br>
35
message2 (錯誤訊息): <input type="text" id="message2" /><br>
36

37
<script>
38
  let popupForm;
39
  let timeout;
40

41
  function submit() {
42
    popupForm = window.open(
43
      "http://localhost:61161/popupForm",
44
      "popupForm",
45
      "height=200, width=200, left=100, top=20"
46
    );
47
    timeout = setTimeout(() => {
48
      popupForm.close();
49
      alert("尚未安裝元件");
50
    }, 5000);
51
  }
52

53
  function receiveMessage(event) {
54
    if (event.origin !== "http://localhost:61161") return;
55

56
    let ret = JSON.parse(event.data);
57
    if (ret.func === "getTbs") {
58
      // 進行數位簽章
59
      clearTimeout(timeout);
60
      const tbsData = {
61
        func: "MakeSignature",
62
        signatureType: document.getElementById("signatureType").value,
63
        tbs: document.getElementById("tbs").value,
64
        tbsEncoding: document.getElementById("tbs").value,
65
        pin: document.getElementById("pin").value,
66
        hashAlgorithm: document.getElementById("hashAlgorithm").value,
67
        nonce: document.getElementById("nonce").value,
68
        withCardSN: document.getElementById("withCardSN").value
69
      };
70
      popupForm.postMessage(JSON.stringify(tbsData), "*");
71
    } else {
72
      // 將簽章結果寫入欄位
73
      const result = JSON.parse(event.data);
74
      document.getElementById("cardSN").value = ret.cardSN;
75
      document.getElementById("ret_code").value = ret.ret_code;
76
      document.getElementById("signature").value = ret.signature;
77
      document.getElementById("certb64").value = ret.certb64;
78
      document.getElementById("last_error").value = ret.last_error;
79
      document.getElementById("message").value = ret.message;
80
      document.getElementById("message2").value = ret.message2;
81
    }
82
  }
83

84
  window.addEventListener("message", receiveMessage, false);
85
</script>

1
const tbsData = {
2
  func: "MakeSignature",
3
  signatureType: document.getElementById("signatureType").value,
4
  tbs: document.getElementById("tbs").value,
5
  tbsEncoding: document.getElementById("tbs").value,
6
  pin: document.getElementById("pin").value,
7
  hashAlgorithm: document.getElementById("hashAlgorithm").value,
8
  nonce: document.getElementById("nonce").value,
9
  withCardSN: document.getElementById("withCardSN").value
10
};
11
popupForm.postMessage(JSON.stringify(tbsData), "*");