Customer signatures

DotApparel's APIs are public by default because they are designed to be called from the website's front end. For endpoints that expose public data, like product availability or gift card balances, no authentication is necessary. However, for endpoints that return customer-specific data, such as retail transactions, authentication is required to prevent unauthorised access.

To solve this problem, DotApparel requires an additional signature property, which is an HMAC of the customer's email address, for endpoints that identify customers with email addresses. The shared secret used to generate this HMAC is available in the DotApparel app backend and should never be made public to the website's front end.

Generating a signature

To generate an HMAC signature, you must have access to a secure environment, where the shared secret will not be exposed to the front-end.

• If you have a Shopify Liquid theme, then you can generate the secret using a Liquid filter, and store the shared secret in your theme settings

• If you have a headless front-end, then we recommend generating the signature using a serverless function, after you have authenticated the customer using your own methods

Using a Liquid filter

Generating the HMAC signature in a Liquid theme is trivial because Shopify already handles the customer authentication for you. Inside a Liquid theme, if you have access to the {{ customer }} object, then you know that the customer has already authenticated, thus you can generate a signature for them using the hmac_sha256 filter.

{% if customer and customer.email %}
  <script id="CustomerEmail">{{ customer.email }}</script>
  <script id="CustomerSig">{{ customer.email | hmac_sha256: 'secret_key' }}</script>
{% endif %}

When the signature is available on the page, you can then use it in the Javascript helper to access a customer instance, or use it to directly call the API endpoints.

const email = document.getElementById("CustomerEmail").innerHTML;
const signature = document.getElementById("CustomerSig").innerHTML;

// call this once on your page
window.dotapparel21.setCustomer({ email, signature });

// window.dotapparel21.customer is now available
const retailTransactions = await window.dotapparel21.customer.retailTransactions();