Shopify App Proxy. How to I get data from an external database into my store.

Highlighted
Shopify Partner
25 0 15

What we need is to be able send a single product# or part# to our external site and return on hand inventory levels and price back to the shopify store.  We have an API endpoint in place to return this info.  Not sure how to return this data back into Shopify just yet. What skills/knowledge are needed to be able to call our API endpoint from within a shopify app proxy and return that data back to a Shopify page.   An example of liquid code returned by the App Proxy Server would be nice.

 

I've read Shopify's documentation on App Proxy, but I'm not completely sure I understand the process.

The documentation feels as if it's skipping over certain parts. 

 

For Example, take this section: 

 

AddAnAppProxy.png

 

 

- To add a proxy to your app, make sure the app is set up for the online store area of Shopify

 

I'm confused.  Why are we setting up private App in online store when it says on this page that only public Apps work with App Proxies?  

 

- 1. From your partner dashboard, click apps. To add a proxy to your app.

 

We jumped URLs? from the online store to the partner dashboard between the heading and first paragraph?

 

2.  Click the name of your app.

 

I don't have an app name yet or the app created yet. - click on the Create app button?  

What would I put in as my App URL?  What am I putting in Whitelisted redirection URL(s)?

 

CreateAppFromPartnerDashboard.png

 

3. Click Extensions.

4. In the App proxy section, click Add proxy.

 

App proxy section?,  click on online store..  you will find it there.

 

5. Select a prefix from the Sub path prefix drop-down list. If you want to add a sub path, then enter it in the Sub path field. These settings determine which HTTP requests to Shopify are proxied to the proxy URL entered in the next step. For example, if the sub path prefix is apps, and the sub path is store-pickup, then any path in your shop after https://your-store.myshopify.com/apps/store-pickup is proxied to the provided proxy URL.

6. Enter the URL of your proxy server in the Proxy URL field. This is the URL that will be proxied from the path that you entered in the previous step.

 

- How do I tell shopify that any http(s) requests for single products such as:

   https://progodirect.com/collections/volkel-hex-tap-s-bit-drive/products/tv01-67026, or 

   https://progodirect.com/collections/volkel-tap-wrench/products/tv01-10001 should be sent to the Proxy URL?

 

ProxyURL.png

 

I found another read about Shopify Application Proxy in this Medium thread:

 

 https://medium.com/shop-sheriff/what-is-a-shopify-application-proxy-and-how-can-i-use-it-153bf99d1a9...

 

The pictures helped see the flow.

 

We need a Shopify Application Proxy to be able to call our external API to get price and inventory levels and return

that data to be formatted within a liquid product template.  The way I am picturing the App Proxy working is by intercepting URLs for a single products. i.e. https://progodirect.com/collections/volkel-hex-tap-s-bit-drive/products/tv01-67026 and parsing our the information needed (ie Part#) and calling our API endpoint. 

The data returned by our API endpoint can either be in XML or JSON format.

 

Hoping someone can help us.

 

Best Regards,

Fuller.

 

 

2 Likes
Highlighted
Shopify Expert
4178 29 400

Here is how it works. You want to make a secure callback with a product ID to your App. You want to return to the Shopify product page, a correct inventory amount. Your App is private. You installed it in your shop. You set it up to listen to incoming calls (GET) at some endpoint like /a/foo or /tools/goob or whatever. 

 

If you did setup your endpoint correctly, and are listening, you now have a couple things to do. When you get a request, you need to validate it as being from your Shop. Shopify has embedded the HMAC and product ID for your use. If you decide it is legit, you call your inventory service, and ask, hey dude, how much of product ID 123456789 do we have right now? And you get that number, and you send it back to the caller as a JSON response like { variant_id: 12344, quantity: 10 } so that on the front-end shop, you can update the variants. 

 

On the front-end, let us say you use jQuery. So you just do a $.get('/a/foo', { id: 123456789}) and wait for the response. Since you get back JSON, it is easy for you now update your page for customers. 

 

So this is it. Nothing crazy. Sure it seems crazy, but it is pretty easy. The problems are myriad though. Customers can change the Proxy URL in the App Details of the Admin! Sacre-bleu! And the code to compare the HMAC secure signature and payload etc, is very sketchy in explanation, but in the end, it all works. You can use the Shopify App code for examples as they include the verification of HMAC in their code. 

 

SKIP returning Liquid. That is not needed at all, and adds way too much complexity to things. 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
1 Like
Highlighted
Shopify Partner
25 0 15

I appreciate the reply.  You make it sound easy enough.

Hope you don't mind answering a few more questions for me and the others that will look to this thread to gather information about using an app to call an external API (not a SHOPIFY API) for retrieving data.

 

The part that I'm think I understand is making the jQuery $.get() call.

I will be making that jQuery call from our theme's section that contains a file called: product-template.liquid 

Sound okay to you?

 

I thought, Only public apps can use app proxies?

Anyway, my question is with configuring the app proxy in the partner dashboard and how this relates to the path inside of my $.get() call.

 

If my app proxy subpath prefix is: apps

and my subpath is: get

then I should be configuring my get call as: $.get('/apps/get/', product.handle);  // note: product.handle is part# for us.

Sound okay to you?

 

I believe Shopify sees this $.get() call, takes whatever the path inside of it is and replaces it with the proxy URL instead?

Am I correct here? that any $get() calls using the app proxy subpath prefix and subpath are replaced with the proxy URL?

 

So the app resides at my proxy URL? Correct?

The proxy URL can be hosted either on the cloud, such as Heroku, or it could be hosted on our own internal server? Correct?

Can Shopify also host/run the app on their own servers?

 

I think, I better stop there before asking further questions.

 

 

 

 

 

0 Likes
Highlighted
Shopify Partner
25 0 15

Seems my previous post did not go through.. I will try it again.

 

HunkyBill, thank you for your reply.  Hope you don't mind if I ask a few more questions to confirm I am understanding the concepts, and as a reference for the others that find this thread in the future.

 

Only public apps can use app proxies.  It would appear that I need an app proxy to call our inhouse API to get external data, right?

Would I still have to configure the private App settings in my store if I intend to use an App Proxy?  

 

In my Shopify Theme->Section->product-template.liquid, I want to add some jQuery script to call my App.

For example: $.get('/apps/get/', product.handle) { // call appProxy,  Note: we use product.handle as our Part# } 

/apps -  See $.get(), this is my AppProxy subpath prefix 

/get - See $.get(), this is my AppProxy subpath

 

When the script is executed it will make a call to the proxy URL. 

In otherwords, /apps/get is replaced by my proxy URL, and the $get() call is made to my APP hosted at this API endpoint.

 

Does this sound correct?

 

My App in turn will make another API call our external server to retrieve partInfo: price and stock quantity.

My App will receive a XMP or JSON file, convert it, and return the information as part of the $.get callback

 

Can I use PHP to write the App?  Not familiar with Rails, Node, or Python.

Can the App be hosted by Shopify, or does it have to be an external server or a cloud base platform such as Heroku?

 

Looking forward to your reply?

 

0 Likes
Highlighted
Shopify Expert
4178 29 400

@fuller wrote:

Seems my previous post did not go through.. I will try it again.

 

HunkyBill, thank you for your reply.  Hope you don't mind if I ask a few more questions to confirm I am understanding the concepts, and as a reference for the others that find this thread in the future.

 

Only public apps can use app proxies.  It would appear that I need an app proxy to call our inhouse API to get external data, right?

Would I still have to configure the private App settings in my store if I intend to use an App Proxy?  

 

All that means is that an App you setup in your partner dashboard, that you installed in your shop, and that has an oAuth token for access to the resources you need. It does not mean an app in App store, or anything like that. It just means you are running an App in the cloud somewhere, reachable by Shopify. Hence Public.

 

 

 

In my Shopify Theme->Section->product-template.liquid, I want to add some jQuery script to call my App.

For example: $.get('/apps/get/', product.handle) { // call appProxy,  Note: we use product.handle as our Part# } 

/apps -  See $.get(), this is my AppProxy subpath prefix 

/get - See $.get(), this is my AppProxy subpath

 

When the script is executed it will make a call to the proxy URL. 

In otherwords, /apps/get is replaced by my proxy URL, and the $get() call is made to my APP hosted at this API endpoint.

 

Does this sound correct?

 

 

Yes, it does. Perfect... you call your endpoint with just the setup you used in the App partner dashboard for the proxy. Shopify then takes care of formatting the request with security based on your API secret. Neat eh...

 

My App in turn will make another API call our external server to retrieve partInfo: price and stock quantity.

My App will receive a XMP or JSON file, convert it, and return the information as part of the $.get callback

 

You are on a roll now!

 

Can I use PHP to write the App?  Not familiar with Rails, Node, or Python.

 

You can. You can use anything to write an App as long as it does Internet computing. No problem. 

 

Can the App be hosted by Shopify, or does it have to be an external server or a cloud base platform such as Heroku?

 

I use Heroku, but you're free to use any server setup you want, so long as your server is reachable by Shopify as https://something.something.com for example. 

 

 

Looking forward to your reply?

 

You're in doubt! Hah... lucky you.

 


 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
3 Likes
Highlighted
Tourist
6 0 3

Does the proxy really add any security?

 

I understand about the signed request from Shopify to the app but anyone can still access the URL https://store-name.myshopify.com/a/foo at the store.  That URL is still open to the world isn't it? What does the use of the proxy really achieve?

 

The signed server to server request prevents someone proxying the response from their store or other site but as far as I can see, it doesn't do anything to make the Ajax request "secure".

0 Likes
Highlighted
Shopify Expert
4178 29 400

Yes, anyone can hit that end point, but it is SHOPIFY, not your App. Shopify formats the request that goes to your App, and then your App decides if it is legit or not to deal with the call, and return data.

 

So yes, this is secure. You ask what does this achieve? It allows for Ajax calls without CORS issues. It means you can return HTML/Liquid or JSON data to a front-end from a back-end... it means a lot. Do you not see that? Proxies are nice.

 

Soon enough this will be replaced with sections from Apps, but until then, this is the way to go.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
Highlighted
Tourist
6 0 3

I was reading your post where you said:

 

You want to make a secure callback with a product ID to your App.

What did you mean by "secure"?

 

Sure, the proxy avoids your app needing to provide CORS and nobody else is able to request from your app directly, they need to go through Shopify but as far as I see, it doesn't do anything for security if that Ajax request returns some sensitive information.

0 Likes
Highlighted
Shopify Expert
4178 29 400

Nothing can help you here. If you are scared of returning sensitive information in a callback, that is your problem, and no technology can help you.

 

What is your actual problem? Are you just speculating that you think you can't do something here?

 

There is very little challenging to learn about the Proxy. If you're scared of the boogie man intercepting your XHR response and causing you grief, then you can certainly add your own layer on top of HTTPS and the proxy pattern. Feel free. Encrypt your payload next level, but don't screw that up or you're screwed :)

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
Highlighted
Excursionist
17 0 3

I'm a little concerned about latency introduced by app proxy. I've tested response time to my app directly and it reports between 150-250 ms. However, when the request goes through an app proxy, it ranges between 600-700 ms - that's more than double. Response's content/type is application/json, so there's no liquid rendering involved. 

 

Is there anything I can do to reduce latency? I've noticed many apps send requests directly to their APIs rather than going through the app proxy, I can imagine this is why?


Best regards,

Evaldas

0 Likes