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

Topic summary

テーマ: Shopifyの埋め込みアプリをOAuth後に管理画面内のiFrameで表示する方法。

  • 状況: Node/Express+shopify-node-apiで開発。アクセストークン取得は成功。IS_EMBEDDED_APPはtrue。/auth/callbackで /?host=...&shop=... にリダイレクトすると自サーバーのルートが表示され、Shopify管理画面が消え埋め込みにならない。

  • 技術ポイント: リダイレクト先が自サーバー直指定だと埋め込みコンテキストが外れる。埋め込みアプリは管理画面内の特定URL配下で開く必要がある。

  • 最新の更新/解決: 公式動画(約21:30)を参考に、OAuth完了後は https://{shop}/admin/apps/{app-name} へリダイレクトする実装に変更。これにより管理画面内iFrameでアプリが表示されることを確認。

  • 補足と現状: この方法が正式な推奨かは未確認だが、動作上の問題は一旦解消。動画リンクが解決に重要。議論は実質クローズ。

Summarized with AI on February 15. AI used: gpt-5.

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

現在、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
});

半分自己解決です。。。

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

■ビデオ(21分30秒ごろ)

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

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