Registration

Registration works with your existing user registration form to add new users or enroll new devices for existing users.

​

Prerequisites

To get the most out of this guide, make sure to do the following tasks first:

1. Complete the backend integrations (see Build Server-Side Endpoints).
2. Complete the Login integration (see Login).

​

Integrating Registration

Implement the event handler, and OwnID registration integration with references to the password and user id fields in your existing form.

​

Add the Widget to your Registration Form

The SDK register method is used to integrate the registration journey. It references the fields in your existing registration form. It also renders the OwnId widget by automatically referencing your field Ids to calculate its position in the DOM.

The sample registration forms in the snippets below are vanilla examples, shown here only to confirm the implementation pattern of form fields in SDK methods.

​

Implement register Method

In the ownid method:

1. Enter “register” for the method name.

2. Assign the form field (as a DOM element) you use as the password to the passwordField parameter.

3. Assign the form field (as a DOM element) you use as the login id to the loginIdField parameter.

4. Set the passwordFieldBinding parameter to true if you want to force the OwnID platform to automatically create a random strong password. The value is false by default.

5. Assign an error function as desired in the onError parameter.

6. Configure the onRegister event to copy the ownIdData object to a local variable. When submitting the registration form, you must send that object to your backend and store it in the ownIdData field you created during Preparation.

Use the code snippets below, and check the embedded comments, to model your implementation of the submit handler and the SDK register method.

​

Styling Options

The OwnID register widget can be styled in different ways to match your application’s design:

​

Default Button

The default implementation places the OwnID button side by side with the password field. This is the standard configuration and requires no additional parameters.

If you would like to style this button, you can do it in the OwnID Console or utilize the following CSS variables:

ownid-fingerprint-button-widget {
    --ownid-button-widget-border-radius;
    --ownid-button-widget-font-size;
    --ownid-button-widget-color;
    --ownid-button-widget-border-color;
    --ownid-button-widget-check-size;
    --ownid-button-widget-check-position-top;
    --ownid-button-widget-check-position-right;
    z-index;
}

​

Standalone Button

For cases where you want to position the OwnID button independently from the password field, use the standalone button variant:

ownid('register', {
  variant: 'standalone-button',
  infoTooltip: false,
  loginIdField: document.querySelector('#email'),
  element: document.getElementById('button-wrapper-div'),
  // other configuration options...
});

Note: in the code sample above, button-wrapper-div represents the div where the button will be shown. Configure your own.

This creates a separate OwnID button that you can position anywhere in your login form.

If you would like to style this button, you can utilize the following CSS variables:

• Button
• Finished State (Register)

ownid-standalone-button-widget {
    height: 40px;
    --ownid-button-width: 100%;
    width: 100%;
    --ownid-button-widget-border-color;
    --ownid-button-widget-border-radius;
    --ownid-button-widget-font-size;
    --ownid-button-widget-font-weight;
    --ownid-button-widget-color;
    --ownid-button-widget-icon-height;
    --ownid-button-widget-icon-stroke-width;
    --ownid-button-widget-check-size;
    --ownid-button-widget-check-position-top;
    --ownid-button-widget-check-position-right;
}

​

Next Steps

​

Ready to deploy?