使用混合身份驗證配置混合網店

在 B2C Commerce 版本 25.3 中，混合身份驗證 （auth） 取代了外掛程式 SLAS 外掛程式選項。

混合身份驗證 是一種獨立解決方案，適用於需要Storefront Reference Architecture （SFRA）/SiteGenesis （SG） 授權和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 API （必需）。
4. 使用分階段無頭式部署的 Einstein Activities 取得分析 (選擇性)

若要使用混合身份驗證，請使用以下命令構建網站：

• commerce-sdk-react@3.3.0 或更高版本

• Progressive Web App （PWA） 工具包版本 3.10 或更高版本

下表比較了外掛程式 SLAS 與混合身份驗證的 PWA Kit 功能支援。

*計劃在將來的版本中提供支援。

要為屬於 SFRA/SiteGenesis 和可組合網店的混合網店配置混合身份驗證，請按照本指南中詳細描述的這些步驟進行作。

• 設置嵌入式內容交付網路 （eCDN） 源規則。
• 創建 PWA Kit Retail React App。
• 更新 PWA Kit 路由。
• 升級 @salesforce/commerce-sdk-react。
• 在託管運行時啟用 Cookie。
• 從外掛程式路徑中刪除外掛程式 SLAS。
• 啟用/禁用不跟蹤同步。

配置嵌入式內容交付網路 （eCDN） 以將漏鬥頂部的頁面請求發送到可組合網店：主頁 （/）、分類清單頁面 （/category） 和產品詳細資訊頁面 （/product）。這些頁面部署到在 mystorefront.mobify-storefront.com 上運行的託管運行時 （MRT） 環境。當購物者決定進行購買時，eCDN 會將購物者重定向到運行在 上 www.mystorefront.com運行的現有 SFRA/SG 結帳頁面。

• 要使用 Commerce API CDN 區域將流量路由到託管運行時，請按照 混合實施的 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 實體的零售應用程式。
   • 按照終端中的說明進行作。
   • 當被問到 時回答 是 您的 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 頁面的連結。

   我們創建了一個 overrides/app/routes.jsx 檔的範例覆蓋，其中包含所有更改以過濾掉 /cart 和 /checkout 路由。自定義此 公共 gist 中的示例重寫代碼，以篩選出指向非 PWA Kit 頁面的連結。

2. 最後，在 app/routes.jsx 中更新 PWA 全部擷取 (catch-all) 路由 (/*)。將 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 的會話。

在託管運行時中，啟用 Cookie 直通：

1. 登錄到 Managed Runtime Admin。
2. 導航到您的項目和環境。
3. 選擇 環境設置。
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 來拆分流量。

我們已建立一個範例 Node.js 應用程式，可用來開發及測試 PWA Kit 與 SFRA/SiteGenesis 之間的混合式部署購物者流程。 存儲庫的 README 中提到了設置反向代理的設置、配置和測試說明。

您可以將 ODS 設定為使用與 Production 設定類似的別名設定。這有助於讓本機和 Production 設定保持相同。例如，透過設定 Sandbox，讓混合式網站在 / URI 上可用，就能確保 pwa-kit 傳送的 URL 不需要轉換為包含網站 ID。這通常是 Production 網站的設定方式。

若要在 Business Manager 中啟用別名，請依照 Trailhead 上關於 Salesforce B2C Commerce 主機名稱別名的課程指示進行。

您可以將 PWA Kit 路由設定為所有傳出 URL (例如用於 SFRA 的 URL) 都加上前綴，以包含 /s/SiteID 前綴。這可確保您的執行個體是以通常用於 Sandbox 的方式接收控制器 URL，而不需要明確設定主機名稱別名。請注意，這可能不適合 Production 設定，所以您可能想要為 Production 和 Sandbox 部署使用不同的 catch-all 路由。

若要設定路由前綴，請在 app/routes.jsx 或 overrides/app/routes.jsx 中更新 PWA catch-all 路由 (/*)。

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 配置混合網店
• 請參閱使用追蹤同意橫幅保護隱私。
• 開始使用 Composable Storefront

j

開始使用

組合型網店簡介

在混合實施中使用可組合網店

使用混合身份驗證進行配置

混合實施的 eCDN 規則

用於混合實施的 Einstein Activities

外掛程式 SLAS 設定

PWA Kit 框架

成功技巧

Ask the Community

設置

建置網站

商家團隊賦能

測試、啟動、監控

維護

繁體中文

English

日本語

中文

繁體中文

Français

Deutsch

Italiano

한국어

Português

Español (México)