Authenticating the Admin UI with my external service

Much like a question that has gone unanswered in the community site, I’d like to be able to:

  • Offer a Shopify app that includes some UI extensions and web pixels
  • Use some of the info from those Web Pixels to send to my external service
  • This external service however would need to be authenticated with beforehand, preferably by
    • redirecting the store owner from the Shopify Admin UI to my site,
    • from which it would return with an access token of sorts,
    • to be stored in my app back-end, for future requests to my service.

Is this possible at all? What would be the right integration pattern for this?

In Shopify lingo, your external service is a Shopify app.

What you’re describing is an OAuth flow, which Shopify already uses to securely share the merchant’s access token for interacting with their store on their behalf through the Admin API.

In the past, OAuth was the only authentication mechanism offered. But times have changed.

Now, Shopify manages OAuth for your apps. All you need to do is define your app’s home URL.

By default, Shopify apps are loaded in an embedded iframe (aka AppBridge). The AppBridge JavaScript gives you a session token which is a short lived representation of the current merchant’s session.

Using that you can verify they are in fact logged in to your app, and you can add authentication and authorization to your API routes.

Now I know you’re asking to redirect to an external site, not embedding in Shopify’s admin. If you do want to go that route, you have to explicitly disable embedding in your app’s definition, and skip out on using managed OAuth.

You can still implement the OAuth on your own, but you’ll need to do it on your own. Additionally, if you plan on publishing this app to the marketplace, it will be more difficult.

Thanks.

Would the mechanism you’re proposing allow us to make merchant-authenticated requests to our services outside of the Admin UI (i.e. on the store site)?

In essence, we want to sign (info based on) the web pixel events (generated by shoppers) that we want to share with our service, as coming from the merchant’s store (and not some other store).