Laravel开发Shopify自定义App在新版Admin URL无法加载求助

1. 修正基础配置与Shopify后台设置 #

• 修改.env文件，将APP_URL设为你的App公网独立域名（如https://yourapp.com），不要带路径。
• 登录Shopify后台进入App设置，把应用URL和重定向URL都更新为你的App域名（例如https://yourapp.com和https://yourapp.com/auth/shopify/callback），移除旧版的myshopify相关地址。

2. 调整认证回调逻辑 #

• 在routes/web.php中确认Shopify认证路由配置：

Route::get('/auth/shopify', 'App\Http\Controllers\ShopifyAuthController@index');
Route::get('/auth/shopify/callback', 'App\Http\Controllers\ShopifyAuthController@callback');

• 修改ShopifyAuthController的callback方法，直接跳转至App内部路由，避免拼接旧版Admin地址：

public function callback(Request $request)
{
    ShopifyApp::shop();
    return redirect()->route('app.home');
}

3. 适配iframe加载的CSP策略 #

• 在所有Blade模板的<head>标签中添加CSP头，允许新版Admin的iframe加载：

<meta http-equiv="Content-Security-Policy" content="frame-ancestors https://admin.shopify.com https://*.myshopify.com;">

• 页面内所有跳转统一使用Laravel的route()辅助函数生成绝对URL，避免相对路径导致的iframe路由错误：

<a href="{{ route('app.products') }}">查看产品</a>

4. 处理Shopify App Bridge适配 #

• 若使用Shopify App Bridge，初始化时从请求中获取正确的店铺域名：

import AppBridge from '@shopify/app-bridge';
import { Redirect } from '@shopify/app-bridge/actions';

const app = AppBridge.create({
  apiKey: '{{ config('shopify-app.api_key') }}',
  shopOrigin: '{{ request()->get('shop') }}',
});

// 使用App Bridge进行页面跳转，避免iframe内URL异常
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.APP, '/products');

5. 验证中间件与路由分组 #

• 确保App路由组正确应用auth.shopify中间件，且web中间组包含EncryptCookies和VerifyCsrfToken：

Route::middleware(['auth.shopify'])->group(function () {
    Route::get('/', 'App\Http\Controllers\HomeController@index')->name('app.home');
    Route::get('/products', 'App\Http\Controllers\ProductController@index')->name('app.products');
});

6. 缓存清理与测试 #

• 执行命令清除Laravel路由和配置缓存：

php artisan route:clear
php artisan config:clear

• 在新版Shopify Admin中重新安装App，测试页面加载与路由跳转是否正常。

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