How to display extra customer data in Shopify store using a custom NodeJS server securely?

Question

The goal is to display custom customer data inside /account securely. The user will need to login in Shopify store to access the route.

The data is tied to the Customer's email address in the server. So I'll do GET request with email address in the request URL.

In the /account liquid template I'm using Vue component. It will handle the request to a NodeJS API (I'm using feathers/express).

So far I read about App Proxy and App Bridge, but I don't know how those will fit here.

The main problem:

How do I secure the API to make sure only the logged in Shopify customer can get their own data inside the store? How do I verify the user and making sure the API only accessible via the store?

Note: I'm really new to Shopify. Please explain with more details. Thanks.

Answer 1

1. Create an app using the Shopify CLI tool, use command shopify node create to generate Node JS one.
2. The generated app includes auth/callback that's needed for the app to be install-able on a Shopify store. Using this CLI, it also do the initial setup on Partner Dashboard.
3. We can start the Node app using shopify node serve that'll start ngrok server, and updates the app's URL in App Setup. Then you'll need to setup App Proxy by copying the URL and put it inside App Setup.
4. By using App Proxy, Shopify will "reroute" the call via Shopify backend with an added signature to your app/server, so we know the call is secure and is the correct one.
5. Then we can verify the signature in URL query that comes from Shopify. Here's the code from Ruby rewritten in JS. I'm using it as a hook in my Feathers JS service.

const { NotAuthenticated } = require('@feathersjs/errors');
const crypto = require('crypto');
const safeCompare = require('safe-compare');

module.exports = () => {
  return async context => {
    const { query } = context.params;
    const signature = query.signature;
    delete query.signature;

    let sortedParams = '';
    for (const [key, value] of Object.entries(query).sort()) {
      sortedParams += `${key}=${value}`;
    }

    const calculatedSignature = crypto
      .createHmac('sha256', process.env.SHOPIFY_API_SECRET)
      .update(sortedParams, 'utf-8')
      .digest('hex');
  
    if (!safeCompare(calculatedSignature, signature)) {
      throw new NotAuthenticated();
    }

    return context;
  };
};

Answer 2

It is easy. The terminology is a little odd but here is all you need to know.

1. Setup an App Proxy in your App

That will let you know the incoming call is secure and from Shopify. The call can include two key parameters, namely the email and customer ID.

2. get the interesting data, and return JSON

So you have an email, and an ID. Now you can securely get the customer account data that matters, and return it in JSON to your component on the front-end.

That is it. Nothing more to it. Have fun.