I am attempting to write an embedded app but am having trouble getting it to actually embed. I followed the App Bridge tutorial and ended up with this set of code:
<html>
<head>
<title>Affiliate Sales</title>
<script src="https://unpkg.com/@shopify/app-bridge"></script>
<script>
var AppBridge = window['app-bridge'];
var createApp = AppBridge.createApp;
var actions = AppBridge.actions;
var Redirect = actions.Redirect;
var urlParams = new URLSearchParams(window.location.search);
var shopOrigin = urlParams.get('shop');
var apiKey = 'XXX';
var redirectUri = 'https://myapurl.com/fooBar.html';
var permissionUrl = 'https://' +
shopOrigin +
'/admin' +
'/oauth/authorize?client_id=' +
apiKey +
'&scope=read_content,write_content,read_themes,write_themes,read_products,write_products,read_customers,write_customers,read_orders,write_orders,read_script_tags,write_script_tags,read_fulfillments,write_fulfillments,read_shipping,write_shipping&redirect_uri=' +
redirectUri;
// If the current window is the 'parent', change the URL by setting location.href
if (window.top == window.self) {
window.location.assign(permissionUrl);
// If the current window is the 'child', change the parent's URL with Shopify App Bridge's Redirect action
} else {
var app = createApp({
apiKey: apiKey,
shopOrigin: shopOrigin
});
Redirect.create(app).dispatch(Redirect.Action.REMOTE, permissionUrl);
}
</script>
</head>
<body>
<center><h1>Affiliate Sales</h1></center>
</body>
</html>
The Oauth seems to go okay (as well as the original app install). And it redirects to fooBar.html but does not embed. It redirects the window as a whole. I feel like the documentation is rather lacking on exactly how to get this setup or maybe I am just missing something. Any help in this would be greatly appreciated. If it matters/helps I am using a custom build PHP app for this.
Solved! Go to the solution
Hi Martin,
If you look at the example app from Shopify you'll see these lines of code:
const config = {
apiKey: ...
shopOrigin: get from cookies
forceRedirect: true
};
...
<Provider config={config}>
...
forceRedirect: true redirects the browser after successful oAuth to xxx.myshopify.com/admin/apps/${config.apiKey}
I believe you should to the same here or use the App Store Bridge.
Hey Andy,
Thanks for the reply. I am attempting to use the App Bridge and followed this tutorial: https://shopify.dev/tools/app-bridge/getting-started The only example app mention I found is in the Embedded SDK which is deprecated and the example link returns a 404. As far as the redirect, it is redirecting but not inside an iFrame to make it embedded.
This is an accepted solution.
I was able to solve this by tearing the app down and rebuilding it as minimal as possible. For reference if anyone else is having similar issues I have a light weight PHP example here: https://github.com/XenithTech/php-shopify-app-skeleton With this simple Oauth handshake and having the embedded app extension set properly, the contents of the final redirection URL should show up as an embedded app.
User | Count |
---|---|
13 | |
12 | |
7 | |
6 | |
5 |