我有一个问题，想弄清楚如何在应用程序的管理员中显示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。
解决了
阅读接受的答案后，我意识到我不需要从开始显示文件的所有auth。
我的白名单路线最终看起来像这样：
app.get('/shopify/callback', (req, res) => {
res.render('pages/index')
});
一旦你成功获得商店json，这意味着appify成功安装在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页面
您不在Shopify管理员中显示HTML。相反，您在应用程序中呈现HTML，Shopify会在Shopify管理员中显示您的应用程序。你有两个选择。一个是您的应用程序在管理员之外呈现为任何其他普通网络应用程序或两个，您选择在Shopify管理员内部呈现为嵌入式应用程序，这意味着您的HTML显示在Shopify为您创建的iframe中。
在制作应用程序之前，你应该真正阅读Shopify应用程序的文档，然后询问应用程序如何显示HTML ...重要的是你要理解它的基本概念。
编辑：我也是开发Shopify的新手，过去3周一直在调整我的Node / Express应用程序与Shopify一起工作，我也在路上遇到困难。
我今晚（2009年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'));
});