ハイブリッド認証を使用したハイブリッド ストアフロントの構成

B2C Commerce バージョン 25.3 では、プラグイン SLAS カートリッジオプションがハイブリッド認証 (Hybrid Auth) に置き換えられました。

ハイブリッド認証は、Storefront Reference Architecture (SFRA)/SiteGenesis の認可と、Shopper Login and API Access Service (SLAS) の認可の両方を必要とする実装のためのスタンドアロンソリューションです。つまり、dwsid (SFRA/Site Genesis) と JSON Web トークン (SLAS) の両方が必要であり、これらのトークンを同期させる必要があります。ハイブリッド認証は、プラグイン SLAS アプローチを改良したもので、より効率的で合理化された方法を提供します。

ハイブリッド認証により、機能が B2C Commerce プラットフォームに直接移行されることで、ハイブリッドストアフロントのパフォーマンスと安定性が向上します。

ハイブリッド認証に移行して、向上したパフォーマンスと合理化されたワークフローを活用することを強くお勧めします。

このガイドでは、一部が SFRA/SiteGenesis で、一部がコンポーザブルストアフロントであるハイブリッドストアフロントのハイブリッド認証を設定する方法について説明します。

ハイブリッド認証の詳細については、「ハイブリッド認証」を参照してください。

ハイブリッド認証を使用したハイブリッド実装に関連するタスクには、次のものがあります。

  1. 「ハイブリッド認証」の手順を完了します。
  2. コンポーザブルストアフロントのハイブリッド認証を構成します (必須)。
  3. Commerce API CDN ゾーンを使用して、トラフィックを Managed Runtime にルーティングします。CDN APIs for Phased Headless Rollouts (必須)を参照してください。
  4. 段階的なヘッドレスロールアウト用の Einstein 活動 (オプション) を使用したアナリティクスの取得

ハイブリッド認証を使用するには、以下を使用してサイトを構築します。

次の表は、プラグイン SLAS とハイブリッド認証の PWA Kit 機能のサポートを比較したものです。

機能名PWA Kit w でサポートされています。プラグイン SLASPWA Kit w でサポートされています。ハイブリッド認証に関する注意事項
SiteGenesisNY
サードパーティ IDP とソーシャル ログインN2025 年 4 月 30 日時点で部分的にサポートされています。
  • サードパーティ IDP:第三者 IDP とのすべてのやり取りは、SLAS を使用して行う必要があります。現在B2C Commerce で買い物客認証を使用していて、Business Manager で OAuth2 プロバイダーを構成している場合は、SFRA/SiteGenesis アプリケーション内で UI ワークフローと認証を調整して変更する必要があります。SLAS ID プロバイダーを使用して、買い物客のログイン画面を SLAS とやり取りするように変更します。
  • ソーシャルログイン:
    • これはサードパーティの IDP サポートと同じですが、前の段落で説明したのと同じ注意点があります: ログインは SLAS を通過する必要があります。
パスワードレスログインNY
SLAS プライベート クライアントYY
SLAS YN*パブリック クライアントハイブリッド認証のサポートは、今後のリリースで予定されています。
SLAS トラステッド・システム (TSOB)NY
Script API 「Remember Me」機能NN/A 従来の
  • 「このアカウントを記憶する」機能は、有効期限 SLAS 延長されて強化され、HA に移行すると冗長になります。
  • 重要: HA に移行していて、実装でloginCustomer の呼び出し時に rememberMe のブール・フラグが設定される場合、現在、使用されるdwcustomer_* Cookie に問題があります。Salesforce では現在、ハイブリッド認証を使用している場合、ハイブリッド認証を実装しないことをお勧めします。
  • rememberMe機能は、HA 永続ログインによって拡張されています。
    • RememberMe からハイブリッド認証永続ログインへの移行のサポートは、B2C Commerce バージョン 25.6 で利用可能です。
  • この場合、HA に移行する前に 25.6 まで待つ必要があります。
PWA Kit バージョン 2.xYN*HA の場合、PWA Kit 2.x のサポートは SLAS パブリック クライアントのサポートに依存しており、将来のリリースで計画されています。
PWA Kit バージョン 3.xYYsalesforce/commerce-sdk-react* v3.2.0 *には PWA Kit 3.9.0 が同梱されています。
Do Not Track (DNT)NYDNT を有効にして同期するには、特定の手順を実行する必要があります。ドキュメントガイドを参照してください。
買い物客のコンテキストNYSalesforce では、
  • パーソナル化データを API で使用できるようにする唯一の方法であるため、ハイブリッド認証の買い物客コンテキストを有効にすることをお勧めします。ショッパーコンテキストのドキュメントを参照してください。
  • 位置情報に基づくパーソナライゼーションは、買い物客のコンテキストと SFRA/SiteGenesis の間で同期する必要があります。
    • ドキュメントガイドを参照してください。
  • 手記：
    • B2C Commerce バージョン 25.5 では、位置情報ベースのパーソナル化に Script API for Shopper Context を使用できます。
コントローラの除外YNハイブリッド認証では、コントローラを除外する必要はありません。
カスタマイズによる YCookie 設定のカスタマイズN/Aハイブリッド認証では、plugin_SLAS とは異なり、Cookie オブジェクトにアクセスできなくなり、Cookie 設定を上書きできなくなります。

*サポートは今後のリリースで予定されています。

一部が SFRA/SiteGenesis で、一部がコンポーザブルストアフロントであるハイブリッドストアフロントのハイブリッド認証を構成するには、このガイドで詳しく説明されている次の手順に従います。

埋め込みコンテンツ配信ネットワーク (eCDN) を構成して、ファネルの上部にあるページリクエストをコンポーザブルストアフロントに送信します: ホームページ (/)、カテゴリ一覧ページ (/category)、および商品詳細ページ (/product)。これらのページは、mystorefront.mobify-storefront.com で実行されているマネージド ランタイム (MRT) 環境にデプロイされます。買い物客が購入を決定すると、eCDN は買い物客をwww.mystorefront.comで実行されている既存の SFRA/SG チェックアウトページにリダイレクトします。

MRT へのトラフィックのルーティングの詳細については、以下を参照してください。

1 または 2 を実行します。

  1. SLAS プライベート クライアント構成を使用した Retail React App の作成
    • ターミナル ウィンドウで次のジェネレーター コマンドを実行して、PWA Kit アプリを作成します。 npx @salesforce/pwa-kit-create-app my-hybrid-storefront
    • 独自の Commerce Cloud インスタンスを使用した Retail アプリを選択します。
    • ターミナルの指示に従います。
    • あなたの SLAS クライアントはプライベートですか? ****

または

  1. または、事前設定された構成を使用して Retail React App を生成し、アプリの生成後に SLAS クライアント ID をプライベート クライアントに変更することもできます。

デフォルトでは、PWA Kit はナビゲーションに History API を使用します。買い物客が React Router のコンポーネントで作成されたリンクをクリックすると、app/routes.jsx で定義されたルートオブジェクトのパスと一致するコンポーネントへのソフトナビゲーションがトリガーされます。PWA Kit 以外のページ (たとえば SFRA によるページ) にリンクするには、app/routes.jsx の URL パス名と一致するルートをすべて削除する必要があります。

  1. PWA Kit プロジェクトがテンプレート拡張を使用する Retail React Appテンプレートのバージョン 3.x で生成された場合は、overrides/app/routes.jsxファイルをオーバーライドして、JavaScript を使用して PWA Kit 以外のページへのリンクを除外できます。

    /cartルートと/checkoutルートを除外するために、すべての変更を行ったoverrides/app/routes.jsxファイルのオーバーライドの例を作成しました。このパブリック Gistのオーバーライド コードの例をカスタマイズして、PWA Kit 以外のページへのリンクを除外します。

  2. 最後に、app/routes.jsx の PWA キャッチオールルート (/*) を更新します。PWA <PageNotFound /> コンポーネントをデフォルトのオリジンのリダイレクトに置き換えます。

  • サイトで commerce-sdk-react を使用している場合は、**@salesforce/commerce-sdk-react@3.2.0**以降にアップグレードしてください。

ハイブリッド認証が有効になっている場合、SLAS /oauth2/token要求には、応答のSet-Cookieヘッダーを使用するセッション ブリッジされたdwsidが含まれます。

Managed Runtime で、Cookie パススルーを有効にします。

  1. Managed Runtime Adminにログインします。
  2. プロジェクトと環境に移動します。
  3. Environment Settings (環境設定) をクリックします。
  4. 詳細セクションまでスクロールし、編集ボタンを選択します。
  5. ** Cookie **の横にあるスイッチを有効にします。
  6. 詳細セクションまでスクロールして戻り、更新を選択します。
  7. ストアフロントバンドルが再デプロイされるのを待ちます。

これらの手順は、以前にハイブリッド ストアフロントでプラグイン SLAS を使用していた場合にのみ適用されます。新しいハイブリッドストアフロントがあり、以前にプラグイン SLAS を使用したことがない場合は、これらの手順を省略できます。

B2C Commerce ハイブリッド認証への移行に伴い、PWA Kit はプラグイン SLAS を使用しなくなりました。ハイブリッドストアフロントからプラグイン SLAS を削除するには:

  1. 管理 > サイト > サイトの管理 > サイトを選択します。
  2. 設定タブに移動します。
  3. カートリッジパスからプラグイン SLAS を削除します。
  4. 買い物客の認証に関するコードのカスタマイズがあるが、プラグイン SLAS に固有ではない場合は、そのまま引き続き機能します。
    • プラグイン SLAS 固有のカスタマイズを行った場合は、それらのカスタマイズを確認します。これらの変更は必要ない場合もあれば、別のカートリッジに変更を再実装する必要がある場合もあります。
    • ベストプラクティスに従ってください。すべてのコードのカスタマイズは、すぐに使用できる SFRA カートリッジコードに直接実装するのではなく、別のカートリッジに実装する必要があります。
    • ハイブリッド認証に切り替えるときに、どのカスタムカートリッジコードもセッションブリッジングエンドポイントを呼び出さないことを確認してください。これにより、買い物客のセッションで問題が発生します。ハイブリッド認証で買い物客のセッションが処理されるようになりました。

SFRA のみのサイトでは、買い物客のログイン拡張機能でハイブリッド認証が有効になっている場合、DNT 値は拡張セッションに自動的に同期され、セッション間でシームレスな体験が確保されます。

  • Business Manager で DNT 同期を有効または無効にするには、マーチャントツール > サイトを選択 > サイト環境設定 > ハイブリッド認証設定を選択します。

ハイブリッド認証と DNT 同期の両方を有効にすると、一方のサイトで買い物客が提供した追跡の同意が、もう一方のサイトと自動的に同期されます。たとえば、ホームページが PWA Kit で実行され、買い物カゴページが SFRA で実行されるハイブリッドサイトでは、次のようになります。

  • ホームページ (PWA Kit) では、買い物客に同意フォームが表示され、追跡設定が提供されます。
  • 買い物客が買い物カゴページ (SFRA) に移動すると、PWA Kit からの DNT 値が SFRA と同期されます。
  • このため、SFRA 買い物カゴページでは、追跡への同意を再度求めるプロンプトは表示されません。

デフォルトの DNT 実装をカスタマイズした場合、またはカスタマイズする予定がある場合、デフォルトの同期は必要なく、期待どおりに機能しない可能性があります。このような場合は、サイト環境設定を使用して DNT 同期を無効にできます。DNT 同期がオフになっている場合でも、ハイブリッド認証を有効にできます。

SFRA と PWA Kit では、DNT Cookie の有効期限に重要な違いがあります。

  • SFRA は、セッションの終了時に DNT Cookie の有効期限が切れるように設定します。
  • PWA Kit は、リフレッシュトークンの有効期間 (ゲストユーザーの場合は 30 日など) に合わせて有効期限を設定します。

買い物客が PWA Kit ページから SFRA ページに移動すると、DNT Cookie の有効期限が、リフレッシュトークンの有効期限からセッションベースの有効期限に変更されます。買い物客がブラウザーを閉じると、Cookie は削除されます。その結果、買い物客が戻ってきたときに、追跡同意バナーが予想通りに再び表示されます。

ハイブリッド設定はローカル環境でテストすることを強くお勧めします。eCDN は SIG と ODS をサポートしていないため、これを行うにはリバースプロキシを設定する必要があります。ハイブリッドサイトを SIG インスタンスでローカルにセットアップしてテストするには、独自のリバースプロキシまたは CDN を使用してトラフィックを分割する必要があります。

PWA Kit と SFRA/SiteGenesis にわたるハイブリッドデプロイの買い物客フローの開発とテストに使用できるサンプル Node.js アプリを作成しました。 リバース プロキシを設定するためのセットアップ、構成、およびテストの手順は、リポジトリのREADMEに記載されています。

ODS は、本番構成と同様のエイリアスの構成を使用するように構成できます。これにより、ローカルと本番の設定を同じに保つことができます。たとえば、ハイブリッドサイトが / URI で利用できるようにサンドボックスを構成すると、pwa-kit によって送信される URL を、サイト ID を含めるために変換する必要がなくなります。これが通常の本番サイトの構成方法です。

Business Manager でエイリアスを有効にするには、Trailhead の Salesforce B2C Commerce ホスト名エイリアスのモジュールの手順に従ってください。

PWA Kit のルート構成を構成して、すべての発信 URL (たとえば SFRA 向けのもの) に接頭辞 /s/SiteID を含めることができます。これにより、ホスト名のエイリアスを明示的に構成する必要がなく、インスタンスはサンドボックスで通常使用される方法でコントローラー URL を受信できるようになります。これは本番環境の構成には適切ではないこともあるため、本番デプロイとサンドボックスデプロイでは異なるキャッチオールルートが必要になる場合があることにご注意ください。

ルートの接頭辞を構成するには、app/routes.jsxまたは overrides/app/routes.jsx の PWA キャッチオールルート (/*) を更新します。