I’m new to Shopify app developing
I create new app
npm init @shopify/app@latest
install it to shopify store, and now try send token to backend
i try this code :
<code>import React, { useEffect, useState } from 'react';
import { getSessionToken } from '@shopify/app-bridge-utils';
import createApp from '@shopify/app-bridge';
import { Box, Card, Layout, Page, Text, BlockStack } from '@shopify/polaris';
export default function AdditionalPage() {
const [iframeSrc, setIframeSrc] = useState('');
useEffect(() => {
// Parse the query parameters
const params = new URLSearchParams(window.location.search);
const apiKey = params.get('apiKey');
const shopOrigin = params.get('shop');
if (!apiKey || !shopOrigin) {
console.error('Shopify app configuration is missing!');
return;
}
// Initialize the Shopify app bridge
const app = createApp({
apiKey: apiKey,
shopOrigin: shopOrigin,
forceRedirect: true,
});
// Get the session token
getSessionToken(app).then((token) => {
const urlWithToken = `https://myurl?session_token=${encodeURIComponent(token)}`;
setIframeSrc(urlWithToken);
}).catch(error => {
console.error('Failed to get session token:', error);
});
}, []);
return (
<Page>
<ui-title-bar title="Panel" />
<Layout>
<Layout.Section>
<Card>
<BlockStack gap="300">
<Text as="p" variant="bodyMd">
This is an example of how to include an iframe within your Shopify app.
</Text>
<iframe
src={iframeSrc}
style={{ width: '100%', height: '500px', border: 'none' }}
title="Dashboard"
loading="lazy"
/>
</BlockStack>
</Card>
</Layout.Section>
</Layout>
</Page>
);
}
function Code({ children }) {
return (
<Box
as="span"
padding="025"
paddingInlineStart="100"
paddingInlineEnd="100"
background="bg-surface-active"
borderWidth="025"
borderColor="border"
borderRadius="100"
>
<code>{children}</code>
</Box>
);
}
</code>
<code>import React, { useEffect, useState } from 'react';
import { getSessionToken } from '@shopify/app-bridge-utils';
import createApp from '@shopify/app-bridge';
import { Box, Card, Layout, Page, Text, BlockStack } from '@shopify/polaris';
export default function AdditionalPage() {
const [iframeSrc, setIframeSrc] = useState('');
useEffect(() => {
// Parse the query parameters
const params = new URLSearchParams(window.location.search);
const apiKey = params.get('apiKey');
const shopOrigin = params.get('shop');
if (!apiKey || !shopOrigin) {
console.error('Shopify app configuration is missing!');
return;
}
// Initialize the Shopify app bridge
const app = createApp({
apiKey: apiKey,
shopOrigin: shopOrigin,
forceRedirect: true,
});
// Get the session token
getSessionToken(app).then((token) => {
const urlWithToken = `https://myurl?session_token=${encodeURIComponent(token)}`;
setIframeSrc(urlWithToken);
}).catch(error => {
console.error('Failed to get session token:', error);
});
}, []);
return (
<Page>
<ui-title-bar title="Panel" />
<Layout>
<Layout.Section>
<Card>
<BlockStack gap="300">
<Text as="p" variant="bodyMd">
This is an example of how to include an iframe within your Shopify app.
</Text>
<iframe
src={iframeSrc}
style={{ width: '100%', height: '500px', border: 'none' }}
title="Dashboard"
loading="lazy"
/>
</BlockStack>
</Card>
</Layout.Section>
</Layout>
</Page>
);
}
function Code({ children }) {
return (
<Box
as="span"
padding="025"
paddingInlineStart="100"
paddingInlineEnd="100"
background="bg-surface-active"
borderWidth="025"
borderColor="border"
borderRadius="100"
>
<code>{children}</code>
</Box>
);
}
</code>
import React, { useEffect, useState } from 'react';
import { getSessionToken } from '@shopify/app-bridge-utils';
import createApp from '@shopify/app-bridge';
import { Box, Card, Layout, Page, Text, BlockStack } from '@shopify/polaris';
export default function AdditionalPage() {
const [iframeSrc, setIframeSrc] = useState('');
useEffect(() => {
// Parse the query parameters
const params = new URLSearchParams(window.location.search);
const apiKey = params.get('apiKey');
const shopOrigin = params.get('shop');
if (!apiKey || !shopOrigin) {
console.error('Shopify app configuration is missing!');
return;
}
// Initialize the Shopify app bridge
const app = createApp({
apiKey: apiKey,
shopOrigin: shopOrigin,
forceRedirect: true,
});
// Get the session token
getSessionToken(app).then((token) => {
const urlWithToken = `https://myurl?session_token=${encodeURIComponent(token)}`;
setIframeSrc(urlWithToken);
}).catch(error => {
console.error('Failed to get session token:', error);
});
}, []);
return (
<Page>
<ui-title-bar title="Panel" />
<Layout>
<Layout.Section>
<Card>
<BlockStack gap="300">
<Text as="p" variant="bodyMd">
This is an example of how to include an iframe within your Shopify app.
</Text>
<iframe
src={iframeSrc}
style={{ width: '100%', height: '500px', border: 'none' }}
title="Dashboard"
loading="lazy"
/>
</BlockStack>
</Card>
</Layout.Section>
</Layout>
</Page>
);
}
function Code({ children }) {
return (
<Box
as="span"
padding="025"
paddingInlineStart="100"
paddingInlineEnd="100"
background="bg-surface-active"
borderWidth="025"
borderColor="border"
borderRadius="100"
>
<code>{children}</code>
</Box>
);
}
but there is no token, how i should get it ? (or autorise backend – need token and shop domain)