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).
Figure 1. After integration (example)

The instructions on this page assume you have already installed and referenced the OwnID SDK at the top of your page as described in Steps 1 and 2 of 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.

<body>
    <form>
        <div><input placeholder="Email" id="email" type="text"></div>
        <div><input placeholder="Name" id="name" type="text"></div>
        <div><input placeholder="Password" id="pass" type="password"></div>
        <div id="confirm-pass-wrapper"><input placeholder="Confirm Password" id="confirm-pass" type="password"></div>
        <button id="submit" onclick="onSubmit();">Register</button>
    </form>

    <script>
        let ownIdDataObject = null;

        ownid("register", {
            loginIdField: document.getElementById("email"),
            passwordField: document.getElementById("pass"),
            passwordFieldBinding: true, // false by default (if true, OwnID creates a random strong password)
            confirmPasswordContainer: document.querySelector('#confirm-pass-wrapper'), //optional, only if you have a confirm password field (OwnID hides it automatically)
            onError: (error) => console.log(error),
            onRegister: (ownIdData) => {ownIdDataObject = ownIdData.data;}
        });

        function onSubmit() {
            const regParams = {
                email:  document.querySelector('#email').value,
                name: document.querySelector('#name').value,
                password: document.querySelector('#pass').value,
                ownIdData: ownIdDataObject,
            };
            // this is just an example - Call your existing registration logic in the backend
            registerUser(regParams);
        }
    </script>

</body>

​
Styling Options

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

​
Default Button

Default button variant (Example for michaelkors.com)

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

Standalone button variant (Example for nfl.com)

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.

OwnID changes the texts and icon according to the platform to ensure a higher click rate

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

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

That’s it!

Your users can now register for a new account and leverage other user journeys you implement.

Before going live make sure you check out the following the next steps.

​
Next Steps

​
Ready to deploy?

YES!

Take me to the Deployment Checklist

NOT YET...

I want to build another user journey

Was this page helpful?

Previous
Account Recovery
Next