如何向 Shopify 管理员显示/发送 HTML？

Question

我在弄清楚如何在应用程序的管理员中显示 html 时遇到问题。

我已按照'Build a Shopify app with Node and Express' 教程进行操作，并且能够在 Shopify 应用管理员中显示商店的 json。但是，我不了解让任何 html 显示在应用程序管理员中的后续步骤。我尝试用渲染方法替换end(shopResponse)，这会引发错误“无法验证请求来源”。我也尝试设置一个额外的请求，但这导致了类似的错误。

app.get('/shopify', (req, res) => {
  const shop = req.query.shop;
  if (shop) {
    const state = nonce();
    const redirectUri = forwardingAddress + '/shopify/callback';
    const installUrl = 'https://' + shop +
      '/admin/oauth/authorize?client_id=' + apiKey +
      '&scope=' + scopes +
      '&state=' + state +
      '&redirect_uri=' + redirectUri;

    res.cookie('state', state);
    res.redirect(installUrl);
  } else {
    return res.status(400).send('Missing shop parameter. Please add ?shop=your-development-shop.myshopify.com to your request');
  }
});

app.get('/shopify/callback', (req, res) => {
  const { shop, hmac, code, state } = req.query;
  console.log(req.headers)
  var stateCookie = '';

  if (req.headers.cookie) {
    stateCookie = cookie.parse(req.headers.cookie).state; 
  }

  if (state !== stateCookie) {
    return res.status(403).send('Request origin cannot be verified');
  }

  if (shop && hmac && code) {
    const map = Object.assign({}, req.query);
    delete map['signature'];
    delete map['hmac'];
    const message = querystring.stringify(map);
    const providedHmac = Buffer.from(hmac, 'utf-8');
    const generatedHash = Buffer.from(
      crypto
        .createHmac('sha256', apiSecret)
        .update(message)
        .digest('hex'),
        'utf-8'
      );
    let hashEquals = false;
    // timingSafeEqual will prevent any timing attacks. Arguments must be buffers
    try {
      hashEquals = crypto.timingSafeEqual(generatedHash, providedHmac)
    // timingSafeEqual will return an error if the input buffers are not the same length.
    } catch (e) {
      hashEquals = false;
    };

    if (!hashEquals) {
      return res.status(400).send('HMAC validation failed');
    }

    const accessTokenRequestUrl = 'https://' + shop + '/admin/oauth/access_token';
    const accessTokenPayload = {
      client_id: apiKey,
      client_secret: apiSecret,
      code,
    };

    request.post(accessTokenRequestUrl, { json: accessTokenPayload })
    .then((accessTokenResponse) => {
      const accessToken = accessTokenResponse.access_token;
      // DONE: Use access token to make API call to 'shop' endpoint
      const shopRequestUrl = 'https://' + shop + '/admin/api/2019-04/themes.json';
      const shopRequestHeaders = {
        'X-Shopify-Access-Token': accessToken,
      };

      request.get(shopRequestUrl, { headers: shopRequestHeaders })
      .then((shopResponse) => {
        // This is what I have tried replacing with a render method
        res.status(200).end(shopResponse);
      })
      .catch((error) => {
        res.status(error.statusCode).send(error.error.error_description);
      });

    })
    .catch((error) => {
      res.status(error.statusCode).send(error.error.error_description);
    });

  } else {
    res.status(400).send('Required parameters missing');
  }
});

我希望能够在 Shopify 应用管理员中看到基本的 html。

已解决

阅读接受的答案后，我意识到我不需要从一开始就显示文件的所有身份验证。

我的白名单路线最终看起来像这样：

app.get('/shopify/callback', (req, res) => {

  res.render('pages/index')
});

Answer 1

一旦你成功获取了shop json，就意味着应用程序已成功安装在shopify商店中

要在应用程序中为商店管理员显示 html，您必须在您的项目中创建一个路由，将您呈现到 html 页面，如下所示

app.get('/', function (req, res, next) {
    res.render('your html page path');
}); 

这可以将您呈现到 html 页面，您可以在其中显示应用主页的 html

现在您必须在您的 shopify 合作伙伴帐户应用设置中设置您的域网址 Shopify partner account 点击此网址并 转到您的应用 >> 应用设置并为您的应用添加 https 域

https://yourdomain.com/

当您的应用从 shopify 管理员打开并显示您的应用的索引 html 页面时，此根位置会加载

Answer 2

您不会在 Shopify 后台中显示您的 HTML。相反，您在应用程序中呈现 HTML，Shopify 会在 Shopify 后台中显示嵌入的应用程序。你有两个选择。一是您的应用程序按照任何其他普通网络应用程序在管理员外部呈现，或者二是您选择在 Shopify 管理员内作为嵌入式应用程序呈现，这意味着您的 HTML 显示在 Shopify 为您创建的 iframe 内。

在制作应用程序之前，您应该真正阅读 Shopify 应用程序的文档，然后询问应用程序如何显示 HTML...了解其基本概念很重要。

Answer 3

已编辑：我也是为 Shopify 开发的新手，过去 3 周一直在调整我的 Node / Express 应用程序以与 Shopify 一起使用，我也遇到了困难。

我今晚（2019 年 4 月 25 日）刚刚查看了这篇文章，这是我为渲染/显示我的 index.html 页面所做的。

将此与您的其他要求一起添加到顶部：

var path = require('path');

将此路径添加到：

app.get('/shopify', function (req, res, next) {
res.sendFile(path.join(__dirname, '../public', 'index.html'));
}); 

注意：“../pubic”是我的“index.html”文件之前的目录。这对您来说可能会有所不同，但应该很容易弄清楚。

我也在这条路径中添加了：

app.get('/', function (req, res, next) {
res.sendFile(path.join(__dirname, '../public', 'index.html'));
});