javascript-SPA的Shopify嵌入式应用程序身份验证流程帮助

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

问题1-

我可以在开发商店中安装该应用程序,计费工作正常,一旦进入该应用程序,API函数就可以正常工作,但是我认为在实际打开该应用程序时遇到了一些问题-最有可能是我的Embedded App SDK出现了问题,缺少重定向.

我当前的流程如下->

server.ngrok.io是Node / Express JS应用

client.ngrok.io是使用VueJS的单独客户端唯一应用程序(无服务器端渲染)

>用户通过server.ngrok.io/install输入应用程序
> / install生成身份验证URL并将用户重定向到它
> Shopify重定向回server.ngrok.io/finish_auth
> / finish_auth将临时令牌交换为永久令牌,将烫发存储在我的数据库中,然后重定向到/ create_charge
> / create_charge和/ activate_charge可以正常工作,重定向到client.ngrok.io/
> 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转义的指针吗？我发现的最佳信息是有关构建嵌入式Shopify应用程序的2014年这篇文章-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调用-但我感觉这也引起了问题.

任何帮助将不胜感激-我真的很想把它弄下来,让一些应用程序运行,但我在这两个问题上苦苦挣扎.

解决方法:

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

标签：shopify,node-js,vue-js,javascript,shopify-app
来源： https://codeday.me/bug/20191110/2015563.html