繁体 English 中英

如何将查询字符串从 Shopify 传递到嵌入式应用程序？

[英]How to pass query string from Shopify to an embedded app?

原文 2020-12-23 14:26:00 3 2 reactjs/ shopify/ next.js

我正在构建一个带有 Next.js 的 Shopify 应用程序，我需要获取查询字符串，以便我可以在getServerSideProps中检查商家的身份（请记住，Shopify 应用程序不推荐使用 Shopify）

在访问某些应用程序时，我注意到其中一些应用程序在每个请求中都获取了从 Shopify 传递下来的查询字符串。

此图像显示了它在每个请求上的外观

此图片显示了我的应用程序的行为方式

在此图像中，您可以看到，当您使用 hover 路由时，不存在任何查询字符串，这意味着父应用程序以某种方式传递了这些字符串。

截至目前，我正在使用 Cookie 来传递 shopOrigin，但我觉得如果我能够以某种方式在每个请求中获取查询字符串，我觉得没有必要，而且通过 HMAC，我将能够验证请求是来自 Shopify。

2 个解决方案

任何来自 Shopify 的应用程序调用在发出请求时都会正确提供商店参数。 在您自己的 App 调用自身时，您也可能会使用商店名称作为查询字符串值。

请注意，您仍然可以使用 cookie 在内部验证您的会话，只是不要像我们过去那样通过 iframe 之外的第三方路由来验证。 Shopify 有大量关于如何正确验证和构建应用程序的文档，请查看。 他们甚至为您提供了一个可用的 Node 应用程序供您使用，因此您可以确保自己做对了。

解决方案非常简单。

Shopify 提供了一个TitleBar AppBridge 组件，您可以使用它来处理应用程序的导航。 它所做的是，在每次路由更改时，它都会重新加载 iframe 并且请求中包含 hmac、商店、代码和时间戳。 它比客户端路由慢一点，但它按预期工作。

为了使用它，你只需要 go 到：合作伙伴的仪表板/你的应用程序/扩展/嵌入式应用程序（点击管理）/导航（点击配置）并添加导航链接，然后你只需要从app-bridge-react导入TitleBar并将其放入index.js

如何链接到 Shopify 嵌入式应用程序中的另一个页面？

[英]How do I link to another page within a Shopify Embedded App?

在 Shopify 中的嵌入式应用程序本身中加载确认 URL

[英]Load confirmation URL in Embedded app itself in Shopify

如何防止Shopify Polaris React应用过早连接到Shopify服务？

[英]How can I prevent a Shopify Polaris React app from connecting to Shopify service too soon?

Shopify 嵌入式应用程序 - 使用 nextjs 加载不同的页面不起作用

[英]Shopify embedded App - Loading different pages does not work using nextjs

如何在使用 Shopify CLI、React 和 Shopify App Bridge 构建的 Shopify 应用中使用路线

[英]How to use routes in Shopify app built using Shopify CLI , React and Shopify App Bridge

在将值传递到数据库期间出现错误反应 shopify 应用程序

[英]getting error during the pass value to the database react shopify app

如何将 this.props.match.params.id 传递给无服务器函数以从 React Web 应用程序进行数据库查询

[英]How to pass this.props.match.params.id across to serverless function for database query from React web app

构建 Shopify 应用程序 - 如何加载不同的页面？

[英]Building a Shopify App - How to Load Different Pages?

Shopify App/Nextjs：如何让 RoutePropagator 工作？

[英]Shopify App/Nextjs: How to get RoutePropagator to work?

如何通过 props 传递带有嵌入链接的文本字符串？

[英]How can I pass down through props a string of text with a link embedded within?

暂无

暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何链接到 Shopify 嵌入式应用程序中的另一个页面？在 Shopify 中的嵌入式应用程序本身中加载确认 URL 如何防止Shopify Polaris React应用过早连接到Shopify服务？ Shopify 嵌入式应用程序 - 使用 nextjs 加载不同的页面不起作用如何在使用 Shopify CLI、React 和 Shopify App Bridge 构建的 Shopify 应用中使用路线在将值传递到数据库期间出现错误反应 shopify 应用程序如何将 this.props.match.params.id 传递给无服务器函数以从 React Web 应用程序进行数据库查询构建 Shopify 应用程序 - 如何加载不同的页面？ Shopify App/Nextjs：如何让 RoutePropagator 工作？如何通过 props 传递带有嵌入链接的文本字符串？

相关标签

粤ICP备18138465号 © 2020-2024 STACKOOM.COM