PWA Kit v2 向けハイブリッド認証の実装

このガイドでは、PWA Kit アプリケーションをバージョン 2.10.0 にアップグレードし、ハイブリッド認証を実装する方法について説明します。PWA Kit 2.10.0 リリースでは、ハイブリッド認証との互換性や @salesforce/commerce-sdk-react パッケージとの統合など、重要な変更が導入されています。PWA Kit v2.10.0 は、SLAS パブリッククライアントのみをサポートします。詳細については、pwa-kit GitHub diff 全体を確認して、コード変更について理解を深めてください。

アップグレードを開始する前に、以下を満たしていることを確認してください。

• Node.js バージョン 18.x または 20.x (14.x/16.x のサポートからアップグレード)
• NPM バージョン 9.x または 10.x (6.x/7.x/8.x のサポートからアップグレード)
• Business Manager インスタンスでハイブリッド認証を有効にし、Managed Runtime で Cookie を有効にしていること。詳細については、ハイブリッド認証を参照してください。

最も重要な更新は、新しい Commerce SDK React 認証システムの導入です。

1. 現在の Node.js と npm のバージョンを確認します。

   Node.js バージョンが 18.x 未満の場合は、先にアップグレードしてください。npm のバージョンが 9.x 未満の場合も、先にアップグレードしてください。

1. package.json ファイルを開き、次のセクションを更新します。

   "engines" セクションを更新します。

   "devDependencies" セクションを更新して、次の依存関係を追加またはバージョン更新します。

2. package.json ファイルを保存します。

3. 新しい依存関係をクリーンインストールします。

1. config/default.js ファイルを開きます。

2. ssrFunctionNodeVersion を含む行を見つけて更新します。

3. config/default.js ファイルを保存します。

新しい Commerce SDK React システムを使用するように、認証実装を更新します。

1. 古い認証ファイルを削除します。

2. utils.js ファイルを更新します。

   ファイルの先頭から、次の import を削除します。

   app/commerce-api/utils.js から、次の関数を削除します。

   keysToCamel や createOcapiFetch など、その他のユーティリティ関数は引き続き必要なため、そのまま残します。

3. useCustomer フックを更新します。app/hooks/use-customer.js ファイルを開き、認証メソッドを更新します。

1. app/commerce-api/index.js ファイルを開きます。

2. ファイルの先頭にある import を更新します。

3. auth モジュールのインスタンス化を更新します。

   次の新しいコードに置き換えます。

4. SDK クライアントがインスタンス化されているセクション (100 行目から 150 行目付近) を見つけて、SDK インスタンス化ロジック全体を置き換えます。 次の古いコードを削除します。

   次の新しいコードに置き換えます。

5. CommerceAPI クラスから、次のメソッドを見つけて削除します。

6. 定数ファイルを更新します。 app/commerce-api/constants.js に新しい定数を追加します。

1. app/commerce-api/contexts.js ファイルを開きます。

2. ファイルの先頭に、次の import を追加します。

3. import の後に、QueryClient の構成を追加します。

4. 既存の CommerceAPIProvider を、次の新しい実装に置き換えます。

5. app/commerce-api/contexts.js ファイルを保存します。

1. app/components/_app-config/index.jsx ファイルを開きます。

2. CommerceAPIProvider コンポーネントを見つけて更新します。

   次のコードを:

   次のコードに置き換えます。

3. app/components/_app-config/index.jsx ファイルを保存します。

1. app/components/_app/index.jsx ファイルを開きます。

2. login 呼び出しを削除します。

1. 開発サーバーを起動します。

2. ビルドを実行して、エラーがないことを確認します。

PWA Kit v2.10.0 では、@salesforce/commerce-sdk-react の強力なクエリフックを使用できるようになりました。これらのフックは、ハイブリッドおよび非ハイブリッドの両方の PWA Kit v2.x ストアフロントで、自動キャッシュ、読み込み状態、エラー処理を提供します。ページでの使用方法は次のとおりです。

新しいクエリフックを使用して、最小限の注文リストコンポーネントを作成します。

新しいクエリフックの主なメリットは次のとおりです。

• 自動キャッシュ - データがキャッシュされ、共有されます。
• 読み込み状態 - 読み込み状態の管理が組み込まれています。
• エラー処理 - エラー状態が自動的に処理されます。
• 最適化されたフェッチ - 顧客情報を利用できる場合にのみフェッチされます。
• コードの簡素化 - 状態管理を手動で行う必要が減ります。

• PWA Kit の概要
• ハイブリッド実装ガイダンス
• Commerce SDK React ドキュメント