Development discussions around Shopify APIs
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
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
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.
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 | RANK |
---|---|
6 | |
5 | |
5 | |
5 | |
4 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022