Embedded apps. How to get the shopOrigin?

Solved
Appifiny
Shopify Partner
146 2 38

How do I access the myshopify top level hostname to set the shopOrigin value required to initialise the Embedded App JS library.

ShopifyApp.init({
    apiKey: '***',
    shopOrigin: 'https://?????????.myshopify.com',
    debug: true
});

If try to access it via JS using window.top.location.hostname it is not accessible becuase it is a different domain.

I cant rely on $_SERVER['HTTP_REFERER'] in php.

Try the best recent order app for Shopify free for 7 days: https://apps.shopify.com/recently
0 Likes
Appifiny
Shopify Partner
146 2 38

Ahhhh, I was thinking about it the wrong way.

I already have the shop domain from the oAuth authentication.

Try the best recent order app for Shopify free for 7 days: https://apps.shopify.com/recently
0 Likes
greg-gkr
Shopify Partner
19 0 4

The client still needs shopOrigin though, so how do you get it to initialize the App Bridge?

0 Likes
Henry_Tao
Shopify Staff
Shopify Staff
79 25 11

This is an accepted solution.

Hi @greg-gkr 

 

This section mentions about how to get and store shopOrigin https://help.shopify.com/en/api/embedded-apps/shop-origin. Essentially, you can access to `shop` in url query params. However, information in query params can be lost pretty easily during redirect. So, it is highly recommended that you store and retrieve shopOrigin by yourself. You can also use `shop` in url query params as a way to double check if merchant changes to different stores (by comparing query params and your cookies during auth).

 

I hope it helps.

 
0 Likes
policenauts1
Trailblazer
173 13 32

hi @Henry_Tao, I understand how to get shopOrigin initially when the merchant is installing the app / after OAuth, but if my app is a POS embedded app, how do I later retrieve the shopOrigin / associate that session with that merchant in order to initialize App Bridge? From the link, it reads: 

 

After you’ve got the shop parameter, you need to store it for the duration of the user session. It’s best to use the session mechanism of your preferred framework. Otherwise, you can store the parameter in an HTTP-only cookie.

What is the recommended way for POS embedded apps that will be public with multiple merchants? For example, I found this: https://github.com/osiset/laravel-shopify/issues/348

 

Where it appears they do something like: 

     var url = new URL(window.location);
     var shop = url.searchParams.get("shop");

Is there an equivalent for App Bridge?

0 Likes