By integrating Shopify with OwnID, you can implement the full set of OwnID features to simplify and streamline your user login experience.

​
How it Works

OwnID supports integration with Shopify through our pre-built Shopify Connector. To use it, create your OwnID app in the Console and select the Shopify Plus connector as described below.

Shopify Plus Connector tile as it appears in OwnID Console

Configuration on the Shopify side happens through the OwnID Connector in the Shopify marketplace. Ensure you have an account with admin access in Shopify.

Integrate OwnID with Shopify in four basic steps:

Step 1 - Enable Multipass.

Step 2 - Get your Shopify Token.

Step 3 - Create a new OwnID No-code App.

Step 4 - Insert OwnID Widget.

​
Step 1 - Enable Multipass

Multipass login is for store owners who have a separate website and a Shopify store. It redirects users from the website to the Shopify store and seamlessly logs them in with the same email address they used to sign up for the original website. If no account with that email address exists yet, one is created. There is no need to synchronize any customer databases.

​
To Enable Multipass

  1. Log in to your Shopify admin and go to the Settings > Checkout and accounts page.
  2. 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 Checkout and accounts configuration screen showing the selection of the option to Allow customers to log in from the online store and checkout
  1. Select Enable Multipass.

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

Shopify Customer Accounts

​
Step 2 - Get your Shopify Token

To implement our Shopify integration you will need to specify two identifiers:

  • URL of your Shopify Store
  • Shopify API access token.

In this section you’ll learn how to get your API access token within your Shopify Store.

First enable a custom app from your Shopify owner’s account:

  1. Log in to your Shopify Store as the store owner.
  2. Select Apps in the admin section on the left sidebar.
Shopify Customer Accounts setting screen
  1. From the dropdown menu, select Apps and sales channels settings.
Shopify Customer Accounts setting screen with App and Sales channel settings option
  1. In the next window that appears click on Develop apps for your store.
App and Sales channel settings page in Shopify with the button labelled Develop apps for your store
  1. Click to Allow Custom App Development in the next two screens.
Shopify confirmation page to allow custom development with the Allow Custom App Development button shown
  1. 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
  1. Navigate to the Configuration tab and select Configure in the Admin API Integration section.
Shopify Customer Accounts
  1. Under Admin API access scopes you’ll see many categories. Scroll down until you reach Customers, or search for “Customers” in the search bar.
  2. Select the boxes for ‘write_customers’ and ‘read_customers’
  3. Click Save.
Shopify Customer Accounts
  1. Go to the API Credentials and click on Install in the Access tokens box. The Admin API Access Token is generated. Click on Reveal token once to see the token as plain text. Make a copy to use during onboarding in the OwnID console.
Shopify Customer Accounts

Securing User’s Personal Data

OwnID does not store or process any user data. Users’ public keys and device information are stored on your platform.

Private keys are kept exclusively on the user’s device and are never transmitted elsewhere.

​
Step 3 - Create OwnID Application

Each website integrating with OwnID must have an OwnID application.

  1. Login to the OwnID Console (or create your account).

  2. Click +Create Application from the Apps screen.

  3. Enter a name for your application in the App name field.

  4. From the Choose your integration panel, select the Shopify Plus tile. Profile editor

  5. Click Next.

  6. Enter the your Shopify settings and click Continue. Profile editor

  7. Click Explore my App on the “Congratulations” popup. Profile editor

  8. From the OwnID Settings panel, copy the App ID and the Shared Secret for use in configuration on the Shopify side. Profile editor

Your OwnID application and secret key are created and you’re ready for next steps!

Complete the integration steps. Use your Shopify Multipass secret and Shopify API Access Token described above.

​
Step 4 - Add the OwnID Widget

Lastly, we’ll add the passwordless widget to the frontend login and registration forms.

Do this by editing 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. Go to the Sections folder 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.

  2. 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>
  1. In the same file, insert the following code below 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!

​
Client secrets

Your app’s client secret is a unique key that authenticates your app when it requests access to a store’s data. You can use your client secret to retrieve an access token for a store, or to verify a webhook request is genuine.

Retrieve your app’s client credentials Anchor link to section titled “Retrieve your app’s client credentials”

You can manually retrieve your app’s client credentials in the Partner Dashboard.

  1. Log in to your Partner Dashboard.
  2. Click Apps.
  3. Click the name of the app you want to retrieve client credentials for.
  4. Click Client credentials.
  5. View or copy your client ID and client secret.

​
Next Steps

​
Ready to deploy?

YES!

Take me to the Deployment Checklist

Was this page helpful?

DrupalCustom Domain