Portfolioこの記事について
顧客がマイページを開くと、裏側でPOSにポイント残高を問い合わせます。この処理は数秒以内に完了し、顧客は待たされることなくポイントを確認できます。その仕組みを詳しく解説します。
フローの全体像
ステップバイステップの流れ
マイページへアクセス
顧客がログイン後、マイページにアクセス
認証トークン確認
サーバーでセッショントークンの有効性を検証
顧客ID特定
トークンからShopify顧客IDを取得
会員番号抽出
Shopify顧客IDから数字部分（会員番号）を抽出
POS問い合わせ
会員番号でPOSの顧客情報を検索
ポイント取得
POSから現在のポイント残高を取得
画面表示
取得したポイントをマイページに表示
各ステップの詳細
ステップ1-2: アクセスと認証
認証フロー
顧客ブラウザ
マイページにアクセス（Cookie: sessionToken を送信）
自社サーバー
トークン検証（有効期限チェック、署名検証）
結果: 認証OK → マイページ表示 / 認証NG → ログイン画面へリダイレクト
ステップ3-4: 顧客IDの処理
ID変換の流れ
Shopify顧客ID（GraphQL形式）
gid://shopify/Customer/8840734670934
数字部分を抽出
8840734670934
POS検索に使用
この数字がPOSの会員番号として照合に使われる
ステップ5-6: POS問い合わせ
POSへの問い合わせ
自社サーバー
顧客検索リクエスト（会員番号: 8840734670934）
POSシステム
顧客データ検索
ステップ7: 画面表示
エラーハンドリング
起こりうるエラーと対処
エラー時のフォールバック表示
エラー時の画面表示例
顧客名は表示しつつ、ポイント部分のみエラー表示にします。
ポイント: エラーでも他の機能は使え、再試行の選択肢を提示
パフォーマンス最適化
処理時間の内訳
ボトルネック: POS API呼び出しが大半を占めるため、改善にはPOS側の対応が必要
ローディングUXの工夫
セキュリティ考慮事項
他人のポイントを見せない仕組み
所有権検証の流れ
リクエスト受信
認証トークン（顧客Aのもの）と取得対象（顧客Aのポイント）を受け取る
検証
トークンの顧客ID = リクエストの顧客ID → 一致ならOK
結果
一致 → ポイント返却 / 不一致 → 403エラー、アクセス拒否
この仕組みがもたらす効果
顧客体験
- ページを開くだけで最新ポイントを確認
- 待ち時間は1秒以内で快適
- エラー時も適切なフィードバック
システム面
- 認証と認可を適切に分離
- エラー時も他機能に影響しない
- パフォーマンスの可視化と改善が可能