AppBridgeError INVALID_CONFIG：必须提供主机

Question

我在尝试完成官方 shopify 时遇到错误 tutorial about developing shopify app。

我一直在逐步按照教程进行操作，但即便如此运行还是遇到了抛出错误的问题，即我的配置文件无效，因为它不包含主机。

我的_app.js文件代码如下：

import React from "react";
import App from "next/app";
import Head from "next/head";
import { AppProvider, Frame } from "@shopify/polaris";
import "@shopify/polaris/dist/styles.css";
import translations from "@shopify/polaris/locales/en.json";
import { Provider } from "@shopify/app-bridge-react";
import ClientRouter from "../components/ClientRouter";

class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;
    const config = {
      apiKey: API_KEY,
      shopOrigin,
      forceRedirect: true,
    };
    console.log(config);
    return (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
          <ClientRouter />
          <AppProvider i18n={translations}>
            <Frame>
              <Component {...pageProps} />
            </Frame>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}
MyApp.getInitialProps = async ({ ctx }) => {
  return {
    shopOrigin: ctx.query.shop,
  };
};
export default MyApp;

配置文件的控制台提供了正确的 shopOrigin。如有帮助将不胜感激

Answer 1

所以我能够通过更改应用程序桥的版本来解决问题我正在使用我认为有错误或无法配置的最新版本，

"@shopify/app-bridge-react": "^2.0.2" [NOT WORKING]
   "@shopify/app-bridge-react": "^1.30.0"   [CURRENT WORKING]

Answer 2

目前需要使用 App Bridge 版本 2，正如 App 审核团队指出的那样：

Ensure that your app is on Shopify App Bridge version 2.0 to embed your app within merchants' admin...

所以，我所做的是将商店名称（例如：toys.myshopify.com）保存在我的数据库中，编码为 base64 并像 "host" 查询参数一样发送是必需的。

const host = Buffer.from(`${shop}/admin`).toString('base64');
ctx.redirect(`${process.env.HOST}?shop=${shop}&host=${host}`);

请注意我是如何在商店值后添加“/admin”的，这是重要的一步，否则您会收到 404 错误（找不到页面）。

AppBridgeError INVALID_CONFIG：必须提供主机

AppBridgeError INVALID_CONFIG: host must be provided

shopify-app

shopify-api-node