AppLink

AppLink lets you embed your app directly inside the CommandCenter Admin, as well as customize many CommandCenter GUI elements outside of your app.

Setup

yarn add @spectrio/applink

Authenticate With OAuth

Since embedded applications are loaded inside an iframe, it is critical that the initial OAuth redirect to CommandCenter occurs at the parent level, escaped from the iframe. CommandCenter returns the X-Frame-Options=DENY header and prevents any CommandCenter pages from being loaded inside an iframe. AppLink provides an action that can be used to perform a redirect within the parent window.

This means that where the OAuth process would normally begin with redirecting the user to the authorization prompt, it should instead return a page containing a script which escapes the frame.

import createApp, { Redirect } from '@spectrio/applink'

const apiKey = 'API key from App Partner Dashboard';
const redirectUri = 'allowed redirect URI from App Partner Dashboard';

const permissionUrl = `https://${origin}/apps/oauth/authorize?client_id=${apiKey}&scope=read_devices,write_campaigns&redirect_uri=${redirectUri}`;

if (window.top === window.self) {
  // If the current window is the 'parent', change the URL by setting location.href
  window.location.href = permissionUrl;
} else {

  const app = createApp({
    apiKey: 'API key from App Partner Dashboard',
    origin: origin // eg: dsg.channelshd.com
  });

  // If the current window is the 'child', change the parent's URL with Shopify App Bridge's Redirect action
  Redirect.create(app).dispatch(Redirect.Action.Remote, permissionUrl)
}

Initialize AppLink in your app

import createApp from '@spectrio/applink';

const app = createApp({
  apiKey: 'API key from App Partner Dashboard',
  origin: origin // eg: dsg.channelshd.com
});