Login

Login is the first frontend integration you should build after completing backend event handlers.

In addition to the login integration procedure, this page includes instructions for installing and referencing the SDK, which is a prerequisite for all other frontend integrations.

​

Prerequisites

To get the most out of this guide, make sure you’ve already completed the backend integrations as described in Build Server-Side Endpoints.

​

Integrating Login

Integrate login in just three steps.

1. Step 1 - Install OwnID Web SDK
2. Step 2 - Reference the OwnID SDK
3. Step 3 - Add the Widget to your Login Form

​

Step 1 - Install OwnID Web SDK

The OwnID Web SDK provides communication between your frontend login page and the OwnID cloud server.

If you’re using React or Angular frameworks, and you haven’t yet installed the OwnID SDK on your local system, you should do that now before continuing.

To install the React-based or the Angular-based SDK, select the tab that matches your framework and copy the npm command shown.

​

Step 2 - Reference the OwnID SDK

Reference the SDK at the top of your web pages.

​

Step 3 - Add the Widget to your Login Form

The SDK login method is used to integrate the login journey. It references the field Ids in your existing login form. It also renders the OwnId widget by automatically referencing your field elements (through their id) to calculate its position in the DOM.

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

​

Calling the SDK

In JavaScript, OwnId SDK methods are instantiated by calling ownid with the appropriate method name and its parameters:

        ownid("method_name", {
            parameter_1: value_1,
            parameter_2: value_2,
            ...
            parameter_n: value_n,
            // Handle errors as you see fit
            onError: (error) => console.log(error),
            // When the relevant event fires,
            onSomeEvent: (event) => console.log(event)
        });

We’ll use the login method name here.

Check the Angular or React implementation example snippets for framework-specific variations of the syntax above.

​

Implement login Method

In the ownid method:

1. Enter “login” 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. Assign an error function as desired in the onError parameter.

5. Configure the onLogin event to copy the data.token object locally. The data.token is the value generated by the getSessionByLoginId endpoint and you should use it to set a user session or exchange it for a session token.

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

​

Next Steps

​

Ready to deploy?