Private embedded shopify app

Question

I'm trying to build Embedded Private App and something I'm missing. As it is instructed here, I created App, got API key. Then a very simple page with content:

<head>
  <script src="https://cdn.shopify.com/s/assets/external/app.js"></script>
  <script type="text/javascript">
    ShopifyApp.init({
      apiKey: 'my-private-api-key',
      shopOrigin: 'https://my-dev-shop.myshopify.com',
      debug: true
    });
  </script>
</head>
<body>
Private app
</body>

And I'll I get by visiting this page is redirect to my shop with screen.

The page you're looking for can't be found.
Try a search instead.

Redirect URL is

https://my-dev-shop.myshopify.com/admin/apps/my-private-api-key/

What I am missing? It's my first experience with shopify at all, so maybe I missing all understanding how EASDK works. I tested it from localhost and from my domain with SSL. Thank you for any tips.

I can tell you a solution if you can tell me the purpose of the app? Are you doing it for a client or you plan to release it in the market? — HymnZzy

Murat Erkenov Murat Erkenov · Accepted Answer · 2015-11-24T20:08:34

I would like to pay more attention to Embedded Apps and tell more about my experience and problems I met before I managed to create and install it as a private app.

Embedded Apps allows to modify look and feel of admin part of Shopify. Actually there is no special app type called "Embedded Apps" in Shopify. App creator can just enable "Embedded App" SDK when he creates regular "public" app in his Partners account. So if this feature is enabled - the app can use Embedded App SDK in store's admin.

My problem was to realize how to install Embedded App to the store and how to make it private i.e available to stores without publishing to App Store. The answer is:

we need create a regular public app with "Embedded App SDK" enabled (using partners account)
we do not need to publish it to store (so no-one excepting us will know about it)
we need to install it in store's admin.

Last action means that we need to do everything as it is described for regular public Shopify Apps i.e allow the app to access the store using OAuth handshake. The procedure is described here.

Let me repeat some points:

Send request like this https://{shop}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope={scopes}&redirect_uri={redirect_uri}. Replace {strings in curly braces} with appropriate values. Note {redirect_uri} must be one of Redirection URL specified in app settings, {scopes} should be replaced with one of allowed scopes from here (I used the first scope, it was not important for me, I did not want to modify data, I just wanted t use Embedded App SDK UI methods).
In result it will send you to example.org/some/redirect/uri?code={authorization_code}&hmac=da9d83c171400a41f8db91a950508985&timestamp=1409617544&state={nonce}&shop={hostname} (example.org/some/redirect/uri is a redirect_url pointed in first request) and expect that a this query is properly handled on your side.
"Properly handled" means that POST request will be sent to https://{shop}.myshopify.com/admin/oauth/access_token and it will have following fields:

client_id - the API Key for the app
client_secret - the Shared Secret for the app
code - the {authorization_code} came with query.

I did not need any backend stuff so I just created simple html form with all necessary fields and submitted it (method=POST, action=https://{shop}.myshopify.com/admin/oauth/access_token) and received a json with access token.

After it in admin of the store in Apps section you must see link to added app. After clicking on it here it will try to open load iframe with src equal to Application URL of your app. This URL must point to your app i.e a html where you can do what you want. Normally people want to use SDK methods. Please note possible http/https issues

Private embedded shopify app

3 Answers