how to use any Shopify API from jquery ajax

manage_bevvy
Shopify Partner
3 0 0

i am using API /admin/customers/count.json which returns count of customer. When i pasted this url in browser directly along with api key and password. It return the correct count in JSON format.

 

How can i use this url from jquery url. Below is the code which gives error of Cross Origin Resource Sharing.

For this issue i used JSONP but still unable to get result.

$.ajax({
                    type: 'GET',
                    url: "https://eff4eaa268115af0f28111f9d44713d3:mypwd@bevyy.myshopify.com/admin/products/count.json?callbac...;,
                    dataType: 'jsonp',
                    crossDomain: true,
                    //contentType: "application/json",
                    jsonpCallback: 'foo', // for caching
                    success: foo
                })
                .fail(function (XHR, status, error) {
                    alert(XHR.responseText + '' + status + '' + error);
                });

Can any one provide help.

Replies 12 (12)

Cafeasp1
New Member
5 0 0

Hi,

For security reasons, don't include your private app password.  With in your shop, you can get a total count of proudct using Shopify liquid syntax. If your product is on a collection you can use collection.products_count

{{ collection.all_products_count }} {{ collection.all_products_count | pluralize: 'Item', 'Items' }} total

 

Jason
Shopify Expert
11190 225 2282

Why would you ever want to do this with jQuery?

To access the API with JavaScript would require passing the key and password in plain text. Anyone looking at the script source on the site would be able to grab this info and gain full access to the store. I can't stress how bad of an idea this is.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★

HunkyBill
Shopify Expert
4845 60 547

You do understand that providing your API key and Password in Javascript is nasty and that the whole world could read those values from your source and mess with your shop? Assuming you are trying this kind of call on a domain other than bevyy.myshopify.com of course you get nailed by CORS. Since day one of XHR you cannot do cross-domain calls without this kicking in.

If you really want to do XHR calls to endpoints in your admin, setup your own private App, then create an App Proxy that you can call with Ajax. No more cross domain issues and you get secure XHR calls to access admin side data. If you run your calls inside Shopify Admin itself (ala Greasemonkey style) then CORS problems also go away, as does authentication issues, since you had to login to the admin in the first place, hence your JS calls to /admin endpoints just work without all the messy authentication.

If you just want client-side ajax data, try the getJSON call and your cross domain issues go away too since those XHR calls are allowed from any domain.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com

Cafeasp1
New Member
5 0 0

You should be using your private app credentials from a server side not from the client like jquery. You should get new password immediately. 

manage_bevvy
Shopify Partner
3 0 0

Hi,

i have created private app but can you tell me how to create app proxy.

i have used getJSON but the method is also giving cors error "NS_ERROR_DOM_BAD_URI: Access to restricted URI denied"

mike_zbik
Visitor
3 0 0

Host your code on AWS lambda

HunkyBill
Shopify Expert
4845 60 547

https://docs.shopify.com/api/uiintegrations/application-proxies

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com

manage_bevvy
Shopify Partner
3 0 0

Hi,

i'll tell what i am developing,

i am creating a android phone app in apache cordova+phonegap. there i am using jquery ajax to fetch result.

i also went to https://docs.shopify.com/api/uiintegrations/application-proxies where it is mentioned that proxy name cannot be set localhost.

i am testing the api on my local machine. so my app will generate localhost.

can you provide me some code of how to use proxy app with the below provided code.

The url containing pwd will not be shown as it will be converted to .apk for android versions.

$.ajax({
                    type: 'GET',
                    url: "https://eff4eaa268115af0f28111f9d44713d3:mypwd@bevyy.myshopify.com/admin/products/count.json?callbac...;,
                    dataType: 'jsonp',
                    crossDomain: true,
                    //contentType: "application/json",
                    jsonpCallback: 'foo', // for caching
                    success: foo
                })
                .fail(function (XHR, status, error) {
                    alert(XHR.responseText + '' + status + '' + error);
                });

 

Thanks for your help.

 

Lolo1
Excursionist
44 0 11

Dear Shopify Experts (HunkyBill and Jason, I'm looking at you guys).

I have a Shopify web application that basically works as follows:

  • I embed my Javascript/JQuery program into the Shopify pages using a ScriptTag
  • I embed an HTML form into the shop's Product page template and bind the Submit action to a function in my JS program
  • When my JS function gets called I submit a JQuery Ajax POST request directly to my external web application's API

My web app's API uses JSON Web Token (JWT) authentication, but I have not been able to figure out a way to use that from the JS environment without exposing the JWT in the Javascript environment

So I'm thinking about routing my Ajax POST request through a Shopify Application Proxy so that I can authenticate the request using Shopify HMAC authentication instead of the JWT auth.

I have never used Shopify application proxies. Does the above sound like a reasonable approach?

Thanks.

 

 

 

Pogodan
Shopify Expert
76 0 13

Lolo - I think you're somewhat confusing a handful of different concepts and overcomplicating things.

You have a script that you're injecting into the Shopify pages, and when that script gets triggered you want to send some form data to a 3rd party API. That's all straightforward.

Then additionally you want to authenticate to the 3rd party API somehow. Because you're sending this script to an untrusted browser, you don't want to send any information you wouldn't want exposed to the world. HMAC and application proxies are likely not going to help you - much simpler is to generate a token for the script, either one-time or otherwise depending on your requirements, and use that token to authenticate each request to the 3rd party API.

Pogodan | https://experts.shopify.com/pogodan-dev

Julian_Jorgense
Shopify Partner
4 0 0

Come on guys, you've heard of environment variables no? We can use those to pass in secret keys and passwords.

Dotenv is the most popular for this, and most servers also support environment variables.

JackO
Tourist
5 0 1

Julian - How would you use dotenv with code embedded in Shopify temapltes?