Unable to load My App in Shopify IFrame

[tinyemail]

Problem Description:

We implemented oAuth flow to install and connect Shopify store to our app (Tapp), to be able to expose our integration to public customers

we have to make it public. While reviewing its listing, we were asked to make our application available inside Shopify portal (loaded in IFrame) for this reason we had to implement

Load Bridge API (https://shopify.dev/apps/tools/app-bridge/getting-started).

The problem is when we implement this script it does not load our application in Shopify but instead does redirect.

Implementation:

1. Exposed an endpoint (https://api.tapp.com/shopify-app/init) this will get a Shopify request, validate it by hmac, and redirect to authorization URL

  Ex:

      https://thebasic01.myshopify.com/admin/oauth/authorize?redirect_uri=https://api.tapp.com/shopify-app...

  this URL will contain redirect_uri=https://api.tapp.com/shopify-app/install where to after user-approved installation he/she must be redirected.

2. Exposed an endpoint (https://api.tapp.com/shopify-app/install😞  this one will get Shopify's host parameter and load next javascript (Load Bridge implementation)

<script src="https://unpkg.com/@shopify/app-bridge@2"></script>
<script language="JavaScript">
var AppBridge = window['app-bridge'];
var createApp = AppBridge.createApp;
var actions = AppBridge.actions;
var Redirect = actions.Redirect;

var host = '[[${host}]]'
var apiKey = '[[${apiKey}]]';
var redirectUri = '[[${redirectUri}]]';
var permissionUrl = 'https://'+
                     host+
                    '/admin'+
                    '/oauth/authorize?client_id='+
                    apiKey+
                    '&scope=read_customers&redirect_uri='+
                    redirectUri;
var app = createApp({
    apiKey: apiKey,
    host: host
  });
  Redirect.create(app).dispatch(Redirect.Action.REMOTE, permissionUrl);

</script>

where

   redirectUri = is our UI application (https://app.tapp.com/sign-up)

   apiKey = our client id

   host = value received form Shopify

As result, the application will try to be loaded in shopify portal and after redirected to this URL

https://[tapp_host]/admin/oauth/authorize?client_id=222222222222222222222&scope=read_customers&redirect_uri=https://app.tapp.com/sign-up

and this error can see in console log

Updating Media

Please let me know if the Load Bridge is done properly or where we can find additional information to solve this issue

Thank you in advance,

Tinyemail.

[ElanaK]

👋  tinyemail,

I'm happy to help out with this issue!

I think you're referring to App Bridge, when you say "Load Bridge". I should clarify that App Bridge is not a requirement for an embedded app. It's just a library that allows you to more deeply integrate with Shopify. It might simplify things if you don't add App Bridge unless you need it. 

I'm 100% clear on what the error is. It doesn't look like your screen shot / media was properly attached. If you want to re-attach it, I can dig in further. 

Thanks!

Elana