Shopifyembedded式应用程序authenticationstream程帮助SPA

我的Vue JS SPA + Express服务器出现以下问题:

问题#1-

我可以在开发商店安装应用程序,计费工作完美,一旦我进入应用程序,API函数工作得很好,但我认为它实际上是打开应用程序的问题 – 很可能是我的embedded式应用程序SDK的东西有问题,缺lessredirect。

我目前的stream程如下 – >

server.ngrok.io是一个Node / Express JS应用程序

client.ngrok.io是一个独立的客户端只有应用程序使用VueJS(没有服务器端渲染)

  1. 用户在server.ngrok.io/install上input应用程序

  2. /安装构buildauth url并将用户redirect到它

  3. Shopifyredirect回server.ngrok.io/finish_auth

  4. / finish_auth交换一个永久的临时令牌,将perm存储在我的数据库中,然后redirect到/ create_charge

  5. / create_charge和/ activate_charge完美工作,redirect到client.ngrok.io/

  6. client.ngrok.io会在新窗口中打开,而不是在iFrame中。

我相信在这里的某个地方,我需要像这里的文档中所述的那样逃避一个iFrame –

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. 

这是我“新窗口”开放问题的原因吗? 如果是这样,你能给我任何指示,这个iFrame逃生应该在我的stream程中发生? 我发现的最好的资料是2014年的这篇关于构buildembedded式Shopify应用程序的文章,但对我来说还是不太清楚。

问题2 –

一旦我进入embedded式应用程序(刷新通常工作),我在控制台中得到这个错误 –

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

该应用程序工作正常,我可以做我的API调用罚款 – 但我觉得这也造成了问题。

任何帮助将不胜感激 – 我真的想要得到这个,并得到一些应用程序,但我正在努力解决这两个问题。

在步骤2中,使用“iframe转义”脚本呈现空白页面,而不是直接将用户redirect到OAuth页面。