如何使用自定义 NodeJS 服务器安全地在 Shopify 商店中显示额外的客户数据？

Question

目标是在 /account 中安全地显示自定义客户数据。用户需要登录 Shopify 商店才能访问该路线。

数据与服务器中客户的电子邮件地址相关联。所以我将在请求 URL.

中使用电子邮件地址进行 GET 请求

在 /account 液体模板中，我使用的是 Vue 组件。它将处理对 NodeJS API 的请求（我正在使用 feathers/express）。

到目前为止，我了解了 App Proxy 和 App Bridge，但我不知道它们如何适合这里。

主要问题：

如何保护 API 以确保只有登录的 Shopify 客户才能在商店内获取他们自己的数据？如何验证用户并确保 API 只能通过商店访问？

注意：我是 Shopify 的新手。请详细说明。谢谢

Answer 1

很简单。术语有点奇怪，但这里就是您需要知道的全部内容。

在您的应用中设置应用代理

这会让您知道来电是安全的并且来自 Shopify。调用可以包括两个关键参数，即电子邮件和客户 ID。

得到有趣的数据，然后returnJSON

所以你有一个电子邮件地址和一个 ID。现在您可以安全地获取重要的客户帐户数据，并 return 将其 JSON 发送到前端的组件。

就是这样。仅此而已。玩得开心。

Answer 2

使用Shopify CLI工具创建应用，使用命令shopify node create生成Node JS。
生成的应用程序包含 auth/callback 应用程序可安装到 Shopify 商店所需的内容。使用此 CLI，它还可以在合作伙伴仪表板上进行初始设置。
我们可以使用 shopify node serve 启动 Node 应用程序，这将启动 ngrok 服务器，并在应用程序设置中更新应用程序的 URL。然后，您需要通过复制 URL 并将其放入 App Setup 来设置 App Proxy。
通过使用 App Proxy，Shopify 将通过 Shopify 后端“重新路由”呼叫，并为您的 app/server 添加签名，因此我们知道呼叫是安全的并且是正确的。
然后我们可以验证来自 Shopify 的 URL 查询中的签名。这是用 JS 重写的 code from Ruby。我在我的 Feathers JS 服务中使用它作为钩子。

const { NotAuthenticated } = require('@feathersjs/errors');
const crypto = require('crypto');
const safeCompare = require('safe-compare');

module.exports = () => {
  return async context => {
    const { query } = context.params;
    const signature = query.signature;
    delete query.signature;

    let sortedParams = '';
    for (const [key, value] of Object.entries(query).sort()) {
      sortedParams += `${key}=${value}`;
    }

    const calculatedSignature = crypto
      .createHmac('sha256', process.env.SHOPIFY_API_SECRET)
      .update(sortedParams, 'utf-8')
      .digest('hex');
  
    if (!safeCompare(calculatedSignature, signature)) {
      throw new NotAuthenticated();
    }

    return context;
  };
};

如何使用自定义 NodeJS 服务器安全地在 Shopify 商店中显示额外的客户数据？

How to display extra customer data in Shopify store using a custom NodeJS server securely?

shopify

shopify-app

shopify-api