Creating new embedded app but can't get app to embed

Solved
Highlighted
Shopify Partner
40 3 15

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. 

0 Likes
Highlighted
Excursionist
38 1 8

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.

https://apps.shopify.com/picamaze
Animated watermarks for product images and ads
0 Likes
Highlighted
Shopify Partner
40 3 15

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.

0 Likes
Highlighted
Shopify Partner
40 3 15

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.

0 Likes