Shopify PHP/React开发环境下内部API调用问题求助

核心问题分析 #

你遇到的重定向问题，本质是Shopify的OAuth验证机制在起作用——你的内部API路由可能被Shopify的验证中间件拦截，认为请求未通过授权，所以跳转到安装流程。host参数是Shopify验证请求合法性的必要参数之一，但仅传host不足以绕过授权校验，得配合正确的身份凭证。

具体解决方案 #

1. 给内部API路由跳过OAuth验证 #

在你的PHP后端（不管是用Laravel/Symfony还是自定义框架），给内部API接口单独设置白名单，排除全局的Shopify OAuth验证。以Laravel为例：

// 在Shopify OAuth验证中间件中
public function handle($request, Closure $next)
{
    // 匹配内部API的路由前缀，比如/api/internal/*
    if ($request->is('api/internal/*')) {
        return $next($request);
    }
    // 其他路由走正常OAuth验证流程
    return parent::handle($request, $next);
}

这样内部API请求不会被强制触发授权校验，避免重定向到安装页。

2. 用Session Token做身份校验（替代单纯传host） #

如果内部API需要验证当前店铺/用户的合法性，不要只传host，而是在AJAX请求里携带Shopify的Session Token：

• React前端从App Bridge获取Token：

import { getSessionToken } from '@shopify/app-bridge-utils';
import axios from 'axios';

const app = window.app; // 假设已初始化App Bridge

async function fetchInternalData() {
    const token = await getSessionToken(app);
    const response = await axios.get('/api/internal/your-data', {
        headers: {
            'Authorization': `Bearer ${token}`,
            'X-Shopify-Shop-Domain': window.Shopify.shop
        }
    });
    // 处理返回数据
}

• PHP后端验证Token合法性：

use Shopify\Auth\SessionToken;

public function yourInternalApiMethod(Request $request)
{
    $authHeader = $request->header('Authorization');
    $token = str_replace('Bearer ', '', $authHeader);
    $shopDomain = $request->header('X-Shopify-Shop-Domain');
    
    try {
        $payload = SessionToken::decode($token, env('SHOPIFY_API_SECRET_KEY'));
        // 校验Token对应的店铺与请求中的一致
        if ($payload['dest'] !== $shopDomain) {
            return response()->json(['error' => 'Invalid shop domain'], 403);
        }
    } catch (\Exception $e) {
        return response()->json(['error' => 'Invalid session token'], 403);
    }
    
    // 处理业务逻辑并返回数据
    return response()->json(['data' => 'your internal data']);
}

3. 本地隧道配置要点 #

• 确保隧道域名和Shopify Partner后台配置的应用URL完全一致（必须是HTTPS），比如ngrok生成的https://xxxx.ngrok.io，要同步到应用设置里。
• AJAX请求必须用隧道域名，不能用localhost，否则会触发Shopify的CSP策略拦截。

4. 真实域名环境的适配 #

用真实域名部署后，流程和本地隧道完全一致——只要内部API路由跳过不必要的OAuth验证，同时用Session Token做身份校验，就能正常发起请求，不会出现重定向问题。

额外测试提示 #

可以先用Postman直接请求隧道域名的API接口，带上正确的Session Token和店铺域名头，确认后端能正常返回数据后，再联调前端，排除前后端联调的干扰。

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