Dynamically getting shop name

Highlighted
Shopify Partner
13 0 0

hello All,

I have developed an app and also intigrated to my store.

I am writing a shopify app to administer a store. Our app uses Embedded App SDK. The problem is that if a user has more than one shops, he cannot open two instances of our app to manage two different stores in the same browser window since I store the current app in user's session. Now these two tabs will show the same content.
Could you give me some direction about how can we implement our app so that user can open two browser tabs and each tab corresponds to the correct app?

One solution I have tried  is as follows-

 finding the src attribute of  iframe in which my application is embedded,but i am not able to get the solution as it is not giving me src of iframe.

I have tried a lot to do so.But still i dont reached to the solution.

Please Help if anybody knows the solution.

0 Likes
Highlighted
Shopify Expert
195 0 25

I've run into this issue and I have yet to implement my own solution so lets break this down.

We have an app that is hosted at ourapp.ourcompany.com. This domain is loaded inside an iframe as specked by the embed sdk. After we go through the authentication process we store the shop id in a cookie or session. This cookie or session is scoped to the ourapp.ourcompany.com domain and is used to authenticate the user as they make additional requests to our app. We might store the cookie like this in a Ruby app

session[:shopify] = 1

When that same user with the same browser makes another request through another store we get the original cookie or session we set in the first store and thus we think it is the first store.

In order to correct this we are going to need to scope our cookies. How can we do this? Well on the first request Shopify sends along our some parameters including the shops domain

Parameters: {"hmac"=>"378465983746489347659083", "shop"=>"astore.myshopify.com", "signature"=>"89347982734", "timestamp"=>"1433890899"}

With this info we can create a scoped cookie

store_domain = "astore.myshopify.com"
session[store_domain] = 1

On subsequent requests Shopify is not sending this data so this requires us to send it back to ourselves. For example, in our views we will need to append the shop domain to links.

<a href="/coolpage?shop_domain=ashop.myshopify.com">Visit Cool Page</a>

Any Javascript XHR requests you make will also need to send this data. 

Back in our app code we will need to read the correct cookie as we might have more than one. 

    Ex:   astore.myshopify.com=22    anotherstore.myshopify.com=11

You could preform this logic in your controller or a more appropriate place might be inside a piece of Rack middleware. 

I think that is a good start and would like to hear if anyone has a cleaner solution.

I hope this is as helpful to you as it is to me. 

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
Shopify Partner
13 0 0

@Ryan Thanks to reply for this post.

One thing I would like to tell u that if I use cookies for recognising my app users then it will be a danger of breach of security.

Because Cookies can be accessed and be changed easily.So it will not be safe for my app and again my app may  not recognize  correct store and there will be a mischief therefore I dont want to use cookies for authentications.

So If u have another solution ,Please let me know.

Thanks

0 Likes
Highlighted
Shopify Expert
195 0 25

@Lokranjan You are correct, cookies are not secure if you store them in plain text. However, if you hash your cookie data with a unique session id a user can't just alter the cookie as your web application will combat this.

What are you using on the server? Most modern web application frameworks have mechanisms for storing and receiving cookies in a secure manner. I use the Ruby on Rails framework and use cookies in most of my applications. You can read more about how Rails handles cookie and session security here: http://guides.rubyonrails.org/security.html#sessions

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
Shopify Partner
13 0 0

@Ryan Bennick 

Hey thanks for your help.Now My problem is solved.

But a problem is still getting me irritating but it is not about session ,it is about Cross origin.Let me explain it-

My app running fine on Mozzila firefox if i used headers for cross origin but it  throw  errors in console when i run it on other browsers like chrome,safari etc.

The error in console are as follows---

Image from origin 'https://www.csschopper.com'; has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://lok-sparx.myshopify.com'; is therefore not allowed access.
canvg.js:2321 Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

I am using php for developing app, I have used headers which  works fine on mozzila are as follows--

header('content-type:text/html;charset=utf-8');
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header("Access-Control-Allow-Credentials:  true");
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");

For Better understanding You can click on  the link as--

https://lok-sparx.myshopify.com/apps/tool/

0 Likes
Highlighted
Shopify Expert
195 0 25

Seesm like the images coming from https://www.csschopper.com should have the header

header("Access-Control-Allow-Origin: *");

or 

header("Access-Control-Allow-Origin: lok-sparx.myshopify.com");

 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
Shopify Partner
13 0 0

I have Used the code 

header("Access-Control-Allow-Origin: *");

or 

header("Access-Control-Allow-Origin: lok-sparx.myshopify.com");

 

It works well in Mozilla web browser,But not in Google chrome.

If You Have any idea please let me know, Why it is going to be heppened.

Thanks for your quick reply.

Lokranjan

0 Likes
Highlighted
Shopify Expert
195 0 25

Lokranjan,

Take a look at the attached screen shot. It is a view of your headers from chrome dev tools. I don't see that the access-control-allow-origin is set correctly.

When testing this make sure your cache is being cleared. 

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
Shopify Expert
4182 29 402

You're doing it wrong if you are experiencing CORS issues. Use an App Proxy for Ajax to your App instead, that way you have security built in courtesy of Shopify.

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

You was right Ryan Bennick.I did not used the correct header for cross domain.

But now i have changed the headers completely as follows in  the biggining of  my customizer.php file -

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials:  true");
header("Access-Control-Allow-Headers: X-Requested-With,Content-Type, Content-Range, Content-Disposition, Content-Description");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");

But still Not working in Google chrome and other browsers.

0 Likes