0

I have implemented desktop browser based U2F using the firefox-built-in and chrome-with-javascript U2F API. I've followed the basic recipe here:

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

For each physical device, I have 4 attributes:

  • certificate
  • key_handle
  • public_key
  • counter

I believe, but I am not certain, that having harvested this information about this physical device, I can now repurpose it when rendering the exact same web page on a mobile device to implement WebAuthn, which, instead of rendering a web page for the user to authenticate, will render a mobile-os-native interface to request NFC authentication (if the device has NFC).

I am trying to use the 4 attributes above to render javascript with nav.credentials.get, but I am stuck.

It's not clear to me which of the following is true

A) You CAN use the credentials / information collected and validated during the U2F device registration process on desktop web for authentication on mobile with web authn

B) If you wish to you use web authn on mobile so it can trigger a native mobile NFC authentication process, you must, in addition to the regular U2F flow, also secretly process webauthn registration (by "secret" i don't mean you're intentionally not telling the user that they're doing this, but rather, the user is unaware of the distinction between A and B).

Following the example linked above, their javascript is something like:

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();
});

Using the mozilla example here:

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

I am attempting to adapt that into something like:

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);
});

But it's not clear how I map the U2F attributes to the webauthn attributes. I can't seem to find a concrete example of this working, but I am certain it does work because GitHub and DropBox both have this exact flow - you register the U2F device on desktop web, and then the NFC device is usable on native mobile.

The reason, by the way, that I want to implement this is that the user, on native mobile, never has to leave your web app, the native NFC interface is rendered and they are magically taken back to your web app. What I currently have is, if mobile is detected, render the OTP interface, which requires the user to switch over to an authenticator app like Authy, and then copy the OTP and go back to mobile web. It's much nicer to just pull our your key and buzz it.

Thanks for any help, Kevin

1
  • When calling navigator.credentials.get() in a 2FA scenario the thing that matters most is the allowedCredentials array. This is a list of credential IDs (which likely maps to your key_handle) that belong to the user in question. I believe (no personal experience of this) in a U2F migration scenario the other important bit is the rpId which should be set to the original hostname the key was registered against.
    – mackie
    Commented Dec 17, 2019 at 13:22

1 Answer 1

1

When using the navigator.credentials.get(), make sure to set the extensions: {appid: u2f_appid}, i.e. the U2F appId parameter during u2f.register call. In my case I used the origins.json trustedfacet list URL.

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

The reason you need to set extensions.appid parameter is if WebAuthn rpId fails, it will fallback to older U2F using the extensions.appid parameter

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.