Shopify APIs and SDKs

yukiteststore_A · ‎11-02-2021

In the page explaining how to get started with AppBridge, we have examples of using AppBridge form CDN.

https://shopify.dev/apps/tools/app-bridge/getting-started

That is how we are using AppBridge.

However, in the page that describes how to use getSessionToken, there is no example on usage with CDN hosted AppBridge.
https://shopify.dev/apps/auth/session-tokens/axios

Could you give us examples on how to use getSessionToken from CDN hosted AppBridge?

alanthai · ‎11-03-2021

All of our CDN packages will be globally namespaced under their package name. In this case you can access them like so:

const getSessionToken = window['app-bridge-utils'].getSessionToken;

The rest of the example should be the same

yukiteststore_A · ‎11-12-2021

This must not be correct. I am getting

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getSessionToken')

The code I have is as follows, and I am getting the error when calling

const getSessionToken = window['app-bridge-utils'].getSessionToken;

start_session.html

<!doctype html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Get session token</title>
     <script src="https://unpkg.com/@shopify/app-bridge@2"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js" integrity="sha512-u9akINsQsAkG9xjc1cnGF4zw5TFDwkxuc9vUp5dltDWYCSmyd0meygbvgXrlc/z7/o4a19Fb5V0OUE58J7dcyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script>
         const server = "<ngrok server>";
         const clientId = "<shopify client id>";
         const appUrl = "<app url>";
         
         const parseSearchParams = () => {
             const params = new URL(window.location.href).searchParams;
             let shop = null;
             if (params.get('shop')) {
                 shop = params.get('shop').trim();
             }
             let host;
             if (params.get('host')) {
                 host = params.get('host').trim();
             }
             return {
                 shop,
                 host
             };
         };
         
         const initializeAppBridge = async ({ host }) => {
            const instance = axios.create();
            const AppBridge = window['app-bridge'];
            const createApp = AppBridge.createApp;
            const app = createApp({
                apiKey: clientId,
                host
            });

            const getSessionToken = window['app-bridge-utils'].getSessionToken;
            const token = await getSessionToken(app);

            console.log('token: ', token);

            // Intercept all requests on this Axios instance
            instance.interceptors.request.use(async(config) => {
                config.headers['Authorization'] = `Bearer ${token}`;
                console.log(JSON.stringify(headers));
                return config;
             });
         };
         
         const params = parseSearchParams();
         initializeAppBridge({ host: params.host }).then(() => axios.get(appUrl));
     </script>
 </head>

JakeStrang1 · ‎03-05-2022

Found the solution! Actually, someone else found it. In this thread: https://community.shopify.com/c/shopify-apis-and-sdks/getting-app-bridge-session-token-using-plain-j...

It's in a different file:

<script src="https://unpkg.com/@shopify/app-bridge-utils@2"></script>
window['app-bridge-utils'].getSessionToken(app).then(token => ...)

KountTPA · ‎03-24-2023

app-bridge-utils looks like it has been deprecated because the utils moved into a utilities directory in app-bridge.

Can we get an example of how to use getSessionToken or authenticatedFetch from that sub-directory through the CDN-hosted approach? It does not seem as simple as

const authenticatedFetch = window["app-bridge"].utilities.authenticatedFetch

Shopify APIs and SDKs

How to use AppBridge's getSessionToken using CDN

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links