为SPA

时间:2017-10-19 17:42:35

标签: javascript node.js vue.js shopify shopify-app

我的Vue JS SPA + Express服务器存在以下问题:

问题#1 -

我可以在开发商店安装应用程序,计费工作完美,一旦我进入应用程序,API功能正常运行但我认为它实际上有问题打开应用程序 - 我的嵌入式应用程序很可能出错了SDK内容和缺少重定向。

我目前的流程如下 - >

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

client.ngrok.io是使用VueJS的单独客户端专用应用程序(无服务器端呈现)

  1. 用户在server.ngrok.io/install

  2. 输入app
  3. / install构建auth url并将用户重定向到它

  4. Shopify重定向回server.ngrok.io/finish_auth

  5. / finish_auth为永久性令牌交换临时令牌,在我的数据库中存储烫发,然后重定向到/ create_charge

  6. / create_charge和/ activate_charge工作正常,重定向到client.ngrok.io /

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

  8. 我相信在这里的某个地方我需要逃离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逃逸应该在我的流程中发生什么的指示?我发现的最佳来源是2014年关于构建嵌入式Shopify应用程序的文章 - http://blog.codezuki.com/blog/2014/02/10/shopify-nodejs/,但对我来说仍然不太清楚。

    问题#2 -

    一旦我进入嵌入式应用程序(刷新通常有效),我在控制台中出现此错误 -

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

    该应用程序运行正常,我可以正常运行我的API调用 - 但我觉得这也会导致问题。

    任何帮助都会受到赞赏 - 我真的希望得到这个并让一些应用程序继续运行,但我正在努力解决这两个问题。

1 个答案:

答案 0 :(得分:3)

在第2步,使用“iframe escaping”脚本呈现空白页面,而不是直接将用户重定向到OAuth页面。