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

        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>

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?

LoginAccount Recovery