Shopify Plus

OwnID's Shopify Plus plugin is a low-code way to add passwordless authentication to your store with a few clicks.

Step 1 - Enable Multipass login in the Shopify admin#

Log in to your shop admin and go to the Settings > Checkout and accounts page. Scroll down to the Customer accounts section section and ensure that you have "Allow customers to log in from online store and checkout" selected.

Select Enable Multipass. Once enabled, a secret will be shared with you. You will need the secret during the OwnID onboarding. Make sure you keep your secret private.

Step 2 - Generate and find your Shopify API Access Token#

In order to use our Shopify integration you will need the URL of your Shopify Store and an API access token. In this section you will learn how to generate and find this API access token within your Shopify Store.

You can enable a custom app from your Shopify owner's account. To do this:

Log in to your Shopify Store as the store owner.
Select Apps in the admin section on the left sidebar.

A dropdown menu will appear. Select Apps and sales channels settings.

In the next window that appears click on Develop apps for your store.

Click to Allow Custom App Development in the next two screens.

Select Create an app. You'll be asked to give your app a name, and add your email in the App developer text box.

Navigate to the Configuration tab and select Configure in the Admin API Integration section.

Under Admin API access scopes you'll see many categories. Scroll down until you reach Customers, or search for Customers in the search bar. Here, you'll click to tick the boxes for 'write_customers' and 'read_customers', then click the Save button.

Go to the API Credentials and click on Install in the Access tokens box. Now you will see your Admin API Access Token has been generated. Click on Reveal token once and you will see the token. You will use this access token during the onboarding in the OwnID console.

Step 3: Create OwnID Application#

Each website integrating with OwnID must have an OwnID application. To create an OwnID application:

Open the OwnID Console and create an account or log in to an existing account.
Select Create Application.
Select Shopify Plus Integration
Complete the integration steps. Use your Shopify Multipass secret and Shopify API Access Token described above.

Step 4: Add OwnID button to your Login and Registration forms#

The last step to complete this integration is adding the passwordless button to the login and registration forms.

In order to complete this step, you need to edit three pages of your Shopify theme:

From your Shopify admin, go to Online Store > Themes.
Click Actions > Edit code. The code editor shows a directory of theme files on the left, and a space to view and edit the files on the right.
On the left panel, go to the folder Layout and select the file theme.liquid. Place the following script in the <head> of the file:

<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');
       ownid('init', {
            variant: 'button-fingerprint',
            infoTooltip: true,
            widgetPosition: 'start',
            tooltip:{"position":"start"},
            borderColor:'#888888',
            boxShadow:'none',
            infoTooltipPosition:'start'});
</script>

Now, go to the folder Sections and select the file main-login.liquid. Place the following code after your login form:

  <script>
       ownid("login", {
            mobileInfoTooltipPosition:'end',
            loginIdField: document.getElementsByName("customer[email]")[0],
            passwordField: document.getElementsByName("customer[password]")[0],
            targetField: document.getElementsByName("customer[password]")[0].parentElement,
            onError: (error) => console.log(error),
            onLogin: function (data) {
                //setting user session
                window.location.href = data.token;
            }
        });
  </script>

Finally, inside the same folder Sections, select the file main-register.liquid.

Add the following input after your password field element, inside the registration form:

  <div class="ownIdData">
      <input id="ownIdData" type="hidden" name="customer[note][ownIdData]" />
  </div>

In the same file, place the following code after the registration form:

  <script>
      ownid("register", {
            loginIdField: document.getElementById("RegisterForm-email"),
            passwordField: document.getElementsByName("customer[password]")[0],
            targetField: document.getElementsByName("customer[password]")[0].parentElement,
            onError: (error) => console.log(error),
            onRegister: function (data) {
                document.getElementById("ownIdData").value = "<ownIdData>" + data.data + "</ownIdData>";
            }
        });
  </script>

Save your changes.

If you have completed all the integration steps mentioned in this guide, you are ready to enjoy your Shopify Plus passwordless authentication!