Shopify Public アプリの OAuth scope を後から変更する方法
ユーザーのインストール後に Shopify Public アプリの OAuth scope を変更する方法をまとめます。
この記事は『Shopify開発を盛り上げる（Liquid, React, Node.js, Graph QL） Advent Calendar 2020』の19日目の記事です。
OAuth scope とは
OAuth scope とは、ストア情報へのアクセス権限の範囲です。Shopify Public アプリでは、まずインストール時の OAuth 認証で、アプリに必要な scope を承認してもらいます（下図の赤枠の部分）。
(Authenticate with OAuth | Shopify Developers より)
OAuth 認証の承認ページのURLは、次の通りです。
https://{shop}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope={scopes}&redirect_uri={redirect_uri}&state={nonce}
このURLにリダイレクトして許可をもらいます。scope={scopes} に、アプリが必要なアクセス権限をカンマ区切りの文字列で持たせます。
例えば、注文の更新権限と、商品の閲覧権限が必要な場合は、
scope=write_orders,read_products
となります。
アクセス権限の一覧：こちら
scope の変更方法
一度インストールされたアプリの scope を変更したい場合は、再度 OAuth 認証フローに誘導し、新しいアクセス権限を承認してもらいます。
具体的には、インストール時の「OAuth 認証の承認ページのURL」の {scopes} の値を新しいアクセス権限に変更し、同ページにリダイレクトして承認をもらえばOKです。
その後のフローは、インストール時の OAuth 認証（前述のフローチャート）と同様です。
注意点
個人的にハマったポイントを共有します。
承認ページが開けない？
OAuth 認証の承認ページにリダイレクトした時に、次のようなエラーが出る場合があります。
example-store.com refused to connect.
(How to add new scope to an existing public app | Shopify Community より)
これは管理画面へのアプリ埋め込みに使われている iframe が原因のエラーです。
解決方法
window.top.location = [AUTHORIZE_URL] や <a href="[AUTHORIZE_URL]" target="_blank"> などで iframe を避けるようにすれば、エラーは解消します。
gem shopify_app を使っている場合は、fullpage_redirect_to [AUTHORIZE_URL] でも iframe を回避できるみたいです。
参考：How to re-auth shop for new scope? #578 | shopify_app
エラーなしで完了したが scope が更新されない？
エラーなしで OAuth 認証フローが完了したにも関わらず、アクセス権限が更新されないという事象に出くわしました。
長時間デバッグしてようやく判明したのですが、scope 更新完了後に旧アクセス権限の OAuth 認証の承認ページを踏んでいたことが原因でした。
具体的には read_orders から write_orders への更新後に、再度 read_orders の OAuth 認証の承認ページにリダイレクトしてしまっていました。
このようにアクセス権限を狭める変更（write → read）は追加の承認が不要らしく、気づかないうちに旧アクセス権限に戻ってしまっていたようです。。
解決方法
scope 更新後は、旧アクセス権限の OAuth 認証の承認ページに遷移しないようにすればOKです。
まとめ
- インストール後の scope 変更も、通常の OAuth 認証と同じフローになる。
- OAuth 認証の承認ページが開けないときは
iframeを避けるようにする。 -
scope更新後は、旧アクセス権限の OAuth 認証の承認ページを踏まないようにする。
Discussion