How to store external API Key with Theme Extensions

sercanov
Tourist
4 1 0

Hi, I'm developing an embedded app which requires access to our external API ( Meshkraft ) from storefront via a token. I've successfully implemented this behavior with ScriptTag after first install but Shopify App Review Team suggested me that I implement Theme Extensions as ScriptTags will eventually deprecate. 

I was storing token in ScriptTags like below, then meshkraft-shopify.js in Storefront would access to that token easily.

 

const requestBody = {
    script_tag: {
      event: "onload",
      src: `https://unpkg.com/meshkraft-viewer/dist/meshkraft-shopify.min.js?token=${token}`
      },
    },
 

 

 

Now I'm trying to save and access this shop-wide token in App Block with Theme Extensions. I guess there's no way to query external database, it seems I need to store it in Private Metafields but as far as I know, private metafields cant be accessed in .liquid files. So, I'm stuck with ScriptTags. 

Basically,

1. I need to register the Shopify shop to our external API platform after app installation [ In Admin App ]

2. Get the API token [ In Admin App ]

3. Save it somewhere [ In Admin App ] ( It's not a public token so I have no security concerns ) 

4. Fetch and use it in Theme Extension App Block. [ In Storefront ]

 

Also, I'd happily continue to use ScriptTag's if possible. It's much easier to inject single javascript file to Storefront. This script basically gets Product GID, API token and adds an AR Button to Product page. When pressed, opens an AR session with the 3D model fetched from our server.

 

Any suggestions?

 

 

Replies 0 (0)