1. U2F JS API

??FIDO U2F定義了JavaScript API供開發(fā)者開發(fā)支持U2F設備的在線服務網(wǎng)站耻瑟。U2F JS API分為兩類：底層基于消息端口的API和上層應用API趁曼。在FIDO的規(guī)格文檔中介紹底層API用于與U2F設備進行消息通訊（使用MessagePort Object）,發(fā)送和接收消息。本文重點關注屏蔽了通訊細節(jié)的上層API接口宠页。

2. 接口定義

2.1. u2f接口

??使用WebIDL定義的u2f接口定義如下：

interface u2f {
    void register (DOMString appId, sequence<RegisterRequest> registerRequests, sequence<RegisteredKey> registeredKeys, function(RegisterResponse or Error) callback, optional unsigned long? opt_timeoutSeconds);
    void sign (DOMString appId, DOMString challenge, sequence<RegisteredKey> registeredKeys, function(SignResponse or Error) callback, optional unsigned long? opt_timeoutSeconds);
};

2.2. register方法

2.2.1. 請求參數(shù)

??register方法中各參數(shù)描述如下：

2.2.2. 返回值

??register方法成功返回的數(shù)據(jù)（callback的參數(shù)）使用RegisterResponse結構。

dictionary RegisterResponse {
    DOMString version;
    DOMString registrationData;
    DOMString clientData;
};

??其中各屬性含義如下：

• version：U2F協(xié)議版本，如“U2F_V2”
• registrationData：使用websafe-base64編碼后的注冊數(shù)據(jù)省骂，數(shù)據(jù)格式參看《FIDO U2F設備應用與開發(fā)(一)-原理與協(xié)議》3.2節(jié)。
• clientData：使用websafe-base64編碼后的clientData最住，數(shù)據(jù)格式參看《FIDO U2F設備應用與開發(fā)(一)-原理與協(xié)議》3.5節(jié)钞澳。

2.3. sign方法

2.3.1. 請求參數(shù)

??sign方法中各參數(shù)描述如下：

2.3.2. 返回值

??sign方法成功返回的數(shù)據(jù)(callback的參數(shù))使用SignResponse結構。

dictionary SignResponse {
    DOMString keyHandle;
    DOMString signatureData;
    DOMString clientData;
};

??其中各屬性含義如下：

• keyHandle：請求中提供的key handle
• signatureData：使用websafe-base64編碼后的簽名數(shù)據(jù)涨缚，數(shù)據(jù)格式參看《FIDO U2F設備應用與開發(fā)(一)-原理與協(xié)議》3.4節(jié)轧粟。
• clientData：使用websafe-base64編碼后的clientData，數(shù)據(jù)格式參看《FIDO U2F設備應用與開發(fā)(一)-原理與協(xié)議》3.5節(jié)脓魏。

2.4. 錯誤碼

??register和sign方法失敗時返回的錯誤碼定義如下：

interface ErrorCode {
    const short OK = 0;
    const short OTHER_ERROR = 1;
    const short BAD_REQUEST = 2;
    const short CONFIGURATION_UNSUPPORTED = 3;
    const short DEVICE_INELIGIBLE = 4;
    const short TIMEOUT = 5;
};

2.5. 接口中的數(shù)據(jù)結構

2.5.1. RegisterRequest

??使用WebIDL定義的RegisterRequest結構如下：

dictionary RegisterRequest {
    DOMString version;
    DOMString challenge;
};

屬性含義如下：

• version：U2F協(xié)議版本兰吟，如“U2F_V2”
• challenge：使用websafe-base64編碼的挑戰(zhàn)值

2.5.2. RegisteredKey

??使用WebIDL定義的RegisteredKey結構如下：

dictionary RegisteredKey {
    DOMString   version;
    DOMString   keyHandle;
    Transports? transports;
    DOMString?  appId;
};

各屬性含義如下：

• version：U2F協(xié)議版本，如“U2F_V2”
• keyHandle：用于簽名用戶的key handle
• transports:傳輸方式茂翔，可選參數(shù)
• appId：在線服務網(wǎng)站應用Id

3. 編程接口實例探究

3.1. 注冊過程

??讓我們來到y(tǒng)ubico的U2F設備測試網(wǎng)站(https://demo.yubico.com/u2f)混蔼， 使用yubico的安全key，看看register方法和sign方法如何使用珊燎。
??兩個U2F Key,如圖1所示惭嚣，其中一個帶藍牙功能遵湖。

圖1

圖2

圖3

??在客戶端JS腳本對服務端返回的注冊請求進行register函數(shù)調用后，將register的注冊數(shù)據(jù)提交給服務端逢勾，提交的表單數(shù)據(jù)如圖4所示牡整。

圖4

??由圖4提交的數(shù)據(jù)可以看到register返回成功，提交的表單數(shù)據(jù)為：

3.2. 鑒權過程

??注冊成功后溺拱，可執(zhí)行鑒權(login)過程逃贝，如圖5所示。

圖5

??通過跟蹤網(wǎng)站客戶端與服務端的交互消息迫摔，第一次客戶端請求時攜帶了用戶名和密碼沐扳，如圖6所示。

圖6

圖7

??提交的表單數(shù)據(jù)為：

??服務端 驗證簽名后杨拐，返回驗證成功信息。

3.3. 異常處理

??實驗過程中擂啥，如果在交互時不按U2F設備的按鈕和不插入設備哄陶，register和sign函數(shù)都會返回錯誤碼。錯誤碼的定義可參看2.4節(jié)哺壶。

3.4. u2f-api.js

??u2f-api.js是yubico提供的U2F js api奕筐，封裝了第2節(jié)接口規(guī)范中描述的接口”渎猓可從地址: https://demo.yubico.com/js/u2f-api.js 處獲取。u2f-api.js中的主要定義如下：

var u2f = u2f || {};
u2f.register = function(appId, registerRequests, registeredKeys, callback, opt_timeoutSeconds)
u2f.sign = function(appId, challenge, registeredKeys, callback, opt_timeoutSeconds)

??請注意在這個腳本中將register和sign操作的超時時間定義為30秒：

u2f.EXTENSION_TIMEOUT_SEC = 30;

??在執(zhí)行3.1節(jié)的注冊過程時芭逝，通過跟蹤瀏覽器消息塌碌，可以看到第一次向服務器請求后返回的頁面中包含如下JS代碼：

setTimeout(function() {
  var request = {"challenge": "OlyOzHxaxx6LUXX5chXsxj4GfspKTskBANNOtQ_UwcA", "version": "U2F_V2", "appId": "https://demo.yubico.com"};
  console.log("Register: ", request);
  var appId = request.appId;
  var registerRequests = [{version: request.version, challenge: request.challenge, attestation: 'direct'}];
  $('#promptModal').modal('show');
  console.log(appId, registerRequests);
  u2f.register(appId, registerRequests, [], function(data) {
    console.log("Register callback", data);
    $('#promptModal').modal('hide');
    $('#bind-data').val(JSON.stringify(data));
    $('#bind-form').submit();
  });
}, 1000);

??這段代碼中，使用U2F的上層函數(shù)register進行了注冊旬盯，讀者可以與2.2節(jié)的函數(shù)參數(shù)做一下比對台妆，在這段代碼中registeredKeys參數(shù)使用是空數(shù)組“[]”翎猛。
??仔細閱讀u2f-api.js，會發(fā)現(xiàn)腳本使用了EXTENSION_ID為“kmendfapggjehodndflmmgagdbamhnfd”的chrome內置擴展完成與U2F設備的通訊接剩。
??在執(zhí)行3.2節(jié)的鑒權過程時切厘，通過跟蹤瀏覽器消息，可以看到第一次向服務器請求后返回的頁面中包含如下JS代碼：

setTimeout(function() {
  var request = {"challenge": "UGZj34u9u3KVWe3jFrcInm7ZcrPWaX_j9tohZ-34FT0", "version": "U2F_V2", "keyHandle": "3sHb84XcS8HfFaQJ_nhf4aRlWe_wYRKcg5wKelF51hOiP4iNJtGPbsfe5InJmGfoxUSjtqT46HBwG7jkFtc01Q", "appId": "https://demo.yubico.com"};
  console.log("sign: ", request);
  var appId = request.appId;
  var challenge = request.challenge;
  var registeredKeys = [{version: request.version, keyHandle: request.keyHandle}];
  $('#promptModal').modal('show');
  u2f.sign(appId, challenge, registeredKeys, function(data) {
    $('#promptModal').modal('hide');
    $('#verify-data').val(JSON.stringify(data));
    $('#verify-form').submit();
  });
}, 1000);

??這段代碼中懊缺，使用U2F的上層函數(shù)sign進行了注冊疫稿。

4. 瀏覽器兼容測試

??使用購買的U2F設備在PC上對chrome、firefox鹃两、IE瀏覽器進行了測試遗座。其中chrome版本為69，firefox版本為firefox quantum 62, 這兩種瀏覽器目前都支持U2F設備俊扳。
??在firefox中使用U2F需要打開一個開關（默認沒有打開）途蒋，如圖8所示。

圖8

TypeError: setting getter-only property "u2f"

IE瀏覽器使用的版本為11，不支持U2F設備逮光。
??在安卓手機上安裝了chrome app,使用U2F設備的BLE模式(藍牙功能)測試了U2F的支持代箭，沒有成功，在chrome調用register函數(shù)時涕刚，U2F設備沒有閃爍嗡综。

5 應用demo

??參看FIDO U2F應用開發(fā)(三)-開發(fā)支持U2F的站點。

6. 參考文獻

1. https://fidoalliance.org/how-fido-works/
2. https://fidoalliance.org/specs/fido-u2f-v1.2-ps-20170411/FIDO-U2F-COMPLETE-v1.2-ps-20