How to use AppBridge's getSessionToken using CDN

yukiteststore_A
Shopify Partner
2 0 0

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?

Replies 2 (2)
alanthai
Shopify Staff
9 0 1

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
Shopify Partner
2 0 0

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>