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

Shopify Customer Accounts

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.

Shopify Customer Accounts

​
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.
Shopify Customer Accounts
  • A dropdown menu will appear. Select Apps and sales channels settings.
Shopify Customer Accounts
  • In the next window that appears click on Develop apps for your store.
Shopify Customer Accounts
  • Click to Allow Custom App Development in the next two screens.
Shopify Customer Accounts
  • Select Create an app. You’ll be asked to give your app a name, and add your email in the App developer text box.
Shopify Customer Accounts
  • Navigate to the Configuration tab and select Configure in the Admin API Integration section.
Shopify Customer Accounts
  • 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.
Shopify Customer Accounts
  • 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.
Shopify Customer Accounts

​
Step 3: Create OwnID Application

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

  1. Open the OwnID Console and create an account or log in to an existing account.
  2. Select Create Application.
  3. Select Shopify Plus Integration
  4. 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:

  1. From your Shopify admin, go to Online Store > Themes.
  2. 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.
  3. 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', {boxShadow:'none'});
</script>
  1. 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>
  1. 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>
  1. Save your changes.

Congratulations! Enjoy your Shopify Plus passwordless authentication!

Was this page helpful?

DrupalCustom Domain