![\"Shopify\u521b\u5efa\u5f00\u53d1\u8005\u8d26\u53f7\"](\"http:\/\/www.yezhou.me\/AppBlog\/images\/\u6280\u672f\/Shopify\u521b\u5efa\u5f00\u53d1\u8005\u8d26\u53f7.png\")
<\/p>\n
\uff082\uff09\u5728\u76f8\u5173partners\u7684\u9875\u9762\u521b\u5efa\u5546\u5e97(\u4ee5\u4f9b\u540e\u9762\u5f00\u53d1\u5e94\u7528\u4f7f\u7528)\u4ee5\u53ca\u5e94\u7528<\/p>\n
![\"Shopify](\"http:\/\/www.yezhou.me\/AppBlog\/images\/\u6280\u672f\/Shopify%20Partners\u9875\u9762.png\")
<\/p>\n
\uff083\uff09\u5728\u521b\u5efa\u5e94\u7528\u7684\u6709\u81ea\u5b9a\u4e49\u5e94\u7528\u548c\u516c\u5171\u5e94\u7528\u5982\u56fe\uff1a<\/p>\n
![\"Shopify\u521b\u5efa\u5e94\u7528\"](\"http:\/\/www.yezhou.me\/AppBlog\/images\/\u6280\u672f\/Shopify\u521b\u5efa\u5e94\u7528.png\")
<\/p>\n
\u4e00\u822c\u6211\u4eec\u90fd\u662f\u521b\u5efa\u7684\u516c\u5171\u5e94\u7528\uff0c\u5728\u521b\u5efa\u5e94\u7528\u7684\u65f6\u5019URL\u548c\u76f8\u5173\u7684\u91cd\u5b9a\u5411URL\u90fd\u662f\u5fc5\u987b\u5199\u7684\u56e0\u4e3a\u6211\u4e5f\u6ca1\u6709\u6ce8\u518c\u57df\u540d\u5565\u7684\u5427\uff0c\u6240\u4ee5\u6b64\u65f6\u662f\u7528\u4e86ngrok\u5185\u7f51\u7a7f\u900f\uff0c\u5728\u5b98\u65b9\u7684\u5f00\u53d1\u4ecb\u7ecd\u4e2d\u4e5f\u662f\u4f7f\u7528\u8fd9\u4e2a\u3002\u5728\u6b64\u6211\u4eec\u586b\u5199\u7684URL\u5c31\u8981\u548c\u4f7f\u7528ngrok\u66b4\u9732\u51fa\u53bb\u7684\u5730\u5740\u5bf9\u5e94\u4e86\uff0c\u4e0d\u8fc7\u4f7f\u7528node\u7684koa\u6846\u67b6\u6709\u4e2a\u4e13\u95e8\u7684\u4e2d\u95f4\u4ef6\u4e5f\u662f\u5b98\u65b9\u4f7f\u7528\u7684\u91cd\u5b9a\u5411\u5730\u5740\u90fd\u662f\u57df\u540d\u540e\u52a0\u4e0a\u4e86shopify\/auth \u4f8b\u5982\uff1aURL:https:\/\/30aca829.ngrok.io<\/a>, \u91cd\u5b9a\u5411URL:https:\/\/30aca829.ngrok.io\/shopify\/auth\/<\/a> \uff08\u7535\u8111\u91cd\u542f\u91cd\u65b0\u66b4\u9732\u51fa\u53bb\u8fd9\u4e2a\u8fde\u4e2a\u5730\u5740\u90fd\u662f\u8981\u91cd\u65b0\u586b\u4e00\u904d\uff0c\u7136\u540ekoa\u7684\u4e2d\u95f4\u4ef6\u5c31\u4f1a\u8df3\u8f6c\u5230 https:\/\/30aca829.ngrok.io\/shopify\/auth\/<\/a> \u8fdb\u884c\u76f8\u5173\u7684\u9a8c\u8bc1\u64cd\u4f5c\u3002\u7136\u540e\u5728\u540e\u671f\u6211\u4eec\u6ca1\u6709\u7528koa\u4f5c\u4e3a\u5165\u53e3\u8fd9\u4e2a\u5730\u5740\u4e5f\u662f\u53ef\u4ee5\u81ea\u5df1\u60f3\u600e\u4e48\u586b\u5c31\u600e\u4e48\u586b\uff09\u3002<\/p>\n \uff084\uff09\u521b\u5efa\u5b8c\u6210\uff08\u62ff\u53d6\u76f8\u5173\u7684\u5bc6\u94a5\u5f88\u91cd\u8981\uff01\uff01\u5f88\u91cd\u8981\uff01\uff01\u4f5c\u4e3a\u5f00\u53d1\u8bfb\u53d6\u6570\u636e\u548c\u8bf7\u6c42\u5b98\u65b9api\u4f7f\u7528\uff09<\/p>\n \uff081\uff09\u521b\u5efa\u9879\u76ee\u76ee\u5f55\uff08sample-app\uff09\uff0c\u5e76\u4f7f\u7528npm\u521d\u59cb\u5316\u9879\u76ee\u76ee\u5f55<\/p>\n \uff082\uff09\u5b89\u88c5\u76f8\u5173\u4f9d\u8d56<\/p>\n \uff083\uff09\u56e0\u4e3a\u662f\u7528next.js\u6240\u4ee5\u4e0d\u719f\u6089\u7684\u8fd8\u5f97\u770b\u770b\u5b98\u65b9\u6587\u6863 nextjs.frontendx.cn\/<\/p>\n \u521b\u5efa\u6587\u4ef6pages\u5e76\u5728\u4e0b\u9762\u65b0\u5efa \u6dfb\u52a0\u76f8\u5173\u8fd0\u884c\u547d\u4ee4\u6253\u5f00 \uff084\uff09\u8fd0\u884c\u5f00\u53d1\u73af\u5883<\/p>\n \u5230\u8fd9\u91cc\u5e94\u8be5\u662f\u521b\u5efa\u4e00\u4e2a \uff085\uff09\u4f7f\u7528ngrok\u66b4\u9732\u51fa\u53bb\u81ea\u5df1\u76843000\u7aef\u53e3\u56e0\u4e3a \u7136\u540e\u5728\u81ea\u5df1\u521b\u5efa\u7684\u5e94\u7528\u4e2d\u8bbe\u7f6e\u4e2d\u6dfb\u52a0\u5bf9\u5e94\u7684url\uff08\u5f97\u7528https\u7684\uff09\u5c31\u5728\u4e0a\u9762\u6240\u8bf4\u7684\u586b\u5199url<\/p>\n \uff086\uff09\u4f7f\u7528node\u7684 koa\u6765\u8fdb\u884c\u6e32\u67d3\u9875\u9762\u64cd\u4f5c<\/p>\n \u8fd9\u91cc\u8fd8\u8981\u5728\u57df\u540d\u7684shop\u586b\u5199\u6211\u4eec\u7684\u5546\u5e97\u5730\u5740\u4f8b\u5982\u6211\u81ea\u5df1\u7684\uff1a<\/p>\n \u4e00\u5207\u586b\u5199\u5c31\u7eea\u4e4b\u540e\u4e00enter\u9875\u9762\u5c31\u81ea\u52a8\u8df3\u8f6c\u4e86\u3002<\/p>\n \u6700\u540e\u5c55\u793a\u7684\u9875\u9762\uff1a<\/p>\n \u524d\u524d\u540e\u540e\u90fd\u662f\u4f7f\u7528React\u7684next.js\u5f00\u53d1\u4e86\u4e24\u4e09\u4e2a\u5e94\u7528\uff0c\u611f\u89c9\u5c31\u662f\u5f00\u53d1\u7684\u65f6\u5019\u592a\u9ebb\u70e6\u4e86\uff0c\u603b\u8981\u5185\u7f51\u7a7f\u900f\uff0c\u800c\u4e14\u5c55\u793a\u7684\u9875\u9762\u90fd\u662fShopify\u7684\u7684\u81ea\u5df1\u5e73\u53f0\u4e0a\uff0c\u800c\u4e14\u5f00\u53d1\u5199\u5b8c\u4ee3\u7801\u7b49\u5b83\u54cd\u5e94\u8fc7\u6765\u8fd8\u5f88\u6162\u3002\u5c31\u8fd9\u539f\u56e0\u6211\u53c8\u5f00\u59cb\u6298\u817e\u4e86\u5bfb\u6c42\u5176\u4ed6\u7684\u65b9\u6848\u770b\u770b\u6709\u6ca1\u6709\u80fd\u5728\u81ea\u5df1\u5f00\u53d1\u5b8c\u4e86\u518d\u5230\u5b83\u90a3\u4e0a\u9762\uff0c\u800c\u4e14\u8ba9\u9a8c\u8bc1Shopify\u7684\u4e00\u7cfb\u5217\u64cd\u4f5c\u8ba9\u6211\u4eec\u7684\u540e\u7aef\u5c0f\u54e5\u6765\u64cd\u4f5c\u3002\u6700\u7ec8\u6211\u524d\u7aef\u9009\u62e9Vue\u5e76\u4e14\u9a8c\u8bc1\u90fd\u653e\u540e\u7aef\u4e86\uff0c\u8fd9\u6837\u6211\u5c31\u80fd\u50cf\u5e73\u5e38\u5f00\u53d1Vue\u9879\u4e00\u6837\u4e86\u3002<\/p>\n \u4e0b\u9762\u4ecb\u7ecd\u4e0b\u6211\u7eaf\u524d\u7aef\u8fdb\u884cShopify\u7684\u9a8c\u8bc1\u64cd\u4f5c\u4f7f\u7528vue\uff08\u524d\u63d0\u8981\u7d20\u5185\u7f51\u7a7f\u900f\uff0c\u4e0d\u8fc7\u5f00\u53d1\u7684\u65f6\u5019\u4e0d\u9700\u8981\uff09<\/p>\n \uff081\uff09\u6dfb\u52a0\u5b89\u88c5\u5e94\u7528\u8def\u7531<\/p>\n \uff082\uff09\u91cd\u5b9a\u5411\u9a8c\u8bc1\u8def\u7531<\/p>\n Vue\u8fd9\u76f8\u5173\u7684\u9a8c\u8bc1\u65b9\u6848\u4e5f\u662f\u4eceGithub\u4e0a\u9762\u635e\u7684\uff0c\u7279\u5730\u8bb0\u5f55\u4e0b\u3002\u5177\u4f53\u5730\u5740\u5fd8\u4e86\uff0c\u6709\u9700\u8981\u81ea\u5df1\u53ef\u4ee5\u641c\u641c\u3002<\/p>\n \u524d\u8a00 \u7531\u4e8e\u516c\u53f8\u7684\u9700\u6c42\u5f00\u53d1Shopify\u7684\u5e94\u7528\u63d2\u4ef6\u81ea\u5df1\u7279\u5730\u8bb0\u5f55\u4e0b\u3002\u7b80\u5355\u7684\u4ecb\u7ecd\u4e0bShopify\uff0c\u5b83\u662f\u7531\u6258\u6bd4\u4e9a\u65af\u00b7\u5362 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[445],"tags":[],"class_list":["post-1763","post","type-post","status-publish","format-standard","hentry","category-shopify"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1763"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1763\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Shopify\u5e94\u7528API\u79d8\u94a5\"](\"http:\/\/www.yezhou.me\/AppBlog\/images\/\u6280\u672f\/Shopify\u5e94\u7528API\u79d8\u94a5.png\")
<\/p>\n\u7f16\u5199\u5f00\u53d1\u73af\u5883\u7a0b\u5e8f<\/h2>\n
npm init -y<\/code><\/pre>\nnpm install --save react react-dom next<\/code><\/pre>\nindex.js<\/code><\/p>\nconst Index = () => (\n <div>\n <p>Sample app using React and Next.js<\/p>\n <\/div>\n);\n\nexport default Index;<\/code><\/pre>\npackage.json<\/code>\u6587\u4ef6\u6dfb\u52a0<\/p>\n{\n "scripts": {\n "test": "echo \\"Error: no test specified\\" && exit 1",\n "dev": "next",\n "build": "next build",\n "start": "next start"\n }\n}<\/code><\/pre>\nnpm run dev<\/code><\/pre>\nnext.js<\/code>\u9879\u76ee\u7136\u540e\u63a5\u4e0b\u6765\u5bf9\u63a5\u5230Shopify<\/p>\nnext.js<\/code>\u542f\u52a8\u7684\u9ed8\u8ba4\u662f3000\u7aef\u53e3<\/p>\nngrok http 3000<\/code><\/pre>\n![\"Shopify](\"http:\/\/www.yezhou.me\/AppBlog\/images\/\u6280\u672f\/Shopify%20koa\u6388\u6743\u4f7f\u7528ngrok\u66b4\u9732\u7aef\u53e3.png\")
<\/p>\n\n
SHOPIFY_API_KEY='YOUR API KEY FROM SHOPIFY PARTNERS DASHBOARD'\nSHOPIFY_API_SECRET_KEY='YOUR API SECRET KEY FROM SHOPIFY PARTNERS DASHBOARD'<\/code><\/pre>\n\n
npm install --save koa @shopify\/koa-shopify-auth @shopify\/koa-shopify-graphql-proxy dotenv koa-session isomorphic-fetch<\/code><\/pre>\n\n
server.js<\/code>\u5199\u5165\u76f8\u5173\u9a8c\u8bc1\u4ee3\u7801<\/li>\n<\/ul>\nrequire('isomorphic-fetch');\nconst dotenv = require('dotenv');\nconst Koa = require('koa');\nconst next = require('next');\nconst { default: createShopifyAuth } = require('@shopify\/koa-shopify-auth');\nconst { verifyRequest } = require('@shopify\/koa-shopify-auth');\nconst session = require('koa-session');\n\ndotenv.config();\n\/\/ graphql\u7684\u76f8\u5173\u4e2d\u95f4\u4ef6\nconst { default: graphQLProxy } = require('@shopify\/koa-shopify-graphql-proxy'); \nconst { ApiVersion } = require('@shopify\/koa-shopify-graphql-proxy');\n\nconst port = parseInt(process.env.PORT, 10) || 3000;\nconst dev = process.env.NODE_ENV !== 'production';\nconst app = next({ dev });\nconst handle = app.getRequestHandler();\n\nconst { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env; \/\/ \u73af\u5883\u53d8\u91cf\u91cc\u8bfb\u53d6 api-key\u4e0eapi-secret-key\napp.prepare().then(() => {\n const server = new Koa();\n server.use(session(server));\n server.keys = [SHOPIFY_API_SECRET_KEY];\n\n server.use(\n createShopifyAuth({\n apiKey: SHOPIFY_API_KEY,\n secret: SHOPIFY_API_SECRET_KEY, \n scopes: ['read_products', 'write_products'], \/\/\u586b\u5199\u76f8\u5173\u5e94\u7528api\u76f8\u5173\u8bf7\u6c42\u7684\u6743\u9650\n afterAuth(ctx) {\n const { shop, accessToken } = ctx.session; \/\/ \u901a\u8fc7session\u62ff\u53d6\u76f8\u5173\u5546\u5e97\u5730\u5740\u4ee5\u53ca\u8bf7\u6c42api\u9700\u8981\u7684accessToken\n ctx.cookies.set('shopOrigin', shop, { httpOnly: false }); \n ctx.redirect('\/'); \/\/ \u91cd\u5b9a\u5411\u5230index\u9996\u9875\n },\n }),\n );\n\n server.use(verifyRequest());\n server.use(async (ctx) => {\n await handle(ctx.req, ctx.res);\n ctx.respond = false;\n ctx.res.statusCode = 200;\n return\n });\n server.use(graphQLProxy({version: ApiVersion.October19})) \/\/ \u8fd9\u91cc\u586b\u5199\u76f8\u5173api\u7684\u7248\u672c\n\n server.listen(port, () => {\n console.log(`> Ready on http:\/\/localhost:${port}`); \/\/ \u76d1\u542c\u7aef\u53e3\n });\n});<\/code><\/pre>\n\n
package.json<\/code>\u6587\u4ef6\u4f7f\u7528\u6211\u4eec\u7684server.js<\/code>\u6765\u542f\u52a8\u9879\u76ee<\/li>\n<\/ul>\n{\n "scripts": {\n "test": "echo \\"Error: no test specified\\" && exit 1",\n "dev": "node server.js",\n "start": "NODE_ENV=production node server.js",\n "build": "next build",\n }\n}<\/code><\/pre>\n\n
![\"Shopify](\"http:\/\/www.yezhou.me\/AppBlog\/images\/\u6280\u672f\/Shopify%20koa\u6388\u6743\u8df3\u8f6c.png\")
<\/p>\nhttps:\/\/e44132cd.ngrok.io\/auth\/inline?shop=jetbn.myshopify.com<\/code><\/pre>\n![\"Shopify\u6388\u6743\u5b8c\u6210\u8df3\u8f6c\u9875\u9762\"](\"http:\/\/www.yezhou.me\/AppBlog\/images\/\u6280\u672f\/Shopify\u6388\u6743\u5b8c\u6210\u8df3\u8f6c\u9875\u9762.png\")
<\/p>\n\u6298\u817e\u5176\u4ed6\u6846\u67b6\u5c1d\u8bd5<\/h2>\n
{\n path: '\/shopify\/install',\n beforeEnter(to, _from, next) {\n if (to.query.shop) { \/\/\u8981\u5728\u57df\u540d\u540e\u6dfb\u52a0\u5f00\u53d1\u7684\u5546\u5e97\u5730\u5740\n const shop = to.query.shop,\n scopes = 'read_orders,read_products,write_products', \/\/ api\u6743\u9650\n \/\/ \u91cd\u5b9a\u5411\u5730\u5740\u5c31\u662f\u5728\u521b\u5efa\u5e94\u7528\u7684\u65f6\u5019\u586b\u5199\u7684\u7b2c\u4e8c\u4e2a\uff08\u91cd\u5b9a\u5411URL\u53ef\u4ee5\u81ea\u5df1\u968f\u610f\u5199\u4e86\uff09\uff0c\u6211\u8fd9\u91cc\u662f\u57df\u540d\u52a0\/shopify\/auth\n redirect_uri = 'https:\/\/' + process.env.VUE_APP_ROOT_URL + '\/shopify\/auth', \n \/\/ \u62fc\u63a5\u5b89\u88c5\u5e94\u7528\u5730\u5740\u9700\u8981SHOPIFY_API_KEY\u6211\u586b\u5199\u5728\u6211\u7684.env\u6587\u4ef6\u4e2d\u4e86\n install_url =\n 'http:\/\/' + shop + '\/admin\/oauth\/authorize?client_id=' +\n process.env.VUE_APP_SHOPIFY_API_KEY +\n '&scope=' + scopes + '&redirect_uri=' + redirect_uri\n \/\/ \u672c\u5730\u8df3\u8f6c\u5b89\u88c5\u5730\u5740\n window.location = install_url\n } else {\n next({ path: '\/error' })\n }\n }\n },<\/code><\/pre>\n {\n path: '\/shopify\/auth',\n beforeEnter(to, _from, next) {\n \/\/ \u901a\u8fc7\u56de\u8c03\u7684url\u83b7\u53d6\u76f8\u5173\u7684\u53c2\u6570\n const shop = to.query.shop,\n hmac = to.query.hmac,\n code = to.query.code\n \/\/ \u4f7f\u7528SHOPIFY_API_SECRET_KEY\u9a8c\u8bc1 \u5e76\u4e14\u4e4b\u540e\u62ff\u53d6access_token\uff08\u8fd9\u6b65\u6ca1\u5199\uff09\n if (shop && hmac && code) {\n const map = Object.assign({}, to.query)\n delete map['signature']\n delete map['hmac']\n const message = querystring.stringify(map)\n const encrypted =\n crypto.createHmac('sha256', process.env.VUE_APP_SHOPIFY_API_SECRET_KEY)\n .update(message)\n .digest('hex')\n \/\/ const providedHmac = Buffer.from(hmac, 'utf-8')\n \/\/ const generatedHash = Buffer.from(encrypted, 'utf-8')\n\n let hashEquals = false\n\n try {\n \/\/ later: Auth fails with `crypto.timingSafeEqual`\n \/\/ hashEquals = crypto.timingSafeEqual(generatedHash, providedHmac)\n hashEquals = hmac === encrypted\n } catch (e) {\n hashEquals = false\n }\n\n if (!hashEquals) {\n next({ path: '\/error' })\n } else {\n next('\/')\n }\n } else {\n next({ path: '\/error' })\n }\n }\n }<\/code><\/pre>\n\u53c2\u8003\u6587\u6863<\/h2>\n
\n