[範例] popupForm 取得憑證 | 自然人憑證開發筆記

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

從上一篇我們了解到可以透過 popupForm 來跨域操作自然人憑證，本篇範例為，如何來取得使用者的公鑰與資訊。

以下為兩個視窗交換資訊方式，不了解的可以先回去看上一篇文章。

Demo#

範例程式#

以下範例為存取 http://127.0.0.1:61161/pkcs11info?withcert=true 的資訊，這個 JSON 就包含了憑證、姓名、身分證末四碼、卡號等資訊，可以參考前面文章的說明。

程式碼說明#

來逐行說明上面程式的內容。

步驟一、另開 popupForm 小視窗

getUserCert 為按下按鈕後觸發的事件，這裡先打開一個 popupForm 視窗；並設定一個計時器，在 5 秒後關閉小視窗，並跳出錯誤。

1
let popupForm;
2
let timeout;
3

4
function getUserCert() {
5
  popupForm = window.open(
6
    "http://localhost:61161/popupForm",
7
    "popupForm",
8
    "height=200, width=200, left=100, top=20"
9
  );
10
  timeout = setTimeout(() => {
11
    popupForm.close();
12
    alert("尚未安裝元件");
13
  }, 5000);
14
}

步驟二、註冊 Message Listener

我們需要註冊 Message Listener 來觸發收到訊息後要做的事，首先，先檢查對方來源是不是 http://localhost:61161。

接著判斷，如果對方傳過來的 func=getTbs，代表是第一次建立連線，先關閉掉上面的計時器，然後透過 postMessage 傳要執行的指令過去，範例是{ func: "GetUserCert" }。

若傳過來的 func 不是 getTbs，代表是回傳回來的資料，這時候把回傳的資料顯示到網頁上。

這裡提供兩個 func，前者包含公鑰，後者只有讀卡機資訊：

GetUserCert 內容是 http://127.0.0.1:61161/pkcs11info?withcert=true
CheckEnvir 內容是 http://127.0.0.1:61161/pkcs11info

1
function receiveMessage(event) {
2
  if (event.origin !== "http://localhost:61161") return;
3

4
  let ret = JSON.parse(event.data);
5
  if (ret.func === "getTbs") {
6
    clearTimeout(timeout);
7
    const tbsData = { func: "GetUserCert" };
8
    // 取得讀卡機資訊改為 { func: "CheckEnvir" }
9
    popupForm.postMessage(JSON.stringify(tbsData), "*");
10
  } else {
11
    document.getElementById("info").innerHTML = event.data;
12
  }
13
}
14

15
window.addEventListener("message", receiveMessage, false);

結語#

取得公鑰等資訊，是不需要輸入使用者 pin 碼的，任何網站透過前端都可以存取。

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