如何show/sendHTML到Shopify后台？

Question

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

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


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

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

我今晚 (4/25/19) 刚刚回顾了这篇文章，这是我渲染/显示我的 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'));
});

Answer 2

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

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

Answer 3

一旦你获得商店 json 成功，这意味着应用程序已成功安装到 shopify 商店

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

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

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

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

https://yourdomain.com/

当您的应用程序从 shopify 后台打开并显示您的应用程序索引 html 页面时，此根位置会加载

如何show/sendHTML到Shopify后台？

How to show/send HTML to Shopify admin?

node.js

shopify

shopify-app