Shopify Remix React应用：如何添加Admin请求认证头并修复授权验证问题？

一、前端请求添加Shopify身份验证头 #

在Remix React组件中，你需要通过Shopify App Bridge获取会话令牌（session token），并将其添加到请求头中完成身份验证：

1. 先导入所需工具：

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

2. 修改fetch请求代码，添加身份验证头：

// 在组件内部获取App Bridge实例
const appBridge = useAppBridge();

// 发起请求时获取令牌并添加到请求头
fetch('/api/geocode', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    // 核心身份验证头，格式为 Bearer + 会话令牌
    'Authorization': `Bearer ${await getSessionToken(appBridge)}`,
    // 部分场景下需要额外添加X-Shopify-Access-Token头
    'X-Shopify-Access-Token': await getSessionToken(appBridge)
  },
  body: JSON.stringify({orders})
}).then(res => res.json()).then(data => {
  console.log('geocode data', data)
})

注意：确保你的组件包裹在ShopifyAppProvider内部，否则无法获取App Bridge实例。

二、后端api.geocode.js验证代码修复 #

后端无法通过authenticate.admin(request)验证，通常是配置或使用方式问题，按以下步骤修复：

1. 确认shopify.server.js的配置正确
   确保你已在shopify.server.js中正确初始化Shopify应用并导出authenticate实例：

// shopify.server.js
import { shopifyApp } from "@shopify/shopify-app-remix/server";
import { restResources } from "@shopify/shopify-api/rest/admin/2024-04";
// 引入你的会话存储（比如PrismaSessionStorage）
import { PrismaSessionStorage } from "@shopify/shopify-app-session-storage-prisma";
import prisma from "./prisma.server";

const shopify = shopifyApp({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET || "",
  scopes: process.env.SHOPIFY_APP_SCOPES?.split(",") || ["read_orders", "write_orders"], // 根据需求添加权限
  hostName: process.env.SHOPIFY_APP_URL?.replace(/https?:\/\//, "") || "",
  hostScheme: process.env.SHOPIFY_APP_URL?.split("://")[0] || "https",
  apiVersion: "2024-04",
  restResources,
  sessionStorage: new PrismaSessionStorage(prisma),
});

export const authenticate = shopify.authenticate;
export default shopify;

2. 修改api.geocode.js的action函数
   确保正确导入authenticate，并按顺序执行验证和请求体解析：

// api/geocode.js
import { authenticate } from "../shopify.server"; // 路径根据你的项目结构调整

export async function action({ request }) {
  // 先执行admin身份验证，验证不通过会自动返回401或重定向
  const { admin } = await authenticate.admin(request);
  
  // 验证通过后再解析请求体
  const data = await request.json();
  
  // 这里可以使用admin对象调用Shopify Admin API，例如查询订单
  // const orderDetails = await admin.rest.resources.Order.find({
  //   session: admin.session,
  //   id: data.orders[0].id
  // });
  
  return new Response(JSON.stringify({ success: true, receivedOrders: data.orders }), {
    headers: { "Content-Type": "application/json" }
  });
}

常见排查点 #

• 检查前端Network请求，确认Authorization头已正确发送
• 确认Shopify App后台的权限范围（scopes）包含你需要的权限（比如访问订单需read_orders）
• 检查环境变量SHOPIFY_API_KEY、SHOPIFY_API_SECRET、SHOPIFY_APP_URL是否配置正确
• 确保后端authenticate实例的导入路径正确

内容的提问来源于stack exchange，提问作者Kevin Chavez