ハイブリッド認証

B2C Commerce バージョン 25.3 以降では、プラグイン SLAS カートリッジオプションはハイブリッド認証 (Hybrid Auth) に置き換えられます。パフォーマンスの向上とワークフローの簡素化を活用するため、ハイブリッド認証に移行することをお勧めします。

このページ内のリンクには、既存のお客様のみがアクセスできるものがあります。Commerce Cloud リポジトリにアクセスする方法については Salesforce Commerce Cloud GitHub リポジトリとアクセスを参照してください。

Tip

ハイブリッド認証の概要

ハイブリッド認証は、Storefront Reference Architecture (SFRA)/SiteGenesis の認可と、Shopper Login and API Access Service (SLAS) の認可の両方を必要とする実装のためのスタンドアロンソリューションです。つまり、dwsid (SFRA/SiteGenesis) と JSON Web トークン (SLAS) の両方が必要であり、これらのトークンを同期させる必要があります。

ハイブリッド認証はプラグイン SLAS を完全に置き換えるものであり、この機能を B2C Commerce プラットフォームに直接組み込むことで、ハイブリッドストアフロントのパフォーマンスと安定性を向上させます。

ハイブリッド認証は、さまざまなユースケース向けに設計されており、いずれも SFRA/SiteGenesis と SLAS の両方を使用します。

ハイブリッド実装 (PWA Kit やその他のヘッドレスソリューションを含む可能性のある部分的なヘッドレスサイト): サイトの一部 (商品一覧ページや商品詳細ページなど) はヘッドレスアプリケーションで実装し、サイトの他の部分 (買い物カゴやチェックアウトなど) は SFRA または SiteGenesis のままにする構成です。
- サイトの一部にヘッドレステクノロジーを使用する予定がある場合 (SFRA/SiteGenesis を使用したハイブリッド設定) は、ハイブリッド認証が必要です。
SFRA/SiteGenesis: ハイブリッド認証を SFRA/SiteGenesis サイトのみで使用して、より長いセッション期間 (最大 90 日間) やフェデレーションログインなどの SLAS 機能を利用できます。

PWA Kit v2.x プロジェクトをハイブリッド認証にアップグレードするには、PWA Kit v2.x でのハイブリッド認証実装を参照してください。

PWA Kit を使用していないお客様は、HybridAuth を使用していて dwsid Cookie が存在する場合、すべての SCAPI 呼び出しにおいて、Cookie の dwsid 値を sfdc_dwsid ヘッダーに含めてください。

Note

この図は、ハイブリッド認証とコンポーザブルストアフロントを使用したハイブリッド B2C Commerce スタックの例を示しています。コンポーザブルストアフロントは、ヘッドレス実装としてファネル上流を担い、SCAPI を使用して B2C Commerce インスタンスと通信します。買い物カゴと注文手続きを提供する SFRA ストアフロントは、B2C Commerce インスタンスと直接通信します。SFRA プロジェクトでは、2 つのインフラストラクチャ間のセッションブリッジを実現するためにハイブリッド認証を使用します。CDN (eCDN または独自のスタック CDN) は、買い物客がリクエストしたパスに応じて、トラフィックを 2 つのインフラストラクチャーにルーティングします。

SFRA/SiteGenesis コンポーネントと PWA Kit コンポーネントを備えた B2C Commerce ハイブリッド認証アーキテクチャ。dwsid トークンと JWT トークン間のセッション同期を示しています

ハイブリッド認証の利点

プラットフォームネイティブなデータ同期

すぐに使用できる認証機能により、SFRA ページとコンポーザブルストアフロントページ間で自動的にデータが同期されるため、より迅速にリリースできます。プラグイン SLAS は不要です。

シームレスな買い物客体験

買い物客は、データの中断や損失なしにハイブリッドサイト内を移動できます。同期は、Shopper Context (買い物客のコンテキスト) のセッション属性まで拡張され、一貫した分析もサポートされます。

すべてのテンプレートに完全対応

SiteGenesis と SFRA のどちらを使用している場合でも、コンポーザブルストアフロントへの移行を円滑に進めるための、完全にサポートされ製品化されたソリューションを利用できます。

ハイブリッド認証の前提条件

ハイブリッド認証を PWA Kit で使用する予定がある場合は、サイトが次のバージョンで構築されていることを確認してください。
- commerce-sdk-react@3.3.0 以降
- Progressive Web App (PWA) Kit バージョン 3.10 以降
詳細については、コンポーザブルストアフロントの使用開始を参照してください。

手順 1: ハイブリッド認証を使用したストアフロントの設定

SLAS クライアントを設定します。
- ハイブリッド認証は、SLAS パブリッククライアントとプライベートクライアントの両方をサポートします。まだ作成していない場合は、SLAS クライアントを作成します。詳細については、Shopper API の認可を参照してください。
セッションブリッジを有効にします。
- ハイブリッド認証に使用する SLAS クライアントのスコープを更新して、sfcc.session_bridge を含めます。詳細については、Shopper Login and API Service (SLAS) の概要を参照してください。
- ハイブリッド認証で使用するクライアント ID が、PWA Kit/ヘッドレスアプリケーションで使用するクライアント ID と同じであることを確認します。
(オプション) B2C Commerce バージョン 25.8 以降では、ハイブリッド認証はサードパーティ IDP とソーシャルログインをサポートしています。サードパーティログイン/ソーシャルログインは、SLAS を使用して設定できます。
- サードパーティログインまたはソーシャルログインを使用している場合は、すべてのサードパーティ IDP とのやりとりを SLAS で実行する必要があります。サポートされている IDP を設定するには、次の手順を実行します。
  1. IDP の管理ポータルで OAuth クライアントを作成します。
  2. SLAS Admin API または SLAS Admin UI を使用して、SLAS テナント用の IDP を構成します。SLAS Admin UI で、Idps タブに移動し、Add Idp (IDP を追加) を選択します。
    - LAS Admin の構成における IDP 名は大文字と小文字が区別され、SFRA/SiteGenesis の OAuth プロバイダー ID と一致している必要があります。
      Note
  3. SLAS Admin UI で、最初の手順で作成した SLAS クライアント ID に、SFRA/SiteGenesis の Login-OAuthReentry リダイレクト URI を追加します。例:
    - https://<Site Host Name>/on/demandware.store/Sites-<Site Id>-Site/<locale>/Login-OAuthReentry
  4. IDP の管理ポータルで、SFRA/SiteGenesis の Login-OAuthReentry リダイレクト URI を追加します。例:
    - https://<Site Host Name>/on/demandware.store/Sites-<Site Id>-Site/<locale>/Login-OAuthReentry<IDPProviderId>
Business Manager を構成します。
1. Business Manager で、マーチャントツールに移動します。
  1. 設定に一致するサイトを選択します (例: RefArch/RefArchGlobal/SiteGenesisGlobal)。
  2. クイック検索ボックスで、「ハイブリッド認証」を検索します。フィルター処理された結果から、ハイブリッド認証設定を選択します。B2C Commerce バージョン 25.10 では、Business Manager インターフェイスが更新されています。25.10 より前のバージョンを使用している場合、インターフェイスのオプションは若干異なります。
  3. ハイブリッド認証トグルを有効にします。
  4. SLAS クライアント ID (プライベートクライアントまたはパブリッククライアントのいずれか) を入力します。
    - SLAS クライアント ID がパブリッククライアントの場合は、パブリッククライアントチェックボックスをオンにします。
    - SLAS クライアント ID がプライベートクライアントの場合は、SLAS プライベートクライアントシークレットを入力します。
  5. 買い物客のコンテキストトグルを有効にして、ハイブリッド認証で買い物客のコンテキスト機能を活用します。
  6. Do-Not-Track (追跡拒否) の同期トグルを有効にして、ハイブリッド認証で DNT 同期を活用します。
  7. B2C Commerce バージョン 25.8.1 以降では、ゲストのリフレッシュトークンの TTL をデフォルトの 30 日からより短い値に変更するには、ゲスト顧客のリフレッシュトークン Cookie の TTL 上書きフィールドに 360 ～ 43200 の値 (6 時間～ 30 日、単位は分) を入力します。
    - これを有効にするには、PWA Kit 側のゲスト用リフレッシュトークン Cookie TTL も同じ値に構成する必要があります。
    - この変更により、ゲスト買い物客の永続セッション時間が実質的に短縮されます。
  8. B2C Commerce バージョン 25.8.1 以降では、登録済み顧客のリフレッシュトークンの TTL をデフォルトの 90 日からより短い値に変更するには、登録済み顧客のリフレッシュトークン Cookie の TTL 上書きフィールドに 360 ～ 129600 の値 (6 時間～ 90 日、単位は分) を入力します。
    - これを有効にするには、PWA Kit 側の登録済み顧客用リフレッシュトークン Cookie TTL も同じ値に構成する必要があります。
    - この変更により、登録済み買い物客の永続セッション時間が実質的に短縮されます。
  9. 適用をクリックします。
2. Business Manager でアプリケーションランチャーをクリックし、管理を選択します。
  1. クイック検索ボックスで、セキュリティを検索します。
  2. アクセス制限タブを選択します。
  3. HTTPS を強制するチェックボックスをオンにします。
  4. 適用をクリックします。
カートリッジパスからプラグイン SLAS を削除します。B2C Commerce のハイブリッド認証への移行後は、プラグイン SLAS は不要です。

以下の手順は、以前にプラグイン SLAS を使用していた場合にのみ実施してください。ハイブリッドストアフロントの実装が初めてで、ハイブリット認証をこれから使い始める場合は、これらの手順はスキップできます。この手順は、以前にハイブリッドストアフロントでプラグイン SLAS を使用していた場合にのみ適用されます。新しいハイブリッドストアフロントがあり、これまでプラグイン SLAS を使用したことがない場合は、この手順をスキップできます。
Note
1. アプリケーションランチャーをクリックし、管理 > サイト > サイトの管理の順に移動し、サイトを選択します。
2. 設定タブに移動します。
3. カートリッジパスから plugin_slas を削除します。
4. コードのカスタマイズの場合:
  - プラグイン SLAS 固有ではない買い物客認証コードのカスタマイズがある場合は、そのまま動作し続けるはずです。
  - プラグイン SLAS 固有のカスタマイズがある場合は、不要な場合や、別のカートリッジに変更を再実装する必要がある可能性があるため、それらの変更を見直してください。
  - ベストプラクティスに従って、コードのカスタマイズは、すぐに使用できる SFRA カートリッジコードを直接変更するのではなく、別のカートリッジで実装してください。
  - カスタムカートリッジのコードからセッションブリッジのエンドポイントを呼び出していないことを確認してください。呼び出すと、買い物客のセッションで問題が発生する可能性があります。セッションブリッジは、ハイブリッド認証によって自動的に処理されます。
コンポーザブルストアフロントの場合: クライアントブラウザーで Cookie のレスポンスを処理します。
- ハイブリッド認証の一部として、SLAS トークン呼び出しでは、Set-Cookie レスポンスヘッダーに dwsid が含まれるようになりました。SLAS API 呼び出しの Set-Cookie ヘッダーが適切に反映され、Cookie がブラウザーに設定されるようにしてください。
- 注: コンポーザブルストアフロントで Commerce Cloud React SDK を使用している場合、この Cookie の処理は PWA Kit v3.9 以降で自動的に行われます。
コンポーザブルストアフロントの場合: 埋め込みコンテンツ配信ネットワーク (eCDN) のオリジンルールを設定します。
- 埋め込みコンテンツ配信ネットワーク (eCDN) を構成して、ファネルの上部にあるページリクエストをコンポーザブルストアフロントに送信します。対象は、ホームページ (/)、カテゴリ一覧ページ (/category)、および商品詳細ページ (/product) です。これらのページは、mystorefront.mobify-storefront.com で稼働する Managed Runtime (MRT) 環境にデプロイされます。買い物客が購入を決定すると、eCDN は買い物客を www.mystorefront.com 上で稼働している既存の SFRA/SG の注文手続きページにリダイレクトします。
- Commerce API CDN ゾーンを使用してトラフィックを Managed Runtime にルーティングするには、ハイブリッド実装向け CDN API の手順に従ってください。
  - 新しいルールには、必ず次の値を指定してください。
    - ルール名: このルールセットがハイブリッドストアフロント用であることを識別しやすい任意の名前。1 つのストアフロントに複数のルールセットを設定できます。
    - 保存後にルールを有効にする: このチェックボックスをオンにすると、保存をクリックした時点でルールセットがすぐに適用されます。
    - ホスト名: ホスト名の選択をクリックし、ハイブリッドストアフロントのホスト名を選択します。
    - MRT オリジン: Runtime Admin の Environment Settings (環境設定) で確認できる MRT ストアフロントドメイン。
    - ルール式: オリジンルールセット。
- MRT へのトラフィックのルーティングの詳細については、以下を参照してください。
コンポーザブルストアフロントの場合: PWA Kit Retail React App を作成します。
- 次のいずれかの手順を実行します。
  - SLAS のパブリッククライアントまたはプライベートクライアント構成を使用して Retail React App を作成します。
    - ターミナルウィンドウで次のジェネレーターコマンドを実行して、PWA Kit アプリを作成します: npx @salesforce/pwa-kit-create-app my-hybrid-storefront
    - The Retail app using your own Commerce Cloud instance (独自の Commerce Cloud インスタンスを使用する Retail アプリ) を選択します。
    - ターミナルの指示に従います。
  - または、事前設定された構成を使用して Retail React App を生成し、アプリが生成されたら SLAS クライアント ID をパブリッククライアントまたはプライベートクライアントに変更することもできます。
    - クイックスタートの手順に従ってください。
    - SLAS のパブリッククライアントまたはプライベートクライアントを使用します。
    - ハイブリッド認証で使用する SLAS クライアントに sfcc.session_bridge スコープが含まれていることを確認します。
コンポーザブルストアフロントの場合: PWA Kit のルートを更新します。
- デフォルトでは、PWA Kit はナビゲーションに History API を使用します。買い物客がReact Router コンポーネントで作成されたリンクをクリックすると、app/routes.jsx で定義されたルートオブジェクトのパスに一致するコンポーネントへのソフトナビゲーションがトリガーされます。PWA Kit 以外のページ (たとえば SFRA で提供されるページ) にリンクするには、URL パス名に一致するルートを app/routes.jsx から削除します。
  1. PWA Kit プロジェクトが、拡張テンプレートを使用した Retail React App テンプレートバージョン 3.x で生成されている場合は、overrides/app/routes.jsx ファイルをオーバーライドして、JavaScript により PWA Kit 以外のページへのリンクを除外できます。
    - /cart ルートと /checkout ルートを除外するために必要な変更をすべて含む overrides/app/routes.jsx ファイルのサンプルオーバーライドを作成しています。PWA Kit 以外のページへのリンクを除外するように、このパブリック Gist のサンプルオーバーライドコードをカスタマイズしてください。
  2. app/routes.jsx で PWA キャッチオールルート (/*) を更新します。この例では、PWA の <PageNotFound /> コンポーネントをデフォルトのオリジンへのリダイレクトに置き換えます。
1import {withRouter} from 'react-router-dom' 2 ... 3 { 4 path: '*', 5 component: withRouter((props) => { 6 const {location} = props 7 const urlParams = new URLSearchParams(location.search) 8 9 useEffect(() => { 10 const newURL = new URL(window.location) 11 if (!urlParams.has('redirected')) { 12 newURL.searchParams.append('redirected', '1') 13 window.location.href = newURL 14 } 15 16 }, [window.location.href]) 17 if (urlParams.has('redirected')) { 18 return <PageNotFound {...props} /> 19 } 20 return null 21 }) 22 }
コンポーザブルストアフロントの場合: @salesforce/commerce-sdk-react をアップグレードします。
- サイトで commerce-sdk-react を使用している場合は、@salesforce/commerce-sdk-react@3.3.0 以降にアップグレードしてください。
コンポーザブルストアフロントの場合: Managed Runtime で Cookie を有効にします。
- ハイブリッド認証が有効になっている場合、SLAS /oauth2/token リクエストには、レスポンス内の Set-Cookie ヘッダーを使用する、セッションブリッジされた dwsid が含まれます。
- Managed Runtime で、Cookie パススルーを有効にします。
  1. Managed Runtime Admin にログインします。
  2. プロジェクトと環境に移動します。
  3. Environment Settings (環境設定) をクリックします。
  4. Advanced (詳細) セクションまでスクロールし、Edit (編集) ボタンを選択します。
  5. Cookies の横にあるスイッチを有効にします。
  6. Advanced (詳細) セクションまでスクロールして戻り、Update (更新) を選択します。
  7. ストアフロントバンドルが再デプロイされるのを待ちます。
コンポーザブルストアフロントの場合: Commerce API CDN ゾーンを使用して、トラフィックを Managed Runtime にルーティングします。段階的なヘッドレスロールアウト用の CDN API を参照してください。
(オプション) コンポーザブルストアフロントの場合: 段階的なヘッドレスロールアウト用の Einstein アクティビティを使用してアナリティクスを取得します。
ハイブリッド認証の設定を検証します。
1. ブラウザーの eCDN で構成されたバニティドメインを使用して、ストアフロントに移動します。
2. SFRA/Sitegenesis のページに移動します。
3. ブラウザーで開発者ツールを開き、Cookie を検査します。次の Cookie が設定されていることを確認します。
  - cc-nx-g_{Site_ID} - ゲストリフレッシュトークン
  - dwsid - B2C Commerce セッション ID
  - usid - SLAS 顧客 ID
  - cc-at_{Site_ID} - SLAS アクセストークン (この Cookie は、ユーザーが SFRA ページにアクセスした場合にのみ表示されます。PWA Kit ページから SFRA ページへ移動した場合、この Cookie は表示されません。
4. 任意の PWA Kit ページに移動します。次の Cookie を確認します。
  - cc-nx-g_{SiteID}: 同じである必要があります。
  - dwsid: 同じである必要があります。
  - usid_{SiteID}: 同じである必要があります。
  - cc-at_{SiteID}: Cookie が PWA Kit によって消費され、アクセストークンが localStorage に移動されたため、この Cookie は表示されなくなります。localstorage を調べて、accesstoken{SiteID} の値が元の cc-at_{SiteID} Cookie の値と一致することを確認できます。
5. 次に、ブラウザーの開発者ツールの「ネットワーク」タブに切り替えます。
6. PWA Kit で商品を買い物カゴに追加します。
7. 「ネットワーク」タブで、Add to Cart (買い物カゴに追加) の SCAPI リクエストを確認します。これは、トラフィックが複数のアプリケーションサーバーに分散される可能性がある場合に、大規模な本番環境でハイブリッドの安定性を維持するために必要な重要なヘッダーです。
  1. 「ヘッダー」セクションで、リクエストヘッダーを確認します。
  2. PWA Kit を使用している場合は、sfdc_dwsid ヘッダーが、先ほど確認した dwsid Cookie の値に設定されていることを確認してください。PWA Kit を使用していない場合は、dwsid Cookie が使用可能な場合は、ヘッドレスアプリケーション側でこの値を設定してください。

手順 2: ローカルでのハイブリッド設定 (SIG インスタンス)

ハイブリッド設定は、ODS やローカル開発サーバーなどの SIG 環境でテストすることをお勧めします。これを行うには、eCDN は SIG 環境をサポートしていないため、PWA Kit のハイブリッドプロキシ機能などのリバースプロキシを設定する必要があります。SIG インスタンスでハイブリッドアプリケーションをローカルに設定してテストするには、ハイブリッドプロキシまたは CDN を使用してトラフィックを分割します。ハイブリッドプロキシは、pwa-kit-runtime パッケージで PWA Kit v3.14 以降から使用できます。ハイブリッドプロキシを使用すると、PWA Kit と SFRA/SiteGenesis にまたがるハイブリッドな買い物客フローを開発およびテストできます。

ハイブリッドプロキシは SIG インスタンスでのみ有効にしてください。PIG インスタンスでは、eCDN を使用して PWA Kit コンポーザブルストアフロントまたは SFRA/SiteGenesis ストアにリクエストを振り分けます PIG インスタンスではハイブリッドプロキシを有効にしないでください。ハイブリッドプロキシは localAllowCookies: true 変数を設定するため、PIG インスタンスでセキュリティの問題が発生する可能性があります。

ハイブリッドプロキシではハイブリッド認証を使用してください。ハイブリッド認証は、プラグイン SLAS カートリッジオプションに代わるものです。プラグイン SLAS を使用している場合は、ハイブリッドプロキシに置き換えてください。ハイブリッド認証の概要を参照してください。

Note

この図は、プロキシが SIG インスタンスのハイブリッドアプリケーションの受信ページリクエストをルーティングする際の、リクエストとレスポンスのシーケンスを示しています。リクエストが MRT ルールに一致する場合は、PWA Kit アプリを介して処理されます。一方、MRT ルールに一致しない場合は、プロキシリクエストが B2C Commerce インスタンスに送信されます。次に、URL 参照が変換され、レスポンスが返されます。

SIG インスタンスのリクエストとレスポンスのハイブリッドアプリケーションシーケンス

ハイブリッドプロキシをローカルで有効にするには、次の手順に従います。

pwa-kit-runtime パッケージの依存関係を v3.14.0 以降にアップグレードします。
コンポーザブルストアフロントの ssr.js で、サーバー側リバースプロキシの hybridProxy 値を設定します。
- localAllowCookies: true
- hybridProxy.enabled: true
- hybridProxy.sfccOrigin: [your SFCC store]
default.js を更新して、クライアント側のルーティングを構成します。
- 正しい commerceAPI SIG インスタンスを指すように app.commerceAPI.parameters を更新します。
- app.enableHybrid: true を追加して、オン/オフを切り替えられるようにします。
1ssrParameters.proxyConfigs: add 2{ 3 host: [your SFCC store], 4 path: 'dwrestatic' 5}
_app-config.js で hybridAuthEnabled のコメントを解除します。
現在のサイトでハイブリッド認証が有効になっている場合は、app/components/_app-config/index.jsx で hybridAuthEnabled のコメントを解除します。プラグイン SLAS を使用するハイブリッドストアフロントでは、このフラグを設定しないでください。
PWA-Kit のルートを除外するように routes.jsx を更新します。詳細については、https://gist.github.com/clavery/c0c8689ee852876cfc5b297985c4300e#file-routes-jsx-L116 を参照してください。

この例では、/cart ルートと /checkout ルートを PWA Kit ストアから削除し、キャッチオールルート \* を使用して、プロキシされた SFCC の買い物カゴページと注文手続きページのサーバー側レンダリングをトリガーします。

1// Remove SFRA/SiteGenesis routes from PWA Kit
2const ecomRoutes = ['/cart', '/checkout', '*']
3
4const hybridRoutes = [
5   ...routes.filter((route) => !ecomRoutes.includes(route.path)),
6   {
7       path: '*',
8       component: withRouter((props) => {
9           const config = getConfig()
10           const {location} = props
11           const urlParams = new URLSearchParams(location.search)
12           const {site} = useMultiSite()
13           const siteId = site && site.id ? site.id : config?.app?.defaultSite
14
15           if (typeof window !== 'undefined') {
16               useEffect(() => {
17                   const newURL = new URL(window.location)
18                   if (!urlParams.has('redirected')) {
19                       newURL.searchParams.append('redirected', '1')
20                       newURL.pathname = `/s/${siteId}/${window.location.pathname
21                         .split('/')
22                         .slice(2)
23                         .join('/')}`
24                       window.location.replace(newURL)
25                   }
26               }, [window.location.href])
27           }
28
29           if (urlParams.has('redirected')) {
30               return <PageNotFound {...props} />
31           }
32           return null
33       })
34   }
35]
36
37export default () => {
38   const config = getConfig()
39   // Only use these routes if we are in hybrid mode otherwise use defaults
40   // This is driven via the config and env variables
41   const routesToConfigure = config.app.enableHybrid ? hybridRoutes : routes
42   return configureRoutes(routesToConfigure, config, {
43       ignoredRoutes: ['/callback', '*']
44   })
45}

変更を Managed Runtime 環境にデプロイする場合は、追加で次の変更を行います。

手順 1: ハイブリッド認証を使用したストアフロントの設定の手順 11 に従って Cookie を有効にするか、次の API 呼び出しを使用して Managed Runtime 環境で Cookie を有効にします。

1curl "https://cloud.mobify.com/api/projects/{project_slug}/target/{target_slug}/" \
2-X PATCH \
3-H "Content-Type: application/json" \
4-H "Authorization: Bearer {mobify_api_key}" \
5-d '{
6"allow_cookies": true
7}'

dwrestatic パスを使用して、SFCC インスタンスを指す Managed Runtime プロキシを構成します。

1curl "https://cloud.mobify.com/api/projects/{project_slug}/target/{target_slug}/" \
2-X PATCH \
3-H "Content-Type: application/json" \
4-H "Authorization: Bearer {mobify_api_key}" \
5-d '{
6"ssr_proxy_configs": [
7  ...,
8  {
9    "host": "{realm}-{instance}.dx.commercecloud.salesforce.com",
10    "path": "dwrestatic",
11    "protocol": "https"
12  }]
13}'

エイリアスを使用する On-Demand Sandbox の構成

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

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

(オプション) 送信 URL にプレフィックスを付加する PWA Kit ルートの構成

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

ルートのプレフィックスを構成するには、app/routes.jsxまたは overrides/app/routes.jsx の PWA キャッチオールルート (/*) を更新します。

1import {withRouter} from 'react-router-dom'
2// extensible
3import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site';
4// non-extensible
5import useMultiSite from './hooks/use-multi-site';
6
7const DEFAULT_SITE_ID = 'RefArch'
8...
9 {
10    path: '*',
11    component: withRouter((props) => {
12        const {location} = props
13        const urlParams = new URLSearchParams(location.search)
14        const {site} = useMultiSite()
15        const siteId = site && site.id ? site.id : DEFAULT_SITE_ID
16        useEffect(() => {
17            const newURL = new URL(window.location)
18            if (!urlParams.has('redirected')) {
19                newURL.searchParams.append('redirected', '1')
20                newURL.pathname = `/s/${siteId}/${window.location.pathname
21                    .split('/')
22                    .slice(2)
23                    .join('/')}`
24                window.location.replace(newURL)
25            }
26        }, [window.location.href])
27        if (urlParams.has('redirected')) {
28            return <PageNotFound {...props} />
29        }
30        return null
31    })
32}

手順 3: (オプション) ハイブリッド認証の買い物カゴ管理の構成

B2C Commerce プラットフォームには、買い物カゴをマージするためのデフォルトの実装が標準で用意されています。一部のお客様では、さらにカスタマイズが必要になることがあります。その場合、デフォルト実装と同様に動作する Github GIST のサンプル実装を使用でき、カスタマイズの出発点として最適です。

ゲスト買い物客が登録済み買い物客としてログインした後は、dw.order.mergeBasket フック (B2C Commerce バージョン 25.10 で追加) を使用して買い物客の買い物カゴを管理します。このマージフックは、次のいずれかのオプションを使用して呼び出すことができます。

ヘッドレスストアフロントでは、REST API 呼び出しを使用する
非ヘッドレスストアフロントでは、コントローラーロジック内で使用する

フックを呼び出した後、ゲスト買い物客の買い物カゴが登録済みの買い物客の買い物カゴに適切に統合されていることを確認します。

REST API を使用したフック呼び出し

transferBasket エンドポイントを merge=true パラメーターとともに使用すると、ゲストの買い物カゴが転送され、現在の買い物カゴになります。その後、dw.order.mergeBasket フックが呼び出され、登録済みの買い物客の買い物カゴが現在の買い物カゴにマージされます。この API の動作については、transferBasket 仕様に記載されています。

カスタムコントローラー実装によるフック呼び出し

買い物カゴマージフックを既存のコントローラーに追加するには、Script API を使用して、BasketMgr.getCurrentBasket() を呼び出すことで、ゲスト買い物客から登録済み買い物客へ買い物カゴを転送します。支払いや住所などの個人情報はゲストの買い物カゴから削除され、その買い物カゴが現在の買い物カゴになります。dw.order.mergeBasket フックを呼び出してマージを処理し、シームレスで一貫性のある買い物客の体験を実現します。BasketMgr.getStoredBasket() を使用すると登録済み買い物客の買い物カゴにアクセスできます。この買い物カゴは、リクエストの終了時に削除されます。

たとえば、Account-Login に買い物カゴマージフックを追加するには、ログイン関数にマージ処理を追加します。Github GIST には、これを実現する方法の詳細な説明が含まれていますが、次の例は、dw.order.mergeBasketフックと Script API を使用して買い物カゴを取得およびマージする方法の概要を示しています。

1// the (transferred) basket from the previous guest shopper
2var currentBasket = BasketMgr.getCurrentBasket();
3
4// the basket from the registered shopper which was attached before the login (will be deleted when request ends)
5var storedBasket = BasketMgr.getStoredBasket();
6
7if (storedBasket && currentBasket) {
8    dw.system.HookMgr.callHook("dw.order.mergeBasket", "mergeBasket", storedBasket, currentBasket);
9}

ハイブリッド実装における買い物カゴのベストプラクティスについては、ハイブリッド実装ガイダンスを参照してください。

手順 4: (オプション) ハイブリッド認証の買い物客コンテキストの設定

ハイブリッド認証では、次の用途で位置情報ベースのパーソナライズを実現するために、Shopper Context (買い物客のコンテキスト) を使用することをお勧めします。

顧客グループの request.geolocation.* 属性に基づくプロモーションおよびその他の体験
クライアント IP に基づく地域固有のコンテンツ

SCAPI 呼び出しとコントローラー呼び出しの両方で同じ位置情報を使用し、ハイブリッドストアフロント全体で一貫性を維持するには、次のようにします。

買い物客のコンテキストを clientIp. で呼び出します。
evaluateContextWithClientIp クエリパラメーターを true. に設定します。IP 関連のコンテキスト機能を正しく動作させるには、&evaluateContextWithClientIp=true を設定する必要があります。

例:

1PUT https://<shortCode>.api.commercecloud.salesforce.com/shopper/shopper-context
2  /v1/organizations/f_ecom_<tenantId>/shopper-context/<usid>
3  ?siteId=<siteId>&evaluateContextWithClientIp=true
4
5  {
6      "clientIp":"73.4.153.145"
7  }

詳細については、次を参照してください。

買い物客のコンテキストガイド
Shopper Context API ドキュメント
Shopper Context Script API SFRA/SiteGenesis ページを使用するハイブリッド実装では、Shopper Context Script API を使用して買い物客向け体験をパーソナライズできます。

手順 5: (オプション) 「追跡拒否」(DNT) 同期の有効化/無効化

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

SFRA のみのサイト: DNT 値は拡張セッションに自動的に同期され、セッション間でシームレスなエクスペリエンスが保証されます。

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

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

SFRA および非 PWA Kit ヘッドレスハイブリッド実装 (新規および既存): 次の条件を満たしていれば、プラットフォームに実装された DNT 同期を利用できます。

SFRA がデフォルトの DNT 実装を使用していること。詳細については、SFRA での同意追跡を参照してください。
非 PWA Kit ヘッドレスソリューションで、PWA Kit と同様の DNT を実装していること。詳細については、デフォルトの追跡同意の実装を参照してください。

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

DNT のカスタマイズ

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

DNT Cookie の有効期限

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

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

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

ハイブリッド認証機能のサポートマトリックス

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

機能名	プラグイン SLAS を使用する PWA Kit でサポート	ハイブリッド認証を使用する PWA Kit でサポート	メモ
SiteGenesis	いいえ	はい
サードパーティー IDP とソーシャルログイン	いいえ	はい	サードパーティー IDP: B2C Commerce バージョン 25.8 以降では、ハイブリッド認証はサードパーティ IDP とソーシャルログインをサポートしていますが、サードパーティ IDP とのやり取りはすべて SLAS を使用して行う必要があります。OAuth2 プロバイダーは Business Manager ではなく SLAS Admin で構成し、ハイブリッド認証の設定でリダイレクト URI を追加してください。ソーシャルログイン: B2C Commerce バージョン 25.8 以降、すべてのログインに SLAS を使用する必要があります。
パスワードなしのログイン	いいえ	いいえ
SLAS プライベートクライアント	はい	はい
SLAS パブリッククライアント	はい	はい
SLAS 信頼できるシステム (TSOB)	いいえ	はい
Script API の「Remember Me」(このアカウントを記憶する) 機能	いいえ	該当なし従来の「Remember Me」機能は、SLAS の拡張有効期限によって補完されるため、HA に移行すると冗長になります。
PWA Kit バージョン 2.x	はい	はい
PWA Kit バージョン 3.x	はい	はい	`salesforce/commerce-sdk-react` v3.3.0 は PWA Kit 3.10.0 に同梱されています。
追跡拒否 (DNT)	いいえ	はい	DNT を有効にして同期するには、特定の手順を実行する必要があります。ドキュメントガイドを参照してください。
Shopper Context (買い物客のコンテキスト)	いいえ	はい	Salesforce では、ハイブリッド認証に対して Shopper Context を有効にすることを推奨しています。これは、パーソナライズデータを API で利用可能にする唯一の方法であるためです。Shopper Context ドキュメントを参照してください。位置情報に基づくパーソナライズは、Shopper Context と SFRA/SiteGenesis の間で同期する必要があります。ドキュメントガイドを参照してください。メモ: Shopper Context の Script API は、位置情報ベースのパーソナライズで利用できます。
コントローラーの除外	はい	いいえ	ハイブリッド認証では、コントローラーを除外する必要はありません。
Cookie 設定のカスタマイズ	はい (カスタマイズによって対応可能)	該当なし	ハイブリッド認証では、plugin_SLAS とは異なり、Cookie オブジェクトにアクセスできなくなるため、Cookie 設定を上書きできません。
エージェント/代理注文 (OOBO)	いいえ	いいえ	エージェント/OOBO は、現時点では標準ではサポートされていません。ハイブリッド認証では、Business Manager の Customer Service Center を使用するエージェント/OOBO サポートが今後のリリースで予定されています。サイトで Agent/OOBO 向けのサードパーティカートリッジを使用している場合は、ライブサイトにデプロイする前に、必ずローカル環境でテストを実施してください。

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