Login is the first frontend integration you should build. 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
Widget Figure 1. After implementation (example)

​
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.

npm install @ownid/react

​
Step 2 - Reference the OwnID SDK

Reference the SDK at the top of your web pages.

<script>
    ((o,w,n,i,d)=>{o[i]=o[i]||(async(...a)=>((o[i].q=o[i].q||[]).push(a),{error:null,data:null})),
    (d=w.createElement("script")).src='https://cdn.ownid.com/sdk/'+n,d.async=1,w.head.appendChild(d)})  
    (window,document,'<appID>','ownid');
</script>

Get the most from OwnID integration

We recommend including the SDK on all pages, even those without user-facing authentication elements. Doing so will enable users to access additional functionality, wherever they are on your site.

​
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.

Session identifier can be ANY data Object

Although we’re calling it a ‘token’, the session identifier can be any unique data object. We only pass it right back to you so you’re able to associate a callback with a session.

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

<body>
    <form name="myForm">
        <input id="email" type="text" name="email">
        <input id="password" type="text" name="password">
        <input type="submit" value="Submit">
    </form>
    <script>
        ownid("login", {
            loginIdField: document.getElementById("email"),
            passwordField: document.getElementById("password"),
            onError: (error) => console.log(error),
            onLogin: function (data) {
                // Generic example on how to set a session and redirect the user (use your own!)
                // 1. set user session using data.token (it can be any data object), generated in your backend and sent through the OwnID server, which does NOTHING with it except pass it back to you as appropriate!
                localStorage.setItem('sessionID', JSON.stringify({ token: data.token }));
                // 2. redirect the user to your preferred entry point 
                window.location.href = '/landingpage';
            }
        });
    </script>
</body>

That’s it!

You’ve implemented the frontend functionality required for the user to login.

If you’re ready to deploy your integration, make sure to read the Pre-Deployment Checklist before hand!

​
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?

IntroductionRegistration