FROM CACHE - jp_header

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

koshiba
Shopify Partner
2 0 1

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

 

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

 

1件の返信1

koshiba
Shopify Partner
2 0 1

半分自己解決です。。。

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

 

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

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

 

 

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