Shopify Next.js应用前后端通信与端点调用身份认证问题咨询

基于Shopify CLI生成的Next.js嵌入式应用，所有前后端通信的请求都必须携带Shopify颁发的会话令牌（Session Token），接口端需要验证这个令牌的合法性，不然会被默认的鉴权中间件拦截，这就是你两个接口报错的核心原因。

项目内置的@shopify/app-bridge-react和@shopify/app-bridge-utils包可以直接获取合法的会话令牌，请求时携带在请求头即可，示例代码如下：

import { useAppBridge } from "@shopify/app-bridge-react";
import { getSessionToken } from "@shopify/app-bridge-utils";

export default function Home() {
  const app = useAppBridge();

  // 封装带鉴权的请求方法
  const fetchWithAuth = async (url, options = {}) => {
    const token = await getSessionToken(app);
    return fetch(url, {
      ...options,
      headers: {
        ...options.headers,
        "Authorization": `Bearer ${token}`,
      },
    });
  };

  // 调用测试接口
  const testConnect = async () => {
    // 测试Next.js原生接口
    const res1 = await fetchWithAuth("/api/test");
    const data1 = await res1.json();
    console.log("/api/test返回：", data1);

    // 测试自定义Express接口
    const res2 = await fetchWithAuth("/test2");
    const data2 = await res2.json();
    console.log("/test2返回：", data2);
  };

  return <button onClick={testConnect}>测试接口连通性</button>;
}

1. pages/api/ 下的Next.js服务端接口 #

直接使用Shopify官方提供的鉴权中间件包裹接口逻辑即可，pages/api/test.js示例代码：

import { validateAuthenticatedSession } from "@shopify/shopify-api/adapters/nextjs";

export default validateAuthenticatedSession(async (req, res) => {
  // 走到这里已经完成身份校验，直接返回业务内容即可
  res.status(200).json({ success: true, message: "/api/test连通成功" });
});

如果你的接口是不需要鉴权的公共接口，可在shopify.server.js配置文件中把路径加入auth.excludePaths数组，跳过默认鉴权逻辑。

2. server/server.js 里的自定义Express接口 #

需要手动加会话令牌校验逻辑，示例代码如下：

// 复用项目中已初始化的shopify实例即可，不需要重复初始化
app.get("/test2", async (req, res) => {
  try {
    const authHeader = req.headers.authorization;
    if (!authHeader?.startsWith("Bearer ")) {
      return res.status(401).json({ error: "缺少授权凭证" });
    }
    // 提取并校验令牌
    const sessionToken = authHeader.split(" ")[1];
    const tokenPayload = await shopify.session.decodeSessionToken(sessionToken);
    
    // 校验通过，返回业务内容
    res.status(200).json({ 
      success: true, 
      message: "/test2连通成功",
      currentShop: tokenPayload.dest.replace("https://", "")
    });
  } catch (err) {
    res.status(401).json({ error: "授权凭证校验失败" });
  }
});

• 不要直接在浏览器地址栏输入接口地址测试，必须在嵌入Shopify后台的应用页面内发起请求，否则不会携带合法的会话令牌
• 确认shopify.server.js中的scopes、appUrl配置和Shopify合作伙伴后台的应用配置完全一致
• 接口请求方法要和定义的方法匹配，比如定义为GET接口就不要用POST方式请求

内容的提问来源于stack exchange，提问作者Ákos Paska