Authorization​

When an app needs to access merchant store data, it must first obtain authorization from the merchant. Because embedded apps run within an iframe, traditional server-side redirects will cause the authorization page to load inside the nested frame. This often results in rendering or loading issues.

Therefore, it is strongly recommended to use the OAuth method provided by App Bridge to initiate the authorization request on the frontend. This method opens the authorization page in the parent window, avoiding iframe nesting problems.

Usage​

When a merchant installs the app, run the following code to redirect the merchant to the SHOPLINE authorization page:

import Client, { Oauth, shared } from '@shoplineos/app-bridge';
const appKey = 'your-app-key', // appKey
// Initialize App Bridge.
const app = Client.createApp({
  appKey,
  host: shared.getHost(),
});
// Initiate an authorization request.
Oauth.create(app).invoke({
  scope: 'read_products,read_orders', // Requested permissions
  appKey,
  redirectUri: 'https://your-app.com/callback', // Authorization callback URL
});

Parameters​

Authorization flow​

1. App installation: The merchant installs the app from the SHOPLINE App Store.
2. Redirect to the app: SHOPLINE accesses the configured app URL, appending parameters like handle, timestamp, appKey, and sign.
3. Authorization check: The app checks if the current store has completed authorization.
4. Initiating authorization: If authorization is required, call the Oauth.create(app).invoke() method.
5. Confirming authorization: SHOPLINE opens the authorization page in the parent window for the merchant to confirm.
6. Callback to the app: Upon successful authorization, SHOPLINE redirects to the configured redirectUri.