Ad

Error Building A Public Shopify App: Ngrok.io Refused To Connect

- 1 answer

I want a public and NOT embedded Shopify app. This app is a sales channel, which imports products from Shopify stores to my e-commerce website. The stores which install the app will have their products listed on my e-commerce website.


I have built the initial steps to install the app and import the products into my e-commerce website.

Now when user clicks on the app icon, I want him to be redirected to the following page which displays the list of imported product:

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

If the above links returns a list of product as below, the product list will be displayed within the Shopify Admin cosole:

<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>

enter image description here

But if I put the table inside the page layout, which adds <html>, <head> and <body> tag to the result, then the result is not displayed... for example if my app return the following HTML:

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

I would get this result:

enter image description here

I am not sure why I am getting this error:

ngrok.io refused to connect

Also it seems like my app is embedded within Shopify admin console, is it possible to build a public app which is not embedded?

Ad

Answer

Updated Answer

My Shopify app is a Sales Channel and Shopify requires all Sales Channels to be embedded within the admin console (I learnt this the hard way)

In order to make the app embedded inside Shopify admin console we need to remove X-Frame-Options header from response. My application which is developed in ASP.NET MVC and I have added the following code to Global.asax to remove the said header (note that removing X-Frame-Options expose our website to clickjacking attack, so remove the header just for this specific purpose):

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");
        }
    }
}

Original answer

The reason for this error was that I had configured my app to be embedded. To check if your app is embedded or not, go to your Shopify Partners page:

Apps -> Extensions -> Embedded app

enter image description here

Click on Manage embedded app button, and here you can see if the app is configured to be embedded or not. You can Enable/Disable this setting.

In my case, I disabled the embedded app configuration and my app now works fine.

Ad
source: stackoverflow.com
Ad