How do you make authenticated requests from a Theme App Extension to your application?

[sarik_cw]

Let's say I'm making an app that allows merchants to display a product of their choice anywhere on their store using Theme App Extension. My app logic would be use the products api to provide the merchant an interface to select their desired product, the I would store the product's ID in my app's own database. 

Now I want to create a theme app extension that sends a GET request to my server and get the product ID stored in the app's database for the merchant. The thing is, how do I make an authenticated request so my app knows who the merchant is?

If I understand correctly, Theme App Extensions logic is handled through Javascript, so it would be possible to maybe send merchant ID in the request header or body, but I'm not sure that would be the safe method, since anyone can send the API request with any header/body using something like Postman.  

[bishpls]

1. Identify the shop on which the App Extension is running; Liquid variables for shop ID {{ shop.id | json }} and/or shop name {{ shop.name | json }} work well for this.

2. Make a request to your server, identifying the shop from these; additionally, confirm that you've received an app authorization from that app. The Product Reviews Sample App has a solid start in setting up authorization session storage, but you'll want to flesh it out such that it's persisted on your own server. https://github.com/Shopify/product-reviews-sample-app/tree/ab5e5f09e76d83b950e02f4ae8b649455a0a694c

3. Whatever additional handshaking or anti-fraud you'd like to add to prevent "anyone can just dump the request into Postman." This is outside the scope of Shopify; you can't use any kind of API key since it's fundamentally accessed from the web, so something like a trusted domain list, md5 checksum handshake, etc. would do fine to head off the most unsophisticated access methods. 

[nicofrm]

EDIT: Just figured it out, the following Stackoverflow article explains it pretty well for anyone wondering: https://stackoverflow.com/questions/51769347/using-liquid-variables-in-javascript

Hi, thanks for your reply!

Regarding step 1, how can I get the shop Id to my Javascript file in the assets folder? I can access the Shop Id in the .liquid file, however I fail to transfer this Id to the JS file to use it to authenticate my request. 

Any help would be greatly appreciated 🙂 

[bishpls]

Toy example below:

In Liquid:
<script>
  (function() {
    let shopId = {{ shop.id | json }};

    window.demoSettings = {
      shopId
    };
  })()
</script>

Then just access your window object from the JavaScript file you're running your main extension logic from.