Cookieを使用せずにコールバックを受けたときにshop名を取得する方法が知りたいです

[haruyasu]

現在、Shopify CLIを使用してアプリを開発しております。

■現状

下記コードはshop名をcookieに保存しています。

chromeでアプリ管理画面(router.get('/'))にアクセスしたときに、認証することができずリダイレクトループが発生してしまいます。

  server.use(
    createShopifyAuth({
      async afterAuth(ctx) {
        const { shop, accessToken, scope } = ctx.state.shopify
        ACTIVE_SHOPIFY_SHOPS[shop] = scope

       // sameSiteをnoneに設定すると、chromeでアクセスしたときにリダイレクトループ発生
       // sameSiteをLaxに設定すると、chromeでは問題ないが、safariでは取得できない
        ctx.cookies.set('shopOrigin', shop, {
          httpOnly: false,
          secure: true,
          sameSite: 'none',
        })
        .....
    })
  ) 

 router.get('/', async (ctx) => {
    const shop = ctx.query.shop

    if (ACTIVE_SHOPIFY_SHOPS[shop] === undefined) {
      ctx.redirect(`/auth?shop=${shop}`) // 認証がうまくいかず、ここでリダイレクトループが発生
    } else {
      await handleRequest(ctx)
    }
  })

■やりたいこと

コールバックを受けたときにShop名を取得したい。

cookieを使用せずに、外部からのコールバック(router.get('/callback'))を受けたときに、shop名を取得する方法はありますでしょうか？

cookieを使用すると、chrome、Edge、Safariなどブラウザ毎に挙動が異なるので、困っています。

ぜひアドバイスをよろしくお願い致します。

  router.get('/callback', async (ctx) => {
    const shop = ctx.cookies.get('shopOrigin') // ここでcookieを使用せずshop名を取得したい！
    // const { shop } = ctx.session // これも取得できない
    // const url = new URL(ctx.request.header.referer) // safariでアクセスしたときに取得できない
    ....
  }

[haruyasu · Accepted solution]

クエリパラメータでshop名を渡すように変更しましたので、cookieは使用する必要がなくなりました。

ありがとうございました。