現在、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でアクセスしたときに取得できない
....
}
