1. U2F JS API

  FIDO U2F定义了JavaScript API供开发者开发支持U2F设备的在线服务网站。U2F JS API分为两类：底层基于消息端口的API和上层应用API。在FIDO的规格文档中介绍底层API用于与U2F设备进行消息通讯（使用MessagePort Object）,发送和接收消息。本文重点关注屏蔽了通讯细节的上层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. 请求参数

  register方法中各参数描述如下：

2.2.2. 返回值

  register方法成功返回的数据（callback的参数）使用RegisterResponse结构。

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

  其中各属性含义如下：

• version：U2F协议版本，如“U2F_V2”
• registrationData：使用websafe-base64编码后的注册数据，数据格式参看《FIDO U2F设备应用与开发(一)-原理与协议》3.2节。
• clientData：使用websafe-base64编码后的clientData，数据格式参看《FIDO U2F设备应用与开发(一)-原理与协议》3.5节。

2.3. sign方法

2.3.1. 请求参数

  sign方法中各参数描述如下：

2.3.2. 返回值

  sign方法成功返回的数据(callback的参数)使用SignResponse结构。

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

  其中各属性含义如下：

• keyHandle：请求中提供的key handle
• signatureData：使用websafe-base64编码后的签名数据，数据格式参看《FIDO U2F设备应用与开发(一)-原理与协议》3.4节。
• clientData：使用websafe-base64编码后的clientData，数据格式参看《FIDO U2F设备应用与开发(一)-原理与协议》3.5节。

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. 接口中的数据结构

2.5.1. RegisterRequest

  使用WebIDL定义的RegisterRequest结构如下：

dictionary RegisterRequest {
    DOMString version;
    DOMString challenge;
};

属性含义如下：

• version：U2F协议版本，如“U2F_V2”
• challenge：使用websafe-base64编码的挑战值

2.5.2. RegisteredKey

  使用WebIDL定义的RegisteredKey结构如下：

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

各属性含义如下：

• version：U2F协议版本，如“U2F_V2”
• keyHandle：用于签名用户的key handle
• transports:传输方式，可选参数
• appId：在线服务网站应用Id

3. 编程接口实例探究

3.1. 注册过程

  让我们来到yubico的U2F设备测试网站(https://demo.yubico.com/u2f)， 使用yubico的安全key，看看register方法和sign方法如何使用。
  两个U2F Key,如图1所示，其中一个带蓝牙功能。

图1

图2

图3

  在客户端JS脚本对服务端返回的注册请求进行register函数调用后，将register的注册数据提交给服务端，提交的表单数据如图4所示。

图4

  由图4提交的数据可以看到register返回成功，提交的表单数据为：

3.2. 鉴权过程

  注册成功后，可执行鉴权(login)过程，如图5所示。

图5

  通过跟踪网站客户端与服务端的交互消息，第一次客户端请求时携带了用户名和密码，如图6所示。

图6

图7

  提交的表单数据为：

  服务端 验证签名后，返回验证成功信息。

3.3. 异常处理

  实验过程中，如果在交互时不按U2F设备的按钮和不插入设备，register和sign函数都会返回错误码。错误码的定义可参看2.4节。

3.4. u2f-api.js

  u2f-api.js是yubico提供的U2F js api，封装了第2节接口规范中描述的接口。可从地址: 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;

  在执行3.1节的注册过程时，通过跟踪浏览器消息，可以看到第一次向服务器请求后返回的页面中包含如下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的上层函数register进行了注册，读者可以与2.2节的函数参数做一下比对，在这段代码中registeredKeys参数使用是空数组“[]”。
  仔细阅读u2f-api.js，会发现脚本使用了EXTENSION_ID为“kmendfapggjehodndflmmgagdbamhnfd”的chrome内置扩展完成与U2F设备的通讯。
  在执行3.2节的鉴权过程时，通过跟踪浏览器消息，可以看到第一次向服务器请求后返回的页面中包含如下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的上层函数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函数时，U2F设备没有闪烁。

5 应用demo

  参看FIDO U2F应用开发(三)-开发支持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