Shopify APIs and SDKs

Martin_Caum · ‎08-09-2020

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.

Martin_Caum · ‎08-09-2020

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

AndyPicamaze · ‎08-09-2020

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 · ‎08-09-2020

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 · ‎08-09-2020

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.

Shopify APIs and SDKs

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

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links