A space to discuss online store customization, theme development, and Liquid templating.
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.
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
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.
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.
You should be using your private app credentials from a server side not from the client like jquery. You should get new password immediately.
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"
Host your code on AWS lambda
https://docs.shopify.com/api/uiintegrations/application-proxies
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.
Dear Shopify Experts (HunkyBill and Jason, I'm looking at you guys).
I have a Shopify web application that basically works as follows:
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.
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.
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.
Julian - How would you use dotenv with code embedded in Shopify temapltes?