CODEZUKI

A blog about coding.

An Embedded Shopify App With Node.js

When I decided to scratch my own itch and build a Shopify App, I quickly realised that unless you are using Ruby there is a shortage of instruction on how to do so. In truth the Shopify API documentation is pretty good but necessarily generic, so I embarked upon my new project keen to not only build my app, but also to help the next guy too.

The source code for a bare-bones Node.js app which authenticates using OAuth 2.0 is shared here on GitHub. This is just enough to get you started through OAuth authentication to rendering a “Hello World” view in the Shopify admin panel.

Prerequisites

Before proceeding you first need to follow the Shopify developer’s Getting Started guide.

Once you have an app icon appearing in the “Apps” panel of your account you are ready to continue.

How it works

The OAuth process is a little more involved for an Embedded App. This is because Shopify prevents admin URLs from being loaded inside an iframe, so the intial request must escape the iframe to initiate the process.

Here is a slightly simplified version of events:

  1. The user clicks on your app icon in their account’s App page
  2. A request is made inside the iframe to your app which is hosted at the URL you defined when you created the app, for example: http://localhost:3000
  3. This requests arrives at “http://localhost:3000/
  4. If there is already an Access Token on your current session, redirect to “/render_app”
  5. If there is no current Access Token then redirect to “/auth_app”
  6. “/auth_app” redirects to “/escape_iframe” which will render a view which performs a JavaScript top window location change to “/auth_code”
  7. “/auth_code” performs the first OAuth request to Shopify, providing “/auth_token” as the redirect URL
  8. “/auth_token” receives the Access Token, saves it to the session and redirects to “/render_app”
  9. “/render_app” renders your main app view
  10. You may now use this Access Token to perform further API requests as required by your application.

Mixed content

When developing your app locally you may be mixing secure and insecure content, therefore your browser will block these requests. You may temporarily disable protection on the page to allow your requests to proceed.

I hope this helps you get started with your Shopify App.

Comments