如何将FIDO凭据与WebAuthn一起用于移动端

Question

我使用Firefox内置的U2F API和Chrome的JavaScript U2F API实现了基于U2F的桌面浏览器。我遵循了这里的基本配方：

https://github.com/castle/ruby-u2f

对于每个物理设备，我有4个属性：

• 证书
• key_handle
• public_key
• 计数器

我相信（但我不确定），在获取了关于这个物理设备的这些信息之后，我现在可以在移动设备上呈现完全相同的网页时重新使用它来实现WebAuthn，它将呈现一个移动OS本机接口来请求NFC身份验证（如果设备有NFC的话），而不是呈现一个供用户验证的网页。

我试图使用上面的4个属性来呈现带有nav.credentials.get的javascript，但我被卡住了。

我不清楚下列哪一项是正确的

A）您可以使用桌面web上U2F设备注册过程中收集并验证的凭据/信息,通过web Autht在移动端进行身份验证n

B）如果您希望在移动端使用web authn以便它可以触发本机移动NFC身份验证过程，那么除了常规的U2F流之外，您还必须秘密地处理webauthn注册（所谓“秘密”，我不是指您有意不告诉用户他们正在这样做，而是用户不知道a和B之间的区别）。

按照上面链接的示例，他们的javascript如下所示：

var appId = <%= @app_id.to_json.html_safe %>
var registerRequests = <%= @registration_requests.to_json.html_safe %>;
var signRequests = <%= @sign_requests.as_json.to_json.html_safe %>;

u2f.register(appId, registerRequests, signRequests, function(registerResponse) {
  var form, reg;

  if (registerResponse.errorCode) {
    return alert("Registration error: " + registerResponse.errorCode);
  }

  form = document.forms[0];
  response = document.querySelector('[name=response]');

  response.value = JSON.stringify(registerResponse);

  form.submit();
});

使用下面的mozilla示例：

https://developer.mozilla.org/en-us/docs/web/api/publickeycredentialrequestoptions

var appId = <%= @app_id.to_json.html_safe %>
var registerRequests = <%= @registration_requests.to_json.html_safe %>;
var signRequests = <%= @sign_requests.as_json.to_json.html_safe %>;


var options = {
  challenge: new Uint8Array([/* bytes sent from the server */]),
  rpId: "example.com" /* will only work if the current domain
                         is something like foo.example.com */
  userVerification: "preferred",
  timeout: 60000,     // Wait for a minute
  allowCredentials: [
    {
      transports: "usb",
      type: "public-key",
      id: new Uint8Array(26) // actually provided by the server
    },
    {
      transports: "internal",
      type: "public-key",
      id: new Uint8Array(26) // actually provided by the server
    }
  ],
  extensions: {
    uvm: true,  // RP wants to know how the user was verified
    loc: false,
    txAuthSimple: "Could you please verify yourself?"
  }
};

navigator.credentials.get({ "publicKey": options })
    .then(function (credentialInfoAssertion) {
    // send assertion response back to the server
    // to proceed with the control of the credential

    // update the hidden form input then
    form.submit();
}).catch(function (err) {
     console.error(err);
});

但不清楚如何将U2F属性映射到webauthn属性。我似乎找不到一个具体的例子，但我可以肯定它是可行的，因为GitHub和DropBox都有这样一个确切的流程--你在桌面web上注册U2F设备，然后NFC设备就可以在本地移动设备上使用了。

顺便说一句，我想要实现这一点的原因是，用户在本机移动端，从来不需要离开您的web应用程序，本机NFC界面被呈现，他们被神奇地带回您的web应用程序。我目前拥有的是，如果移动检测到，呈现OTP界面，这需要用户切换到Authy这样的认证器应用程序，然后复制OTP并返回到mobile Web。把你的钥匙拔出来然后按一下就好了。

谢谢你的帮助，凯文

Answer 1

使用navigator.credentials.get（）时，确保设置扩展名：{appId:u2f_appid}，即在U2F.register调用期间设置U2F appId参数。在我的例子中，我使用了origins.json trustedfacet列表URL。

https://developer.mozilla.org/en-us/docs/web/api/publickeycredentialrequestoptions/extensions

您需要设置extensions.appid参数的原因是，如果WebAuthn rpId失败，它将使用extensions.appid参数回退到旧的U2F