[範例] ChtICToken.js 進行數位簽章 | 自然人憑證開發筆記

上一篇透過 JavaScript 做數位簽章，本篇透過 ChtICToken.js 來實作一樣的功能。

範例程式碼#

範例程式功能如下，輸入演算法、TBS、PIN等資訊進行簽章。關於 ChtICToken.js 的使用，請參考前篇說明，主要重點在 icToken.sign 的使用。

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
pin: <input type="text" id="pin" /><br>
9
hashAlgorithm: <select id="hashAlgorithm">
10
  <option value="SHA1">SHA1</option>
11
  <option value="SHA256" selected>SHA256</option>
12
  <option value="SHA384">SHA384</option>
13
  <option value="SHA512">SHA512</option>
14
</select><br><br>
15
<b>PKCS7 專用</b><br>
16
nonce: <input type="text" id="nonce" /><br>
17
withCardSN: <select id="withCardSN">
18
  <option value="false" selected>false</option>
19
  <option value="true">true</option>
20
</select><br>
21
<input type="button" value="簽章" onclick="getICToken().goodDay(sign)"><br>
22
<hr>
23
cardSN (卡號): <input type="text" id="cardSN" /><br>
24
ret_code (結果): <input type="text" id="ret_code" /><br>
25
signature (簽章值)<br>
26
<textarea id="certb64" rows="8" cols="65"></textarea><br>
27
<div id="info"></div>
28

29
<script src="https://fido.moi.gov.tw/pt/assets/ChtICToken.js"></script>
30
<script>
31
  function setData() {
32
    const icToken = getICToken();
33
    document.getElementById("info").innerHTML = JSON.stringify(icToken);
34
    document.getElementById("cardSN").value = icToken.SmrtCrdID[0];
35
    document.getElementById("ret_code").value = icToken.RetObj.RCode;
36
    document.getElementById("signature").value = icToken.RetObj.B64Signature;
37
  }
38

39
  function sign() {
40
    const icToken = getICToken();
41
    const tbs = btoa(document.getElementById("tbs").value);
42
    const pin = document.getElementById("pin").value;
43
    const hashAlgorithm = document.getElementById("hashAlgorithm").value;
44
    const signatureType = document.getElementById("signatureType").value;
45
    const keyidb64 = btoa("KEYX");
46
    const nonce = document.getElementById("nonce").value;
47
    const withSigningTime = "true";
48
    const withCardSN = document.getElementById("withCardSN").value;
49
    const checkValidity = "true";
50
    icToken.sign(tbs, pin, hashAlgorithm, setData, signatureType, keyidb64, nonce, withSigningTime, withCardSN, checkValidity);
51
  }
52
</script>

sign(B64ToBeSign, UserPIN, HashAlg, RevFun, PKCSSignType, keyidb64, nonce, withSigningTime, withCardSN, checkValidity)#

sign 用於簽章，背後是呼叫API http://127.0.0.1:61161/sign，先了解前篇關於 /sign 的說明。接著來說明參數：

B64ToBeSign：等同 /sign 的 tbs 欄位，為 Base64 格式，tbsEncoding=base64 會被固定啟用。
UserPIN：等同 /sign 的 pin 欄位
RevFun：Callback Function
keyidb64：等同 /sign 的 keyidb64 欄位
nonce：等同 /sign 的 nonce欄位
withSigningTime：等同 /sign 的 withSigningTime欄位
withCardSN：等同 /sign 的 withCardSN欄位
checkValidity：等同 /sign 的 checkValidity欄位

以下是 sign 的原始碼

1
ICToken.prototype.sign = function (
2
  B64ToBeSign, UserPIN, HashAlg, RevFun, PKCSSignType,
3
  keyidb64, nonce, withSigningTime, withCardSN, checkValidity
4
) {
5
  if (typeof PKCSSignType === "undefined") PKCSSignType = "PKCS1";
6
  if (typeof keyidb64 === "undefined") keyidb64 = "__NotExistedTag__";
7
  if (typeof nonce === "undefined") nonce = "__NotExistedTag__";
8
  if (typeof withSigningTime === "undefined")
9
    withSigningTime = "__NotExistedTag__";
10
  if (typeof withCardSN === "undefined") withCardSN = "__NotExistedTag__";
11
  if (typeof checkValidity === "undefined") checkValidity = "__NotExistedTag__";
12
  UserSign(
13
    B64ToBeSign, encodeURIComponent(UserPIN), HashAlg, RevFun, PKCSSignType,
14
    keyidb64, encodeURIComponent(nonce), encodeURIComponent(withSigningTime),
15
    encodeURIComponent(withCardSN), encodeURIComponent(checkValidity), "none"
16
  );
17
};
18

19
function UserSign(
20
  B64ToBeSign, UserPIN, HashAlg, UrRevFUN, PKCSSignType, keyidb64,
21
  nonce, withSigningTime, withCardSN, checkValidity, SignType
22
) {
23
  var l_iRetCode = 0;
24
  var l_B64Signature = "";
25
  var l_vRMsg;
26
  var l_vRetData;
27

28
  if (typeof PKCSSignType === "undefined") PKCSSignType = "PKCS1";
29
  if (typeof keyidb64 === "undefined") keyidb64 = "__NotExistedTag__";
30
  if (typeof nonce === "undefined") nonce = "__NotExistedTag__";
31
  if (typeof withSigningTime === "undefined")
32
    withSigningTime = "__NotExistedTag__";
33
  if (typeof withCardSN === "undefined") withCardSN = "__NotExistedTag__";
34
  if (typeof checkValidity === "undefined") checkValidity = "__NotExistedTag__";
35

36
  if (PKCSSignType == "PKCS7") {
37
    InToken.SType = "PKCS7";
38
  } else {
39
    //Default: "PKCS1"
40
  }
41

42
  if (SignType.localeCompare("Cryp") == 0) {
43
    InToken.FUN = "umakeSig";
44
    GARevFun.FUN = "StSgn";
45
  } else {
46
    InToken.FUN = "MakeSignature";
47
    GARevFun.FUN = "StSgn";
48
  }
49

50
  InToken.PIN = UserPIN;
51
  InToken.TBS = B64ToBeSign;
52
  InToken.keyidb64 = keyidb64;
53
  InToken.nonce = nonce;
54
  InToken.withSigningTime = withSigningTime;
55
  InToken.withCardSN = withCardSN;
56
  InToken.checkValidity = checkValidity;
57

58
  GARevFun.Para = HashAlg.toUpperCase();
59
  GARevFun.UrFUN = UrRevFUN;
60

61
  switch (GARevFun.Para) {
62
    case "SHA256":
63
      InToken.HashAlgorithm = "SHA256";
64
      break;
65
    case "SHA1":
66
      InToken.HashAlgorithm = "SHA1";
67
      break;
68
    default:
69
      l_iRetCode = 3400;
70
      l_vRMsg = rMsg(l_iRetCode, "");
71
      break;
72
  }
73

74
  if (B64ToBeSign == null) {
75
    l_iRetCode = 3402;
76
    l_vRMsg = rMsg(l_iRetCode, "");
77
  }
78

79
  if (UserPIN == null) {
80
    l_iRetCode = 3403;
81
    l_vRMsg = rMsg(l_iRetCode, "");
82
  }
83

84
  if (HashAlg == null) {
85
    l_iRetCode = 3404;
86
    l_vRMsg = rMsg(l_iRetCode, "");
87
  }
88

89
  if (UrRevFUN == null) {
90
    l_iRetCode = 3405;
91
    l_vRMsg = rMsg(l_iRetCode, "");
92
    alert("輸入參數錯誤或不足");
93
  }
94

95
  if (checkGoodDay() == false) {
96
    l_iRetCode = 3401;
97
    l_vRMsg = rMsg(l_iRetCode, "");
98
  }
99

100
  if (l_iRetCode == 0) {
101
    if (SignType.localeCompare("Cryp") == 0) {
102
      SendData(
103
        "http://localhost:61161/umakeSig",
104
        "http://localhost:61161/ChtPopupForm",
105
        "IC卡讀取中",
106
        Gbjct.PppFrmStyle,
107
        StSgn,
108
        UrRevFUN
109
      );
110
    } else {
111
      SendData(
112
        "http://localhost:61161/sign",
113
        "http://localhost:61161/ChtPopupForm",
114
        "IC卡讀取中",
115
        Gbjct.PppFrmStyle,
116
        StSgn,
117
        UrRevFUN
118
      );
119
    }
120
  } else {
121
    l_vRetData =
122
      '{"RCode":"' +
123
      l_iRetCode +
124
      '", "B64Signature":"' +
125
      l_B64Signature +
126
      '","RMsg":"' +
127
      l_vRMsg +
128
      '"}';
129
    InToken.RetObj = JSON.parse(l_vRetData);
130
    if (UrRevFUN && typeof UrRevFUN === "function") UrRevFUN();
131
  }
132
}

以下是簽章回傳結果的格式

1
{
2
  "SmrtCrdID": ["<卡號>"],
3
  "SlotID": ["InfoThink USB Reader 0"],
4
  "SlotName": [],
5
  "ActvSltID": ["0"],
6
  "OldPIN": "",
7
  "NewPIN": "",
8
  "UID": "",
9
  "CrdSys": "",
10
  "KpMsg": "",
11
  "exDynamicCreateFileInput": "",
12
  "exDynamicReleaseFileInput": "",
13
  "TBS": "VEJT",
14
  "TbsEncoding": "base64",
15
  "HashAlgorithm": "SHA256",
16
  "PIN": "000000",
17
  "FUN": "MakeSignature",
18
  "SType": "PKCS1",
19
  "RetObj": {
20
    "RCode": "0",
21
    "B64Signature": "<簽章值>",
22
    "RMsg": "undefined"
23
  },
24
  "keyidb64": "__NotExistedTag__",
25
  "nonce": "__NotExistedTag__",
26
  "withSigningTime": "__NotExistedTag__",
27
  "withCardSN": "__NotExistedTag__",
28
  "checkValidity": "__NotExistedTag__"
29
}

結語#

透過 ChtICToken.js 也可以進行簽章，不過與原生 API 差別在於，ChtICToken.js 不會回傳公鑰，要另外取得。

▶ 閱讀更多：深入淺出自然人憑證