顧客アカウント（Customer Account API）
ログイン・ログアウト・注文一覧をCustomer Account APIで実装できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、ログイン・ログアウト・注文一覧をCustomer Account API（ログイン済みの購入者として自分のデータを扱うAPI）で実装できるようになります。
受託では、ヘッドレスでも「マイページ」は必ず求められるので、ルート3本とhandleAuthStatusで作れる型を覚えておきます。
新しい顧客アカウント専用
パスワードレス（メールのワンタイムコード）でログインし、OAuth 2.0（PKCE）でトークンを得ます。
この流れは、HydrogenのcreateCustomerAccountClient（context.tsで初期化）が隠してくれます。
従来型（パスワード式）の顧客アカウントでは使えません。
ルートは3本で足りる
account_.login.tsx（customerAccount.login()）、account_.authorize.tsx（authorize()）、account_.logout.tsx（logout()）の3本です。
テンプレートに含まれています。
ログイン必須のページはどう守るか
loaderでawait context.customerAccount.handleAuthStatus()を呼びます。
未ログインなら、ログインへ飛びます。
顧客データはcontext.customerAccount.query(QUERY)で取ります。
たとえばcustomer { firstName orders(first: 10) { nodes { name totalPrice } } }のように書きます。
Admin APIは経由しません。
発展：開発には公開URLが要る
Hydrogenチャネルのストアフロント設定でCustomer Account APIを有効にし、コールバックURIとJavaScriptオリジンを登録します。
`localhost`は使えず、公開URL（Oxygenプレビューやトンネル）で開発します。
要件は公式で確認してください。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。