<p>ShopifyでStoreFront APIを使用してカスタムECフロントを構築するときに必要なアクセストークンの取得方法に迷ったので記録しておきます。<br></p><h2 id="h45e205c088">プライベートアプリの作成</h2><p><span style="color:#2b2e2f">パートナーアカウントの管理画面からではなく、開発ストアの管理画面から操作を行う。</span><br>開発ストア管理画面にて「アプリ管理」の「プライベートアプリを管理する」をクリック。<br>プライベートアプリを有効にしていない場合は、プライベートアプリを有効にする。<br>プライベートアプリを作成し、<span style="color:#212326">アプリからアクセスするストアのエリアを設定する（後から変更可能）。</span><br><strong style="color:#212326;background-color:#ffffff">[このアプリがストアフロントのAPIを使用してストアフロントデータにアクセスできるようにする]</strong><span style="color:#212326">&nbsp;を選択する（後から変更可能）。</span><br><span style="color:#212326">保存すると、アクセストークンが表示される。</span><br><img src="https://images.microcms-assets.io/assets/702dbaa8dfa34d1195fd2644792b2156/ff3fc7602dd674490b1aedc31ccf263c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-01-10%2017.33.28.png" alt=""><br></p><h2 id="h820121bfb3">疎通確認</h2><p>curlで疎通確認する。レスポンスが帰ってくれば問題無し。</p><pre><code>$ curl -X POST \
&gt; "https://eringiv3test.myshopify.com/api/2020-10/graphql" \
&gt; -H "Accept: application/json" \
&gt; -H "Content-Type: application/graphql" \
&gt; -H "X-Shopify-Storefront-Access-Token: &lt;storefront-access-token&gt;" \
&gt; -d '
&gt; {
&gt;&nbsp; &nbsp;shop {
&gt;&nbsp; &nbsp; &nbsp;name
&gt;&nbsp; &nbsp; &nbsp;primaryDomain {
&gt;&nbsp; &nbsp; &nbsp; &nbsp;url
&gt;&nbsp; &nbsp; &nbsp; &nbsp;host
&gt;&nbsp; &nbsp; &nbsp;}
&gt;&nbsp; &nbsp;}
&gt; }
&gt; '
{"data":{"shop":{"name":"eringiv3test","primaryDomain":{"url":"https:\/\/eringiv3test.myshopify.com","host":"eringiv3test.myshopify.com"}}}}</code></pre><p><br></p><h2 id="h282b720588">関連リンク</h2><p>storefront api document: <a href="https://shopify.dev/docs/storefront-api" target="_blank" rel="noopener noreferrer">https://shopify.dev/docs/storefront-api</a><br></p><h2 id="h3de35099b3">参考</h2><p><a href="https://help.shopify.com/ja/manual/apps/private-apps" target="_blank" rel="noopener noreferrer">https://help.shopify.com/ja/manual/apps/private-apps</a></p>

eringiv3.dev

Category: Shopify

Shopify StoreFront AccessTokenの取得方法

ShopifyのStorefront APIを使用してNext.js製のECフロントを構築した