Question

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

我遵循了'Build a Shopify app with Node and Express'教程，并且能够在Shopify App Admin中显示商店的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

编辑：我对Shopify的开发也很陌生，并且在过去的3个星期中一直在调整我的Node / Express应用程序以与Shopify一起使用，而且我也遇到了麻烦。

我刚刚于今晚（19/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'));
});

Answer 2

您不会在Shopify管理员中显示HTML。相反，您在应用程序中呈现HTML，然后Shopify将您的应用程序嵌入到Shopify管理员中。您有两种选择。一种是您的应用程序可以像其他任何普通Web应用程序一样在Admin外部呈现，或者两种，您选择将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合作伙伴帐户应用设置中设置域网址 Shopify partner account 点击此网址，然后转到您的应用>>应用设置，然后为您的应用添加https域

https://yourdomain.com/

从shopify管理员打开您的应用程序时，此根目录位置会加载，并显示您为应用程序编制的html页面

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

3 个答案: