Development discussions around Shopify APIs
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?
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
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>
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 => ...)
User | RANK |
---|---|
16 | |
7 | |
5 | |
5 | |
5 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022