Shopify App CLI を使ってHeroku deployを行うと認証がうまくいきません

[AndanteSysDes]

はじめまして。

アプリ開発についての質問です。

Shopify App CLIを使って開発を進めようとしています。
'shopify create node' でアプリを作成し、初期状態のままHerokuにデプロイしようとしましたが、うまくいかないのでアドバイスをいただければと思います。

私が実行した手順は以下です。

1. コンソールで'shopify create node'をたたいてアプリを作成
2. 'shopify deploy heroku'をたたいてHerokuアプリをデプロイ
3. Heroku Config Varsに、1.で作成された.envファイルにセットされている変数を転記
4. Heroku Config Varsに、'HOST:　https://[Herokuアプリのドメイン] ' を追記
5. Shopifyパートナーダッシュボードから、アプリURLに以下のように設定
   1. アプリURL：　https://[Herokuアプリのドメイン]
   2. リダイレクトURLの許可：　https://[Herokuアプリのドメイン]/callback
6. ダッシュボードの「アプリをテストする」から、3.で設定した開発ストアを選択
7. 添付のエラーページに遷移し、アプリインストールは完了しない

（以下、補足情報です）

• 同じプロジェクトファイルで、shopify serveを実行し、5.のURLをngrokのものに自動で書き換えると、インストール許可画面にリダイレクト成功する。
• 5.b.のURLを、https://[Herokuアプリのドメイン]/auth/callbackに変更しても7.と同じ事象が発生する。
• ブラウザのキャッシュ・Cookieのクリア、別ブラウザでの挙動を確認したが、同事象が発生する。
• Shopify app CLIのバージョンは1.6.0
• Herokuのログを確認すると、以下にリダイレクトしているのが確認できる。エラーは出ていない。（一部省略しています）

2021-03-05T05:32:02.842644+00:00 heroku[router]: at=info method=GET path="/?hmac=...&shop=[開発ストアのドメイン]&timestamp=1614922322" host=[Herokuアプリのドメイン] request_id=... fwd="..." dyno=web.1 connect=1ms service=4ms status=302 bytes=302 protocol=https
2021-03-05T05:32:03.027100+00:00 heroku[router]: at=info method=GET path="/auth?shop=[開発ストアのドメイン]" host=[Herokuアプリのドメイン] request_id=... fwd="..." dyno=web.1 connect=2ms service=8ms status=200 bytes=16553 protocol=https
2021-03-05T05:32:03.414117+00:00 heroku[router]: at=info method=GET path="/auth/inline?shop=[開発ストアのドメイン]" host=[Herokuアプリのドメイン] request_id=... fwd="..." dyno=web.1 connect=10ms service=12ms status=302 bytes=1656 protocol=https

Herokuにデプロイするとproductionモードになるようですが、何か関係あるのでしょうか。

また、調べてみると、以下のようなIssueもあったのですが、CLIのアップデートに伴い手動でモジュールを操作する必要がありますでしょうか。

https://github.com/Shopify/shopify-app-cli/issues/277

初歩的な質問になるかもしれませんが、ご回答いただけると助かります。

[junichiokamura]

エラーメッセージを見ると、callbackにリダイレクトしようとして、そのURLがアプリの設定のwhitelistのURLに登録されていないエラーのように見えます。

Githubのエラーメッセージと異なるので原因は違いそうですが、ダッシュボードの「このストアでテストする」ではなくて、ブラウザから直接HerokuのURLか、または以下のURLを叩いてみてはどうでしょうか？

https://YOUR_SHOP_DOAMIN/admin/oauth/authorize?client_id=YOUR_API_KEY&scope=read_products,write_products,read_script_tags,write_script_tags&redirect_uri=https://YOUR_APP_DOMAIN_LIKE_HEROKU/callback&state=&grant_options[]=

[AndanteSysDes]

返答ありがとうございます。

＞ブラウザから直接HerokuのURLか、または以下のURLを叩いてみてはどうでしょうか？

色々と試行してみて、インストールができるときと、ページが表示できないときがあります。
何がトリガーでエラーが再現されるのかがいまいちつかめないのですが、
以下の流れで少し進めるようになりました。
リダイレクトURLを変更してからすぐにアクセスしようとしたのが不具合の原因でしょうか…？

---

◇リダイレクトURLを、https://[Herokuアプリのドメイン]/auth/callback　または　
https://[Herokuアプリのドメイン]/callback　のどちらかのみ記載の場合

• HerokuアプリをURLそのまま開く　→https://undefined/admin/oauth/... に遷移します
• https://YOUR_APP_DOMAIN_LIKE_HEROKU/auth?shop=YOUR_SHOP_DOAMIN　→エラーページに遷移します
• https://YOUR_SHOP_DOAMIN/admin/oauth/authorize?client_id=YOUR_API_KEY&scope=read_products,write_products,read_script_tags,write_script_tags&redirect_uri=https://YOUR_APP_DOMAIN_LIKE_HEROKU/callback&state=&grant_options[]=　→エラーページに遷移します

↓
◇Herokuのログが/auth/inlineにリダイレクトしてたので、試しにホワイトリストに加え、
　/auth/callbackと/callbackも記載しました。

• ダッシュボードの「このストアでテストする」　→エラーページに遷移します
• https://YOUR_SHOP_DOAMIN/admin/oauth/authorize?client_id=YOUR_API_KEY&scope=read_products,write_products,read_script_tags,write_script_tags&redirect_uri=https://YOUR_APP_DOMAIN_LIKE_HEROKU/callback&state=&grant_options[]=　→認証許可画面に遷移

↓
◇もう一度リダイレクトURLをhttps://[Herokuアプリのドメイン]/callback　のみの記載に戻す

• ダッシュボードの「このストアでテストする」　→エラーページに遷移します
• https://YOUR_SHOP_DOAMIN/admin/oauth/authorize?client_id=YOUR_API_KEY&scope=read_products,write_products,read_script_tags,write_script_tags&redirect_uri=https://YOUR_APP_DOMAIN_LIKE_HEROKU/callback&state=&grant_options[]=　→認証許可画面に遷移※

※このとき認証許可ボタンを押すとエラーページに遷移します。
　ただ、パートナーダッシュボード上ではインストールが完了しています。
　開発ショップでアプリページを開くと、エラーページに遷移します。

---

同じソースで、数日前にも別のHerokuアプリを作成していたのですが、
こちらもリダイレクトURLをあれこれいじって、たまたま認証許可画面が出たから開発ストアにインストールできた…という感じでした。（その時も、認証許可後はエラーページに飛んだ記憶があります。）
数日前のほうのアプリは、今日はページ表示できています。リダイレクト許可は/callbackと/auth/callbackの両方を書いていました。

→リダイレクトは/callbackと/auth/callbackの両方を記載して、エラーが出たらしばらく時間をおく、というのが正解なのでしょうか…？

[junichiokamura · Accepted solution]

具体的なエラー画面とHerokuのログをみてみないと詳細はわからないですが、ブラウザキャッシュとかは関係ないと思います。

> →リダイレクトは/callbackと/auth/callbackの両方を記載して、エラーが出たらしばらく時間をおく、というのが正解なのでしょうか…？

いえ、こういったことはありません。まず事象を整理するために、一旦Herokuは置いて、nggrok でホストして、ngrokのURLをブラウザで直接叩いて（ダッシュボードのテストボタンは使わずに）、正常に動くところまで持っていくのはどうでしょうか？

インストールがうまくいかない主な原因は、whitelistのリダイレクトが間違っている、（http httpsの違いも認識されます）

APIのキーとシークレットが間違っている、読み込めてない、（CLIで作ったコードはenv から読み込む仕様なので、heroku変数は参照しないはずですが、CLIのherokuデプロイは使ったことがないので定かでないです。）

ちなみに、最新のドキュメントからdeployコマンドが削除されているので、現在は非推奨かもしれません。
https://shopify.dev/tools/cli/reference

私のおすすめは、まずngrokでブラウザ経由でインストールできるようにしてから、herokuへのデプロイは、CLIではなくて、直接やるのが良いかと思います。

[AndanteSysDes]

返答ありがとうございます。

解決しました。原因は、Heroku側の環境変数に設定されたHOSTの値だったようです。

誤：　'HOST:　https://[Herokuアプリのドメイン] /'

正：　'HOST:　https://[Herokuアプリのドメイン] '

ngrokでは正常にインストールに進んでいたので、設定されている環境変数をログに吐き出して突き合わせたら判明しました…。

お騒がせいたしました。

＞ちなみに、最新のドキュメントからdeployコマンドが削除されているので、現在は非推奨かもしれません。

Node用のページには記載があったので使っていました。

https://shopify.dev/tools/cli/reference/node-app