3
votes

Having the following problems with my Vue JS SPA + Express server:

Problem #1-

I can install the app on a dev store, the billing works perfectly, the API functions are working great once I get into the app but I think it is having issues actually opening the app - most likely something wrong with my Embedded App SDK stuff and a missing redirect.

My current flow is as follows ->

server.ngrok.io is a Node/Express JS app

client.ngrok.io is a seperate client side only app using VueJS (no server side rendering)

  1. User enters app at server.ngrok.io/install

  2. /install builds auth url and redirects user to it

  3. Shopify redirects back to server.ngrok.io/finish_auth

  4. /finish_auth exchanges temp token for a permanent one, stores perm in my db, then redirects to /create_charge

  5. /create_charge and /activate_charge work perfectly, redirect to client.ngrok.io/

  6. client.ngrok.io opens in a NEW window, not in the iFrame.

I believe somewhere in here I need to be escaping an iFrame as outlined in the documentation here -

Since the application is loaded inside an iframe it is critical that the initial OAuth request redirect escapes the iframe to make the requests. Shopify returns the
X-Frame-Options=DENY
header and prevents any Shopify admin pages from being loaded inside an iframe.

Is this the cause of my "new window" opening issue? If so, can you give me any pointers as to where this iFrame escape should take place in my flow? The best source I found was this 2014 article on building an embedded Shopify app - http://blog.codezuki.com/blog/2014/02/10/shopify-nodejs/ but it still is quite unclear for me.

Problem #2 -

Once I do get into the embedded app (refreshing usually works) I get this error in the console -

Shopify.AppMessenger received message null from unexpected origin https://client.ngrok.io ; expecting https://server.ngrok.io or subdomain thereof

The app works fine, I can do my API calls fine - but I feel like this is causing problems as well.

Any help would be appreciated - I really want to get this down and get some apps going but I'm struggling with these two issues.

1

1 Answers

3
votes

At step 2, render an empty page with "iframe escaping" script, instead of directly redirect user to the OAuth page.