问题标签 [shopify-app-bridge]

我在我的应用程序中使用路由时遇到问题，它是使用 Shopify CLI、React 和 Shopify App Bridge 构建的模板，由此处的文档指导。

我触发的每条路由都会发送到我的项目中的 _app.js 文件，因为我可以在控制台中记录大部分输出，但我无法让它在我的应用程序中实际包含子页面的路径，例如https://{apphost}/custompage不会导航到 custompage但是错误处理程序和自定义页面被包含在查询中。props 的 route 和 pathname 字段返回

代替

我希望以上是结果，但事实并非如此。但是 custompage url 确实出现在 asPath 字段中，就像这样asPath: "/custompage?hmac={hmac}&host={host}&shop={shop}"假装 {} 中的所有内容都有实际信息。

查询字段像在工作页面上一样获取它需要的字段。所以主要问题只是路由。

考虑到这一点，我得出的结论是，我可能有问题并触发服务器端路由处理程序，但我不知道从哪里开始重定向到确切的页面而不是样板代码附带的索引页面。我查看了他们的文档，但他们跳过了用他们的样板代码实际解释处理路由所需的大部分部分。我不想编辑主要功能，因为我担心它们可能会阻止整个应用程序运行，但我需要能够处理应用程序上的路由，而An unexpected error has occurred.在尝试路由到子页面时不会出现错误。即使在我的应用程序中对白名单 url 的扩展也会触发该错误，所以我认为我需要帮助来添加到应用程序或服务器的路由。

谁能帮我弄清楚我错过了什么？

我创建了 Shopify 应用程序用于测试目的。

如上图所示，我在资源列表中展示了产品。

每个资源列表项都有指向自定义产品详细信息页面的 URL 链接。

但是 URL 重定向不起作用？

您好，我有一个使用 WP Shopify Pro 插件的 wordpress 网站的客户。我只能访问 shopify 商店，这个插件能够与自定义 shopify 应用程序交互吗？客户销售在线课程，并且想要一个单点登录解决方案，我有 jwt 经验，但试图想象这将如何集成到 shopify 中。我只玩过添加管理功能。

我们有一个 Shopify+Thinkific 网站桥（我们有 Thinkific Premium，提供 SSO），我们希望我们的 Shopify 客户登录到他们的 Thinific 帐户。SSO 如何使用 jwt 令牌来完成？有人做过类似的事情吗？ https://developers.thinkific.com/more/sso/ https://www.shopify.com/partners/blog/17056443-how-to-generate-a-shopify-api-token

任何人都有任何自定义应用程序示例，他们在没有多通道的情况下创建了成功的第 3 方 SSO 审讯？

因此，在学习了几个 Shopify 的教程和文档之后，我尝试使用 AppBridge 2 将 Shopify 的嵌入式应用程序从 cookie 会话迁移到 JWT。

我正在使用 AppBridge 进行设置：

在我的 FrontEnd JS 代码上，这会导致 sessionToken 附加到窗口：

直到这里一切正常，我可以在 iframe 中加载我的应用程序，我们生活在一个快乐的世界中。

但是，我的 Rails 控制器（通过 Ajax 调用）正在发送401 Unauthorized消息，因此很明显，我在 FrontEnd 上通过了身份验证，但我愚蠢的 RoR 控制器并没有意识到这一点。

此类控制器（如 Shopify 的文档所示）继承自authenticated_controller.rb文件：

我看到类ShopifyApp::Authenticate（来自shopify_app gem）使用该库：

使用方法：

所以，前端的 JavaScript 代码：

为后端代码设置“jwt.shopify_domain”的值（读取）？或者'jwt.shopify_domain'的值来自哪里？

我还注意到路线：

还存在，这个路由怎么跟AppBridge有关系？以前我使用该路由手动设置 cookie 会话，我还应该使用它吗？

总结一下：后端的 rails 代码如何“知道”AppBridge 在前端获得了有效的 sessionToken？

在将shopify应用程序Vue.js作为前端并将laravel作为后端时，我遇到了一些问题。

我正在使用 app-bridge 生成会话令牌，它可以正常生成会话令牌并且工作正常，直到重新生成会话令牌。会话令牌重新生成后，它会响应“会话令牌无效”。

我正在遵循官方文档中的正确指南，请点击链接。

我已经检查了标头，并且当我使用 Axios 实例发送请求时传递了新令牌。简而言之，令牌在重新生成后第一次不起作用。

• "@shopify/app-bridge": "^2.0.5",
• "@shopify/app-bridge-utils": "^2.0.5",
• Laravel 版本：8.65，
• PHP版本：8.0.8，
• 商店版本：2.0
• "vue": "^2.6.12",

这是我的代码......

我有以下设置，当使用 nextjs 路由器加载新页面时它不起作用，因为新页面是空白的。似乎根本没有发生客户端或基于 iframe 的导航重定向。

我已经成功地使用 PolarisLink组件从一个页面导航到另一个页面，但这似乎完全在 iframe 中重新加载了我的应用程序。我想使用客户端路由，甚至没有运气遵循这个例子https://stackoverflow.com/a/63481122/671095

我正在使用一个自定义挂钩useAppRoute来挂钩 shopify-app-bridge 的历史，但我认为这不是我想要实现的最佳方法。

_app.js

使用AppRoute.js

RoutePropigator.js

index.js - router.push 示例

是否可以将 Shopify 管理应用程序的前端部分托管在 S3 存储桶上的 CDN/静态类上？

我想为 API 部分使用 NestJS 框架，并在一个单独的代码库中（以及在不同的域下）在 React（React Admin）中有管理面板的前端。但是，在 Shopify 应用设置中，我只能提供一个应用 url。

• 如果我提供前端，它不会通过 API 并且缺少相当多的功能（例如检查身份验证、安装等）。
• 如果我提供 API 的基本 url，那么我会收到一个错误，即重定向到前端时来源不匹配。

我看到的唯一解决方案是在身份验证后在 NestJS 下创建代理，但是在 CDN 下托管它不再有意义。是否有替代方案，或者我们坚持 Shopify 允许我们做的事情？（我真的希望我错了或遗漏了什么）