Application does not send shop/auth headers

Solved
Highlighted
Excursionist
13 1 0

Hi there, I' am creating a new public app (currently unlisted). I can install and verify it at first and get the proper permanent access_token from the store admin.

My problem is that subsequent api calls to my APP does not include any parameters or headers and I need to know shop_name to be able to identify the store and secure the api endpoints.

How can I get shop_name or access_token in my requests? 

Thanks in advance.

 

0 Likes
Highlighted

One way to do this, is to store the (hashed/salted) access token in a database and retrieve based on the shop name. The shop name can be stored in local storage or as a cookie at installation.

0 Likes
Highlighted
Excursionist
13 1 0

Hi there and thanks for your quick reply.

I am already storing the access_token in my db on store model with several other fields. The problem is that my app will be installed in different stores so when an endpoint gets called I need to know the shop name and/or some data to identify and then query my database, but also to secure my endpoints.

If I inspect subsequent headers sent to my app I get:

 

 

{
"connection": "upgrade",
"host": "MY_DOMAIN",
"accept-encoding": "gzip",
"cf-ipcountry": "AR",
"x-forwarded-for": "190.18.156.159",
"cf-ray": "5558c4ff28eef7aa-EZE",
"x-forwarded-proto": "https",
"cf-visitor": "{\"scheme\":\"https\"}",
"upgrade-insecure-requests": "1",
"user-agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36",
"sec-fetch-user": "?1",
"accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
"sec-fetch-site": "same-origin",
"sec-fetch-mode": "nested-navigate",
"referer": "https://MY_DOMAIN/shopify/callback?code=<code>&hmac=<code>&shop=SHOP_NAME&state=157910092722000&timestamp=1579100928",
"accept-language": "es-419,es;q=0.9,en-US;q=0.8,en;q=0.7",
"cookie": "state=157910092722000",
"cf-connecting-ip": "IP",
"cdn-loop": "cloudflare"
}

0 Likes
Highlighted

Are you storing the shop name in the user's local storage?

0 Likes
Highlighted
Excursionist
13 1 0

I don't but cookies can also be modified, so I'm not sure that would be the best solution.

0 Likes
Highlighted

That is a very valid concern, but check out http only cookies:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

 

They are mentioned in the Shopify documentation here:

https://help.shopify.com/en/api/embedded-apps/shop-origin

 

0 Likes
Highlighted
Excursionist
13 1 0

What do you think about using referer?

"referer": "https://MY_DOMAIN/shopify/callback?code=<code>&hmac=<code>&shop=SHOP_NAME&state=157910092722000&timestamp=1579100928",

I have all the info I need (it also can be modified) but I can always double check against the data already stored in DB.

0 Likes
Highlighted

I believe the issue with using the referrer is that the request will becoming from an embedded app, so the referring domain will be your own app's domain rather than the store's myshopify.com url.

0 Likes
Highlighted
Excursionist
13 1 0

That's true for the domain but I have the &shop=<shop_name> query parameter attached.

 

By the way, I think that the correct way of doing it is something like this:

https://www.npmjs.com/package/shopify-express-easdk-session

Is old and for EASDK, but it's basically what I need.

0 Likes
Highlighted
Excursionist
13 1 0

This is an accepted solution.

Basically I end up using cookie-session Express package to store and retrieve the data I need via session object on endpoints and creating a middleware to protect api routes.

Anyone interested check this:

https://www.npmjs.com/package/cookie-session

0 Likes