埋め込みアプリの開発でiFrameの中に表示するには？

[koshiba]

開発者の皆様、こんにちは

現在、Shopifyアプリを開発するべく勉強中です。

NodeのExpressを使って開発を考えており、下記のGitの通り試して

アクセストークンまでは取得できました。

■閲覧中のGitHub

https://github.com/Shopify/shopify-node-api

下記のコードの最後に

return res.redirect(`/?host=${req.query.host}&shop=${req.query.shop}`);

とあり、リダイレクトすると自分で立てたサーバーのルートにリダイレクトされ、管理画面は消えて、埋め込みアプリとなりません。

インストール完了後、Shopify管理画面の中のiFrameに自分で立てたサーバーの出力を出すにはどうしたらいいのでしょうか？

初期化時のオプションの埋め込みアプリ指定はtrueにしております。

調べたのですが、わからず・・ご存じであればご教授いただけないでしょうか。

よろしくお願い致します。

■初期化時のオプション

Shopify.Context.initialize({
・・・
  IS_EMBEDDED_APP: true,
・・・
});

■Oauth最後のプロセスのコード

app.get('/auth/callback', async (req, res) => {
  try {
    const session = await Shopify.Auth.validateAuthCallback(
      req,
      res,
      req.query as unknown as AuthQuery,
    ); // req.query must be cast to unkown and then AuthQuery in order to be accepted
    ACTIVE_SHOPIFY_SHOPS[SHOP] = session.scope;
    console.log(session.accessToken);
  } catch (error) {
    console.error(error); // in practice these should be handled more gracefully
  }
  return res.redirect(`/?host=${req.query.host}&shop=${req.query.shop}`); // wherever you want your user to end up after OAuth completes
});

[koshiba]

半分自己解決です。。。

ドキュメントを探していると、下記のVIDEOの中で管理画面のURLに直接リダイレクトすると解説がありました。こちらの方法が正攻法なのかわからないですが、一旦解決しましたので記載しておきます。

■ビデオ（21分30秒ごろ）

https://www.youtube.com/watch?v=oKGR9RVCUDs

res.redirect(`https://${session.shop}/admin/apps/****app name****`);