Menu
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.
293
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:
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:
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).
example.org/some/redirect/uri?code={authorization_code}&hmac=da9d83c171400a41f8db91a950508985×tamp=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.
https://{shop}.myshopify.com/admin/oauth/access_token and it will have following fields:client_id - the API Key for the appclient_secret - the Shared Secret for the appcode - 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
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
