关于 shopify-apps
介绍 Shopify 应用的实现模式与常见问题,涵盖 React Router 配置、嵌入式 Admin 应用、Webhook 处理,以及面向新应用开发的实践建议。
主要功能
- 01使用 React Router 搭建应用
- 02通过 App Bridge 将应用嵌入 Shopify Admin
- 03验证 Webhook 的 HMAC 签名
- 04异步处理 Webhook
- 05新代码使用 GraphQL
- 06实现 GDPR 处理程序
适用场景
- 01构建基于 React Router 的 Shopify 应用
- 02创建嵌入 Shopify Admin 的应用
- 03验证签名并处理 Webhook
- 04检查应用中的常见实现问题
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ davila7/ claude-code-templates --skill shopify-apps安装后在 Claude Code 中输入/shopify-apps确认已加载。
详细介绍
Shopify 应用
模式
React Router 应用设置
使用 React Router 的现代 Shopify 应用模板
使用 App Bridge 的嵌入式应用
在 Shopify Admin 中嵌入并呈现应用
Webhook 处理
使用 HMAC 验证安全地处理 webhook
反模式
❌ 新应用使用 REST API
❌ 响应前处理 Webhook
❌ 使用轮询而非 Webhook
⚠️ 注意事项
| 问题 | 严重性 | 解决方案 |
|---|---|---|
| 问题 | 高 | ## 立即响应,异步处理 |
| 问题 | 高 | ## 检查速率限制标头 |
| 问题 | 高 | ## 申请受保护的客户数据访问权限 |
| 问题 | 中 | ## 仅使用 TOML(推荐) |
| 问题 | 中 | ## 处理两种 URL 格式 |
| 问题 | 高 | ## 所有新代码均使用 GraphQL |
| 问题 | 高 | ## 通过 script tag 使用最新的 App Bridge |
| 问题 | 高 | ## 实现所有 GDPR 处理程序 |
评论
支持 Markdown