3

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

问题 #1-

我可以在开发商店上安装应用程序，计费工作完美，一旦我进入应用程序，API 功能运行良好，但我认为实际打开应用程序时遇到问题 - 很可能是我的嵌入式应用程序 SDK 的东西有问题和缺少重定向。

我目前的流程如下->

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

client.ngrok.io 是一个单独的客户端应用程序，使用 VueJS（无服务器端渲染）

  1. 用户在 server.ngrok.io/install 处输入应用

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

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

  4. /finish_auth 将临时令牌交换为永久令牌，将 perm 存储在我的数据库中，然后重定向到 /create_charge

  5. /create_charge 和 /activate_charge 完美运行，重定向到 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 转义应该在我的流程中发生的地方吗？我找到的最好的来源是这篇 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 调用 - 但我觉得这也会导致问题。

任何帮助将不胜感激 - 我真的很想解决这个问题并让一些应用程序运行，但我正在努力解决这两个问题。

4

1 回答 1

3

在第 2 步，使用“iframe 转义”脚本呈现一个空页面，而不是直接将用户重定向到 OAuth 页面。

于 2017-10-25T03:58:55.620 回答