Question 268298 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – WebAuthn Client Registration: How to access user credentials and send them to server for user authentification?

I want to implement WebAuthn using Java/Vaadin for the client side.

My goal is to reach that point that any users can register/enroll a WebAuthn in the context of 2FA.
The created token should be saved on a privacyIDEA server for later use. It also handles the authentification of the users.

What I have done so far:

  • Creating the web application with Vaadin (Java framework)
  • Implementing methods for the token management in Java (still unfinished)
  • Using a JavaScript client plugin to faciliate authentification against privacyIDEA server using WebAuthn tokens

Code snippet from JavaScript client-side library:

window.registerWebAuthn = function (challenge, rpName, rpId, userId, userName, displayName) {
            const publicKeyCredentialCreationOptions = {
                challenge: new Uint8Array(challenge),
                 rp: {
                    name: "rpName",
                    id  : "rpId"
            },
                user: {
                    id: new Uint8Array(userId),
                    name: "userName",
                    displayName: "displayName"
                }
            };
            
            navigator
                .credentials
                .create({publicKey: publicKeyCredentialCreationOptions})
                .then(function (newCredentialInfo) {
                    console.log(newCredentialInfo);
              }).catch(function (err) {
                 console.error(err);
              });

   };

The JavaScript function registerWebAuthn takes several parameters and utilizes the WebAuthn API to create a new public key credential. The then block handles the successful creation of the credential, and it logs the newCredentialInfo to the console.

It is expected to start the WebAuthn registration process by pressing the button Create token. To do this, I call the Js function registerWebAuthn() inside Vaadins executeJs() function.

Vaadin/Java code:

@JsModule("./src/pi-webauthn.js")
public class MFAPageView {

    private Button buttonPrimary0 = new Button();

    public MFAPageView() {

        buttonPrimary0.setText("Create token");

        layoutColumn2.add(buttonPrimary0);
        buttonPrimary0.addClickListener(e -> {
            UI.getCurrent().getPage().executeJs("registerWebAuthn()");
    }
}

How do I access the WebAuthn credentials in newCredentialInfo and send them to privacyIDEA server to perform user authentification?

Do you have any idea?

Tags:

2

Answers


  1. 0

    How do I access the WebAuthn credentials in newCredentialInfo and send them to privacyIDEA server to perform user authentification?

    The toJSON method is not yet widely supported, I’m afraid. So you need to grab the fields from the object and serialise them yourself in most cases.

    Login or Signup to reply.
  2. 0

    You can encode newCredentialInfo with something like this:

    const encodedCredential = {
  attestationObject: btoa(String.fromCharCode(...new Uint8Array(newCredentialInfo.response.attestationObject))),
  clientDataJSON: btoa(String.fromCharCode(...new Uint8Array(newCredentialInfo.response.clientDataJSON))),
  transports: (newCredentialInfo.response.getTransports && credential.response.getTransports()) || [],
  // TODO encode all you need, etc clientExtensionJSON: (newCredentialInfo.response.getClientExtensionResults && newCredentialInfo.response.getClientExtensionResults()) || {}
};

    Yeah, probably clean that up a bit, but to illustrate the point.

    Then you can return encodedCredential from registerWebAuthn() and handle it in a then() of your executeJS() call. Something like:

    executeJS(...).then(encodedCredential -> {
                    if (encodedCredential.getType() == JsonType.OBJECT) {
                        JsonObject obj = (JsonObject) encodedCredential;
                        String attestationObjectBase64 = obj.getString("attestationObject");
                        byte[] attestationObject = Base64.getDecoder().decode(attestationObjectBase64);

    Again, you might really want to clean up this code.

    HTH even though it’s not exactly production ready.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search