Embedded App SDK Redirects

New Member
5 0 0

Hello,

We have been using the Shopify API with the standard php API library and standard oAuth for a while now with no problems. For our latest app we are trying to fully implement it using the Embedded App SDK - from what I read of the documentation this includes changing the Header redirects to javascript redirects for the parent frame, We implemented this and it works fine. We have also had success implementing all the app.js initialisation and usage of dialogs etc within the app.

The problem for us lies with when you click in 'Admin -> Apps' and then click on our application name - at this point you are directed to:

 https://xxxxxxxx.myshopify.com/admin/apps/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/dashboard ;

At this point as the browser loads it loads our dashboard not inside an iframe environment but as a whole page. (Repeat: not embedded.) Immediately after this the page loads again and takes us to:

https://xxxxxxxxx.myshopify.com/admin/apps/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/dashboard?shop=devfinal....

This is now showing our dashboard embedded as an iframe correctly and from then on, navigating to different app pages etc all happens within the embedded iframe nicely and as it should. Obviously this means the oAuth implementation is working correctly and such but I do not understand why when we click through to the app initially it does this quick page load of the dashboard and then re-directs to being properly displayed in the iframe.

Does anyone have any ideas?

The code we use for the JS re-direct is as it is on the documentation and it goes to the usual shopify oAuth URL for verification.

Thanks,

Jed.

0 Likes
Excursionist
70 0 14

At this point as the browser loads it loads our dashboard not inside an iframe environment but as a whole page.

What's the URL of the un-framed page?  There must be a redirect happening from https://xxxxxxxx.myshopify.com/admin/apps/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/dashboard to the external page right?  Can you see it with something like Live HTTP Headers turned on in your browser?  If so I'd try and track it down.

Also I know one thing that was helpful when doing my first embedded app was to create a development app using Shopify's embedded-app-example and once I had that working, I played around with the code from that example.

Product Customizer - Creating extremely customizable products within Shopify is no longer a hassle! BlogFeeder - Automatically pull updates from any RSS feed into your Shopify blog Happy Ending - Personalize your thank you page
0 Likes
New Member
5 0 0

Hi Justin,

Thanks for the prompt response.. I looked through the source of the embedded-app-example but we don't use Ruby for our Shopify Apps so it was not fully relevant to use as a starting point especially as we are adapting this into an existing framework we have used for previous apps (making it slightly trickier!)

Here is a Live HTTP Header dump of the redirects from the point I click on the app and to when it ends up inside its iframe at the end of all the redirects.

http://pastiebin.com/541b06f010447

Hope this sheds some light.

Jed.

0 Likes
Excursionist
70 0 14

Ha, apologies, shouldn't assume everyone is using Rails.  So I just tried out my app (first logging out and deleting all cookies to clear any sessions) and actually the same thing happens with me: I see the unframed "login" page (blank) for less than a second, before being redirected.  It happens so quickly, and only if my session is cleared, that I guess I totally forgot.

So, either this is the way it's done, or we're both doing it wrong :)

Product Customizer - Creating extremely customizable products within Shopify is no longer a hassle! BlogFeeder - Automatically pull updates from any RSS feed into your Shopify blog Happy Ending - Personalize your thank you page
0 Likes
New Member
5 0 0

Hi Justin,

Oh great thanks for checking that yes it seems it could be the way its meant to be but to us it does not sound or look good enough for a smooth professional application to have it suddenly load up another page and then ping itself to being embedded? I wonder if anyone else will comment with their experiences on this. I did have a discussion via email with one of the Shopify developers who from what I initially told him (pretty much my original post here) said they could not tell what was happening without viewing the code and to post in here.. so they might think it should also not be happening?

I will wait on this and see what other comments arise.

Thanks mate,

Jed.

0 Likes
Excursionist
70 0 14

sounds good, I'll be curious to see what other folks have to say as well

Product Customizer - Creating extremely customizable products within Shopify is no longer a hassle! BlogFeeder - Automatically pull updates from any RSS feed into your Shopify blog Happy Ending - Personalize your thank you page
0 Likes
Highlighted
Shopify Staff
Shopify Staff
582 0 45

The redirect needs to happen as part of the OAuth flow as per the docs here. In particular this bit:

Since the application is loaded inside an iframe it is critical that the initial OAuth request redirect escapes the iframe to make the requests.

0 Likes
New Member
5 0 0

Hi Chris,

Ok thanks for clearing this up - slightly annoying for development but hopefully clients won't mind the brief flash change. If anyone else has any input past this though please reply!

Thanks,

Jed.

0 Likes
Shopify Partner
14 0 0

Sorry to jump in but could the OAuth flow be causing a re-direct to the front end of our app,

the bit for the general public to view keeps getting re-directed to store admin login, is there a fix or a way around this...
app url:
https://i-vu.herokuapp.com/?shop=storm10.myshopify.com

thanks

Duncan

0 Likes
Shopify Partner
3 0 0
Hi Duncan, Sounds like the issue could be to do with your oauth redirect link using header and not a js redirect per the documentation ? If you record your whole session using the browser plug in live http headers and pastebin it somewhere it may shed light on the cause.
0 Likes