インストール後、請求をキャンセルし再びアプリを開くと請求画面にリダイレクトされない

[Hirano_00]

CLIのnodeテンプレートアプリに定期請求を実装しました。

アプリをインストール→請求のキャンセル→アプリにアクセス時、無限にリダイレクトします。

デバッグ中は請求画面にリダイレクトされますが、Herokuにデプロイすると上記の現象が起こります。

解決方法のご教授お願い致します。

index.js

import { join } from "path";
import { readFileSync } from "fs";
import express from "express";
import serveStatic from "serve-static";

import shopify from "./shopify.js";
import GDPRWebhookHandlers from "./gdpr.js";
import { requestBilling } from "./billing.js";

const PORT = parseInt(
  process.env.BACKEND_PORT || process.env.PORT || "3000",
  10
);

const STATIC_PATH =
  process.env.NODE_ENV === "production"
    ? `${process.cwd()}/frontend/dist`
    : `${process.cwd()}/frontend/`;

const app = express();

// Set up Shopify authentication and webhook handling
app.get(shopify.config.auth.path, shopify.auth.begin());
app.get(
  shopify.config.auth.callbackPath,
  shopify.auth.callback(),
  requestBilling,
  shopify.redirectToShopifyOrAppRoot()
);
app.post(
  shopify.config.webhooks.path,
  shopify.processWebhooks({ webhookHandlers: GDPRWebhookHandlers, }),
);

app.use("/api/*", shopify.validateAuthenticatedSession());
app.use(express.json());

app.use(shopify.cspHeaders());
app.use(serveStatic(STATIC_PATH, { index: false }));

app.use("/*", shopify.ensureInstalledOnShop(),
  requestBilling,
  async (_req, res, _next) => {
  return res
    .status(200)
    .set("Content-Type", "text/html")
    .send(readFileSync(join(STATIC_PATH, "index.html")));
});

app.listen(PORT);

billing.js

import shopify, { billingConfig } from "./shopify.js";

export const requestBilling = async (req, res, next) => {
  console.debug('Start checking billing');

  const plans = Object.keys(billingConfig);
  let session = res.locals.shopify?.session;
  const isAuth = !session ? false : true;

  if(!isAuth) {
    session = await getRequestShopSession(
      shopify.api,
      shopify.config,
      req,
      res
    );
  }
  const isTest = process.env.NODE_ENV !== 'production';
  const hasPayment = await shopify.api.billing.check({session, plans, isTest});

  if (hasPayment) {
    next();
  } else {
    const redirectUri = await shopify.api.billing.request({session, plan: plans[0], isTest});
    if(isAuth) {
      res.redirect(redirectUri);
    }
    else {
      shopify.redirectOutOfApp({
        req,
        res,
        redirectUri: redirectUri,
        shop: shopify.api.utils.sanitizeShop(req.query.shop),
      });
    }
  }
};

const getRequestShopSession = async(api, config, req, res) => {
  const shop = shopify.api.utils.sanitizeShop(req.query.shop);
  if (!shop) {
    return undefined;
  }
  config.logger.debug('Checking if shop has installed the app', {
    shop
  });
  const sessionId = api.session.getOfflineId(shop);
  const session = await config.sessionStorage.loadSession(sessionId);
  return session;
}

環境

• @Shopify/shopify-api:バージョン:7.3.1
• node version: 18.15.0
• OS: M1 Mac

[Hirano_00 · Accepted solution]

フロントエンド経由で請求画面にリダイレクトすることで解決しました。