如何在移动设备上的WebAuthn中使用FIDO凭据

Question

我已经使用内置的firefox和chrome-with-javascript U2F API实现了基于桌面浏览器的U2F。我在这里遵循了基本食谱：

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

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

• 证书
• key_handle
• public_key
• 计数器

[我相信，但我不确定，已经收集了有关此物理设备的信息，现在我可以在移动设备上呈现完全相同的网页时重新利用它来实现WebAuthn，而不是呈现用于用户进行身份验证，将呈现一个移动设备本地界面以请求NFC身份验证（如果设备具有NFC）。

我正在尝试使用上述4个属性来通过nav.credentials.get呈现javascript，但是我陷入了困境。

我不清楚以下哪个是正确的

A）您可以使用在桌面Web上的U2F设备注册过程中收集和验证的凭据/信息，通过Web Authn在移动设备上进行身份验证

B）如果您希望在移动设备上使用Web身份验证，以便它可以触发本地移动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并返回到移动网络。只需拉动我们的钥匙并对其发出嗡嗡声，那就更好了。

感谢您的帮助，凯文

Answer 1

[使用navigator.credentials.get（）时，请确保设置扩展名：{appid：u2f_appid}，即u2f.register调用期间的U2F appId参数。就我而言，我使用了origins.json受信任的方面列表URL。

https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredentialRequestOptions/extensions

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