构建 public Shopify 应用时出错：ngrok.io 拒绝连接

Question

我想要一个 public 而不是嵌入式 Shopify 应用程序。这个应用程序是一个销售渠道，它将产品从 Shopify 商店导入到我的电子商务网站。安装该应用程序的商店将在我的电子商务网站上列出他们的产品。

我已经构建了安装应用程序并将产品导入我的电子商务网站的初始步骤。

现在当用户点击应用程序图标时，我希望他被重定向到显示进口产品列表的以下页面：

https://my-commerce.com/products?storeurl=perisn-handcrafts.myshopify.com

如果以上链接return是如下产品列表，产品列表将显示在 Shopify 管理控制台中：

<table data-toggle="table">
    <thead>
        <tr>
            <th>UniqueThirdPartyProductCode</th>
            <th>Title</th>
            <th>Price</th>
            <th>ImageUrl</th>
            <th>CombinedCategoryViewModel</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>39-4477334519894</td>
            <td>Blue</td>
            <td>550.00</td>
            <td></td>
            <td>"todo"</td>
        </tr>

        /* more data... */

    </tbody>
</table>

但是如果我把table放在页面布局中，这会在结果中添加<html>、<head>和<body>标签，那么结果就不会显示...例如，如果我的应用 return 以下 HTML:

<html>
<head></head>
<body>
    <table data-toggle="table">
    /* 
     * content of the table 
     */
    </table>
</body>

我会得到这样的结果：

我不确定为什么会出现此错误：

ngrok.io refused to connect

而且我的应用似乎嵌入在 Shopify 管理控制台中，是否可以构建一个未嵌入的 public 应用？

Answer 1

更新答案

我的 Shopify 应用程序是一个销售渠道，Shopify 要求将所有销售渠道嵌入到管理控制台中 (I learnt this the hard way)

为了使应用嵌入 Shopify 管理控制台，我们需要从响应中删除 X-Frame-Options header。我的应用程序是在 ASP.NET MVC 中开发的，我已将以下代码添加到 Global.asax 以删除所述 header （请注意，删除 X-Frame-Options 会将我们的网站暴露给 clickjacking 攻击，所以删除 header 只是为了这个特定目的）：

Global.asax

protected void Application_PreSendRequestHeaders()
{
    var routeValues = HttpContext.Current.Request.RequestContext.RouteData.Values;
    if (routeValues.ContainsKey("controller"))
    {
        // make sure you only remove the header for a very specific use case
        if (string.Equals((string)routeValues["controller"], "EmbeddedShopifyController", StringComparison.InvariantCultureIgnoreCase))
        {
            Response.Headers.Remove("X-Frame-Options");
        }
    }
}

原回答

出现此错误的原因是我已将我的应用程序配置为嵌入。要检查您的应用是否已嵌入，请转到您的 Shopify 合作伙伴页面：

应用程序 -> 扩展程序 -> 嵌入式应用程序

点击管理嵌入式应用程序按钮，您可以在此处查看该应用程序是否配置为嵌入式。你可以Enable/Disable这个设置。

就我而言，我禁用了嵌入式应用程序配置，现在我的应用程序运行正常。

构建 public Shopify 应用时出错：ngrok.io 拒绝连接

Error building a public Shopify app: ngrok.io refused to connect

shopify

shopify-app

更新答案

原回答