Php embedded app

Shopi
Visitor
2 0 0
Hi all
I want to develop an app which stores all orders my database and enables users to manage them via my Shopify app( from my server) . I can do it on my server without embedding my app I to Shopify but I have no idea how can I enable users to manage their orders from Shopify admin panel. Namely, I want to make an embedded app with php
I can not find a clear documentation
Replies 9 (9)

hassain
Shopify Staff (Retired)
624 104 187

Hi @Shopi ,

 

If you want to embed your app into the Shopify Admin, you need to utilize the Shopify App Bridge. You can read more about this here: https://shopify.dev/tools/app-bridge

 

If you decided to build your app in Ruby instead of PHP, you can also use the shopify_app library to build an embedded app (https://github.com/Shopify/shopify_app) or if you are using Node JS you can use the koa-shopify-auth middleware (https://github.com/Shopify/quilt/tree/master/packages/koa-shopify-auth) instead 

 

To learn more visit the Shopify Help Center or the Community Blog.

Martin_Caum
Shopify Partner
40 3 22

I am attempting to use the App Bridge to write my PHP app. I have followed the tutorial here: https://shopify.dev/tools/app-bridge/getting-started But the app is not embedding. Note that I am using Vanilla JS, not Node.js. My understanding is the script that it pieces together on the tutorial is to be placed in the HTML outputted on the initial page that is loaded after Oauth for installation (or when the store owner clicks on the app from Admin). The script seems to be running because it redirects just fine but at no point is the app embedded. The code I have at this point looks like this:

 

<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://myappdomain.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>My App</h1></center>
	</body>
</html>

 

The page gets redirected to `fooBar.html` just fine but not embedded. If I remove all of the scripts, this page gets loaded just fine but also not embedded. I do not think this doc is very straightforward and seems to be only geared to people using either Node and/or React. But these are not the only frameworks out there and not everyone uses frameworks. Any assistance in this would be greatly appreciated.

Iliyan_Fermino
Tourist
6 0 0

@Martin_Caum Hey did you find a way to use app bridge with php, I am currently having the same problem.

iain-campbell
Shopify Staff (Retired)
54 9 23

App Bridge is a standalone, client-side vanilla JS library. It works with any frontend or backend technology you’d like to use to build your app. Shopify’s backend APIs use industry standard Oauth 2.0. Any backend stack that can implement Oauth 2.0 be used to build a Shopify app. Many people use PHP to build Shopify apps 🙂

To embed your app in Shopify Admin, you’ll need to:

1. Authenticate your app with Shopify by implementing Oauth 2.0 on your app’s server https://shopify.dev/tutorials/authenticate-with-oauth

2. Authenticate your app frontend using App Bridge https://shopify.dev/tools/app-bridge/getting-started

 

To learn more visit the Shopify Help Center or the Community Blog.

Iliyan_Fermino
Tourist
6 0 0

@iain-campbell  Thanks for the reply, yeah I read up on the docs and made it work, I'm still new to shopify.

iain-campbell
Shopify Staff (Retired)
54 9 23

awesome, and welcome!

To learn more visit the Shopify Help Center or the Community Blog.

axelf
Excursionist
16 1 2

@iain-campbellwhy we have to authenticate twice? I have authenticated my app via Oauth and after that i could use the App Bridge without authentication.  I passed the api key and shop name and it is working.

Skylitech
Shopify Partner
9 0 5

Hi @axelf ,

Can you please provide me a code demo of how you have passed the API key and the Shop name cause it is not working for me.

Thanks

WOTIO
Shopify Partner
36 0 6

This article helped me: https://www.astralwebinc.com/upgrade-shopify-app-from-easdk-to-shopify-app-bridge-2/

WOTIO App: https://apps.shopify.com/automatic-account-invites