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

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 活動 (オプション) を使用したアナリティクスの取得

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

• commerce-sdk-react@3.3.0 以降

• Progressive Web App (PWA) Kit バージョン 3.10 以降

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

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

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

• 埋め込みコンテンツ配信ネットワーク (eCDN) の起点ルールを設定します。
• PWA Kit Retail React App を作成します。
• PWA Kit ルートを更新します。
• @salesforce/commerce-sdk-react をアップグレードします。
• Managed Runtime で Cookie を有効にします。
• カートリッジパスからプラグイン SLAS を削除します。
• 「追跡拒否」(DNT) 同期の有効化/無効化

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

• Commerce API CDN ゾーンを使用してトラフィックを Managed Runtime にルーティングするには、「ハイブリッド実装のための CDN API」の手順に従います。

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

• TLS 証明書
• DNS の CNAME
• 環境の構成

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

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

または

2. または、事前設定された構成を使用して Retail React App を生成し、アプリの生成後に SLAS クライアント ID をプライベート クライアントに変更することもできます。
   • クイックスタートの手順に従います。
   • SLAS プライベートクライアントの使用
   • ハイブリッド認証に使用される SLAS クライアントにsfcc.session_bridgeスコープが含まれていることを確認します。

デフォルトでは、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 /> コンポーネントをデフォルトのオリジンのリダイレクトに置き換えます。

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    }

• サイトで 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. ストアフロントバンドルが再デプロイされるのを待ちます。

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 キャッチオールルート (/*) を更新します。

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}

• ハイブリッド実装でのコンポーザブルストアフロントの使用
• ハイブリッド認証
• ハイブリッド実装ガイダンス
• プラグイン SLAS を使用したハイブリッドストアフロントの構成
• Protect Privacy with a Tracking Consent Banner (追跡同意バナーによるプライバシーの保護) を参照してください。
• コンポーザブルストアフロントの使用開始

j

入門ガイド

コンポーザブルストアフロントの概要

ハイブリッド実装でのコンポーザブルストアフロントの使用

ハイブリッド認証で構成する

ハイブリッド実装の eCDN ルール

ハイブリッド実装のための Einstein Activities

プラグイン SLAS セットアップ

PWA Kit フレームワーク

成功につながるスキル

Ask the Community

設定する

サイトの構築

マーチャントチームへの支援

テスト、立ち上げ、監視

メンテナンス

日本語

English

日本語

中文

繁體中文

Français

Deutsch

Italiano

한국어

Português

Español (México)