如何将 React App 与 Shopify App 连接?
How to connect React App with Shopify App?
我是 shopify-App developmet 的新手,遇到了 Polaris,这是 Shopify 为一致的用户界面开发提供的反应库。我的想法是构建一个 Node.js Express 应用程序来验证和安装该应用程序并处理数据,并为商店管理员的用户界面提供一个 React 应用程序。
我在网上搜索过,但找不到将 React 应用程序连接到 shopify 应用程序的标准或推荐方法。
当应用部分的商店管理员 select 应用成功通过身份验证时,我能想到的是从 Node 应用重定向到 React 应用,如下所示。
app.get('/shopify/callback', (req, res) => {
const { shop, hmac, code, state } = req.query;
const 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 generatedHash = crypto
.createHmac('sha256', apiSecret)
.update(message)
.digest('hex');
if (generatedHash !== hmac) {
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;
const shopRequestUrl = 'https://' + shop + '/admin/shop.json';
const shopRequestHeaders = {
'X-Shopify-Access-Token': accessToken,
};
res.redirect([URL to the react app built with Polaris]);
})
.catch((error) => {
res.status(error.statusCode).send(error.error.error_description);
});
} else {
res.status(400).send('Required parameters missing');
}
});
我成功了,但我不确定这是否是推荐的方法。
它们是 3 种不同的东西:Node.JS、React 和 Polaris,您可以选择其中的任何一种。 Polaris 是一个库,如果你想使用它,只需 运行 yarn add @shopify-polaris
并阅读它的文档。就这些了。
无论有没有 Polaris,您仍然可以创建具有各种堆栈的 Shopify 应用程序。
我是 shopify-App developmet 的新手,遇到了 Polaris,这是 Shopify 为一致的用户界面开发提供的反应库。我的想法是构建一个 Node.js Express 应用程序来验证和安装该应用程序并处理数据,并为商店管理员的用户界面提供一个 React 应用程序。
我在网上搜索过,但找不到将 React 应用程序连接到 shopify 应用程序的标准或推荐方法。
当应用部分的商店管理员 select 应用成功通过身份验证时,我能想到的是从 Node 应用重定向到 React 应用,如下所示。
app.get('/shopify/callback', (req, res) => {
const { shop, hmac, code, state } = req.query;
const 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 generatedHash = crypto
.createHmac('sha256', apiSecret)
.update(message)
.digest('hex');
if (generatedHash !== hmac) {
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;
const shopRequestUrl = 'https://' + shop + '/admin/shop.json';
const shopRequestHeaders = {
'X-Shopify-Access-Token': accessToken,
};
res.redirect([URL to the react app built with Polaris]);
})
.catch((error) => {
res.status(error.statusCode).send(error.error.error_description);
});
} else {
res.status(400).send('Required parameters missing');
}
});
我成功了,但我不确定这是否是推荐的方法。
它们是 3 种不同的东西:Node.JS、React 和 Polaris,您可以选择其中的任何一种。 Polaris 是一个库,如果你想使用它,只需 运行 yarn add @shopify-polaris
并阅读它的文档。就这些了。
无论有没有 Polaris,您仍然可以创建具有各种堆栈的 Shopify 应用程序。