[HiPKI Local Server] /p11Image.bmp 解碼圖片取得讀卡機 | 深入淺出自然人憑證

首頁 > 系列文 > 自然人憑證開發筆記

在開始開發簽章、加密之前，有個功能更重要，需要知道使用者是否插卡，或是需要選擇讀卡機，從上一篇可以知道，網站要能夠使用自然人憑證，需要透過 JavaScript 與本地的 HiPKI Local Server (localhost:61161)溝通。本篇會說明如何檢查使用者是否已經插入自然人憑證到電腦上。

p11Image.bmp 介紹#

HiPKI Local Server 提供一個路徑 http://localhost:61161/p11Image.bmp，讓開發者可以取得讀卡機、卡片的清單。這時候你可能會好奇，bmp不是圖片嗎？打開該路徑什麼也看到不到。看不到是正常的，因為這裡使用圖像隱寫術，需要經過特定的演算法，才能將圖片轉為文字，並取得讀卡機與卡片的資訊。

因此，我們需要在前端存取上述路徑，載入圖片，並進行演算，把圖片轉換成 JSON 格式。至於為什麼要做多此一舉的事，怎麼不提供 JSON API 就好，我猜可能是為了解決跨域存取問題，這種作法我也是第一次遇到。在開始講範例程式之前，先解釋一下他的隱寫術機制。

p11Image.bmp 圖像隱寫術機制#

p11Image.bmp 是一張高度只有 1px 的圖片，所有資訊都往寬度塞，儲存資料的原理是將文字的 ASCII Code 存在 RGB 中，再把他讀出來，如下圖所示。

分成三個步驟將圖片轉為文字資訊：

步驟一、讀取每格像素的三原色(RGB)，數字介於0–255

每格像素是一個顏色，而可以將這個顏色轉為三原色表示法，代表這顏色可以透過紅色、綠色、藍色來混合出來，CSS 中的顏色也是透過此方法，更多資料參考網頁顏色說明。

步驟二、依 BGR 順序將數字排序

這裡演算法設計是依照 BGR (藍綠紅)順序來排列，將三個數字排成一行。

步驟三、將數字透過 ASCII 轉為文字，串成字串

將這些數字每個透過 ASCII 轉為文字，例如 65 是 A、66 是 B，並串成字串，這樣就完成了。從上圖我們拿到 ABCDEFGHI 為結果。

p11Image.bmp 內容#

透過上述演算法，我們將圖片轉為文字，該文字為 JSON 檔，範例格式如下，比較重要的是以下幾個欄位：

slots：讀卡機清單
slotDescription：讀卡機名稱
serialNumber：卡號

1
{
2
   "cryptokiVersion":2.04,
3
   "flags":0,
4
   "func":"pkcs11info",
5
   "last_error":0,
6
   "libraryDescription":"CHT PKCS#11 3.1.0.00009",
7
   "libraryVersion":3.003,
8
   "manufacturerID":"Chunghwa TeleComm TL",
9
   "ret_code":0,
10
   "slots":[
11
      {
12
         "firmwareVersion":0,
13
         "flags":7,
14
         "hardwareVersion":0,
15
         "manufacturerID":"unKnow",
16
         "slotDescription":"InfoThink USB Reader",
17
         "slotID":0,
18
         "token":{
19
            "firmwareVersion":1,
20
            "flags":1037,
21
            "hardwareVersion":1,
22
            "label":"HiCOS PKI Smart Card",
23
            "manufacturerID":"Chunghwa TeleCom Co., Ltd.",
24
            "model":"T7S\u0003",
25
            "serialNumber":"TP03200300000000",
26
            "ulFreePrivateMemory":4294967295,
27
            "ulFreePublicMemory":4294967295,
28
            "ulMaxPinLen":8,
29
            "ulMaxRwSessionCount":0,
30
            "ulMaxSessionCount":0,
31
            "ulMinPinLen":6,
32
            "ulSessionCount":0,
33
            "ulTotalPrivateMemory":4294967295,
34
            "ulTotalPublicMemory":4294967295,
35
            "utcTime":""
36
         }
37
      }
38
   ],
39
   "version":"2.3.3",
40
   "serverVersion":"1.3.5.1",
41
   "installedModule":[
42
      {
43
         "version":"1.1.9",
44
         "description":"CardManagement"
45
      },
46
      {
47
         "version":"1.3.5.1",
48
         "description":"HiPKILocalSignServer"
49
      }
50
   ]
51
}

結語#

會知道透過這種機制取得讀卡機資訊，是看內政部範例網站、行動自然人憑證網站的 JavaScript 得知，大家也可以去研究。下一篇就來講 JavaScript 要怎麼寫。

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