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

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

Solved
Martin_Caum
Shopify Partner
40 3 22

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. 

Accepted Solution (1)

Accepted Solutions
Martin_Caum
Shopify Partner
40 3 22

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.

View solution in original post

Replies 3 (3)
AndyPicamaze
Explorer
41 1 15

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
Martin_Caum
Shopify Partner
40 3 22

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.

Martin_Caum
Shopify Partner
40 3 22

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.