Unable to load My App in Shopify IFrame

tinyemail
New Member
3 0 1
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
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:
  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.
 
 
Reply 1 (1)
ElanaK
Shopify Staff
11 2 1

  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