解決済
長文になりますが、よろしくお願いいたします。
[環境について]
shopify-app-nodeをベースに作成
サーバー：heroku
DB：postgresDB
server.js
下記のコメントに従い、
// This should be replaced with your preferred storage strategy
InMemoryStorageから、CustomSessionStorageに変更しました。
storeCallback()でpostgresDBにセッションを保存に保存し、loadCallback()でセッションを取得しています。
[アプリの仕様]
アプリ内の商品登録画面で商品と商品に表示したいキャッチアイコンを登録します。
アプリ内のインストール画面でscript_tagをインストールすると同時に、assetAPIを呼び出して、ストアテーマの商品ページのliquidコードに"キャッチアイコンを表示する処理"を埋め込んでいます。
ストアを表示すると埋め込んだコードからapp_proxy経由でアプリにアクセスし、登録したキャッチアイコンを取得して表示します。
[問題]
herokuサーバーをデプロイして再起動すると、セッションかクッキーが消えてしまうせいか、アプリからストアに埋め込んだ処理が機能しなくなります。
直すにはアプリのトップページを開き、「Enable cookies」の画面を表示するとクライアントのクッキーが設定されますが、
サーバーを再起動する度にアプリのトップページを開き直さなければなりません。
[質問]
サーバーを再起動してもストアに埋め込んだのアプリの処理が機能するにはどうすれば良いでしょうか。
[推測]
複数の原因が推測され、箇所が特定できずに苦しんでいます。
①サーバー再起動時のstoreCallback(), loadCallback()がうまくいっていない。
②サーバー再起動時のloadCurrentSession()がうまくいっていない。
③初期表示時のACTIVE_SHOPIFY_SHOPSの設定処理に問題がある。
④verifyRequestで/authにリダイレクトされ続けることに問題がある。
⑤オンライントークンではなくオフライントークンを使う。
※③について、「ACTIVE_SHOPIFY_SHOPS」の定義箇所に説明がありますが、
// Storing the currently active shops in memory will force them to re-login when your server restarts. You should
// persist this object in your app.
サーバーを再起動すると、ACTIVE_SHOPIFY_SHOPS が消えます。何らかの方法で復元する必要があるというのが推測の1つです。
※④について、GithubのShopify/koa-shopify-authのIssueのどこかで見まして、「verifyRequest」が怪しいのではないかと思いましたが、verifyRequestを入れると、ページを変更するたびに/authを呼び出してしまい不具合となりました。
※⑤について、セッションはオンライントークンにしています。オフライントークンを試したのですが、loadCallback(id)のidが設定されずexceptinが発生する為、中断しました。
server.js
import "@babel/polyfill";
import dotenv from "dotenv";
import "isomorphic-fetch";
import createShopifyAuth, { verifyRequest } from "@shopify/koa-shopify-auth";
import Shopify, { ApiVersion } from "@shopify/shopify-api";
import Koa from "koa";
import next from "next";
import Router from "koa-router";
import routes from "./router/index";
import session from "koa-session";
import { getProduct } from "./controller/product";
const {
storeCallback,
loadCallback,
deleteCallback,
} = require("./database.js");
const { default: graphQLProxy } = require("@shopify/koa-shopify-graphql-proxy");
import { ApiVersion as gApiVersion } from "@shopify/koa-shopify-graphql-proxy";
dotenv.config();
const port = parseInt(process.env.PORT, 10) || 8081;
const dev = process.env.NODE_ENV !== "production";
const app = next({
dev,
});
const handle = app.getRequestHandler();
Shopify.Context.initialize({
API_KEY: process.env.SHOPIFY_API_KEY,
API_SECRET_KEY: process.env.SHOPIFY_API_SECRET,
SCOPES: process.env.SCOPES.split(","),
HOST_NAME: process.env.HOSTLT.replace(/https:\/\//, ""),
API_VERSION: ApiVersion.October20,
IS_EMBEDDED_APP: true,
// This should be replaced with your preferred storage strategy
SESSION_STORAGE: new Shopify.Session.CustomSessionStorage(
storeCallback,
loadCallback,
deleteCallback
),
});
// Storing the currently active shops in memory will force them to re-login when your server restarts. You should
// persist this object in your app.
const ACTIVE_SHOPIFY_SHOPS = {};
// ↓機能しない
console.log("ACTIVE_SHOPIFY_SHOPS設定");
const tmpSession = loadCallback();
console.log("tmpSession確認", tmpSession);
if (tmpSession?.shop && tmpSession?.scope) {
console.log("session取得成功", tmpSession);
ACTIVE_SHOPIFY_SHOPS[tmpSession.shop] = tmpSession.scope;
}
app.prepare().then(async () => {
const server = new Koa();
const router = new Router();
server.use(session({ secure: true, sameSite: "none" }, server));
server.keys = [Shopify.Context.API_SECRET_KEY];
server.use(
createShopifyAuth({
async afterAuth(ctx) {
console.log("afterAuth");
// Access token and shop available in ctx.state.shopify
const { shop, accessToken, scope } = ctx.state.shopify;
const host = ctx.query.host;
ACTIVE_SHOPIFY_SHOPS[shop] = scope;
const response = await Shopify.Webhooks.Registry.register({
shop,
accessToken,
path: "/webhooks",
topic: "APP_UNINSTALLED",
webhookHandler: async (topic, shop, body) =>
delete ACTIVE_SHOPIFY_SHOPS[shop],
});
if (!response.success) {
console.log(
`Failed to register APP_UNINSTALLED webhook: ${response.result}`
);
}
// Redirect to app with shop parameter upon auth
ctx.redirect(`/?shop=${shop}&host=${host}`);
},
})
);
async function injectSession(ctx, next) {
const session = await Shopify.Utils.loadCurrentSession(ctx.req, ctx.res);
ctx.sessionFromToken = session;
console.log("middleware", session);
if (session?.shop && session?.accessToken) {
const client = new Shopify.Clients.Rest(
session.shop,
session.accessToken
);
ctx.myClient = client;
}
console.log("ctx.myClient:", JSON.stringify(ctx.myClient));
return next();
}
const handleRequest = async (ctx) => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;
};
server.use(injectSession);
server.use(routes());
router.post("/webhooks", async (ctx) => {
try {
await Shopify.Webhooks.Registry.process(ctx.req, ctx.res);
console.log(`Webhook processed, returned status code 200`);
} catch (error) {
console.log(`Failed to process webhook: ${error}`);
}
});
router.post(
"/graphql",
verifyRequest({ returnHeader: true }),
async (ctx, next) => {
console.log("/graphql");
await Shopify.Utils.graphqlProxy(ctx.req, ctx.res);
}
);
router.get("(/_next/static/.*)", handleRequest); // Static content is clear
router.get("/_next/webpack-hmr", handleRequest); // Webpack content is clear
router.get("(/static/images/.*)", handleRequest); // 画像関係
// router.get("(.*)", verifyRequest(), handleRequest); // Everything else must have sessions
router.get("(.*)", async (ctx) => {
const shop = ctx.query.shop;
// This shop hasn't been seen yet, go through OAuth to create a session
if (ACTIVE_SHOPIFY_SHOPS[shop] === undefined) {
ctx.redirect(`/auth?shop=${shop}`);
} else {
await handleRequest(ctx);
}
});
server.use(router.allowedMethods());
server.use(router.routes());
server.listen(port, () => {
console.log(`> Ready on http://localhost:${port}`);
});
});
database.js
const { Client } = require("pg");
const { Session } = require("@shopify/shopify-api/dist/auth/session");
require('dotenv').config();
const ssl =
process.env.NODE_ENV === "production"
? {
require: true,
rejectUnauthorized: false,
}
: null;
console.log("postgres ssl: ", ssl);
const connection = new Client({
user: `${process.env.PSQL_USER}`,
password: `${process.env.PSQL_PASSWORD}`,
host: `${process.env.PSQL_HOST}`,
port: `${process.env.PSQL_PORT}`,
database: `${process.env.PSQL_DATABASE}`,
ssl,
});
connection.connect();
let domain = "";
async function storeCallback(session) {
try {
let data = session;
console.log("storeCallback session", data);
if (data.shop == undefined) return false;
data.onlineAccessInfo = JSON.stringify(session.onlineAccessInfo);
if (data.id.indexOf(`${data.shop}`) > -1) {
domain = data.id;
}
let query = new Promise((resolve, reject) => {
connection
.query(
`INSERT INTO shops (shop, session_id, domain_id, "access_token", scope, state, "is_online", "online_access_info") VALUES('${data.shop}', '${data.id}', '${domain}', '${data.accessToken}', '${data.scope}', '${data.state}', '${data.isOnline}', '${data.onlineAccessInfo}')
ON CONFLICT (shop) DO UPDATE
SET session_id = '${data.id}',
domain_id = '${domain}',
scope = '${data.scope}',
state = '${data.state}',
access_token = '${data.accessToken}',
"online_access_info" = '${data.onlineAccessInfo}'
;`
)
.then((results) => {
console.log("storeCallback", results);
}) // access_tokenを勝手に追加➔あとから見ると正しかった
.catch((e) => {
throw e;
});
resolve();
});
await query;
return true;
} catch (err) {
if (err) throw err;
}
}
async function loadCallback(id) {
try {
console.log("loadCallback", id);
if (!id) return false;
const session = new Session(id);
let query = new Promise((resolve, reject) => {
connection
.query(
`SELECT * FROM shops WHERE session_id='${id}' OR domain_id='${id}' LIMIT 1`
)
.then((results) => {
// console.log("results.rows", results.rows)
session.shop = results.rows[0].shop;
session.state = results.rows[0].state;
session.isOnline = results.rows[0].is_online == "true" ? true : false;
session.onlineAccessInfo = results.rows[0].online_access_info;
session.accessToken = results.rows[0].access_token;
session.scope = results.rows[0].scope;
const date = new Date();
date.setDate(date.getDate() + 1);
session.expires = date;
resolve();
})
.catch((e) => {
throw e;
});
});
await query;
return session;
} catch (err) {
if (err) throw err;
}
return false;
}
async function deleteCallback(id) {
try {
return false;
} catch (err) {
if (err) throw err;
}
}
コミュニティ・ブログ記事
ゴムの街とも呼ばれる久留米の老舗工場で作成されたスニーカーを販売しているPERSICAストア。Shopifyを選ぶ理由と商品への思い。
By Mirai May 29, 2023
EコマースのEメールマーケティングは適切なタイミングで、適切にパーソナライズされたメッセージを顧客に届ける方法であり、厳しさを増すインターネットの規制を受ける必要もありません。こ...
By Nanami May 21, 2023
自分が一から立ち上げた独自店舗型のネットショップでは、個人が運営するショップや聞いたこともないブランドに不安を感じる顧客はたくさんいます。そのため、信頼がおけるネットショップを作り...
By rinaflora Apr 19, 2023