Konfigurieren einer Hybrid Storefront mit Hybrid Auth

In B2C Commerce Version 25.3 ersetzt die Hybridauthentifizierung (Authentifizierung) die Option Plugin SLAS Cartridge.

Hybrid Auth ist eine eigenständige Lösung für Site-Implementierungen, die sowohl eine Storefront Reference Architecture (SFRA)/SiteGenesis (SG)-Autorisierung als auch eine Shopper Login and API Access Service (SLAS)-Autorisierung erfordern. Das bedeutet, dass Sie sowohl ein dwsid (SFRA/Site Genesis) als auch ein JSON Web Token (SLAS) benötigen, und diese Token müssen synchron gehalten werden. Die Hybridauthentifizierung ist eine Verbesserung gegenüber dem Plugin-SLAS-Ansatz und bietet eine effizientere und schlankere Methode.

Hybrid Auth verbessert die Leistung und Stabilität von hybriden Storefronts, da die Funktionalität damit direkt auf der B2C Commerce-Plattform ausgeführt wird.

In diesem Leitfaden wird erläutert, wie Sie die Hybridauthentifizierung für eine Hybrid-Storefront konfigurieren, die zum Teil SFRA/SiteGenesis und zum Teil Composable Storefront ist.

Weitere Informationen zur Hybridauthentifizierung finden Sie unter Hybridauthentifizierung.

Zu den Aufgaben, die mit einer Hybridimplementierung mit Hybridauthentifizierung verbunden sind, gehören:

1. Führen Sie die Schritte unter Hybridauthentifizierung aus.
2. Konfigurieren der Hybridauthentifizierung für Composable Storefront (erforderlich).
3. Verwenden Sie Commerce-API-CDN-Zonen, um Datenverkehr an Managed Runtime weiterzuleiten. Weitere Informationen finden Sie unter CDN-APIs für phasenweise Headless-Rollouts (erforderlich).
4. Analytics mithilfe von Einstein Activities für phasenweise Headless-Rollouts (optional)

Um die Hybridauthentifizierung zu verwenden, erstellen Sie Ihre Website mit:

• commerce-sdk-react@3.3.0 oder höher

• Progressive Web App (PWA) Kit Version 3.10 oder höher

In der folgenden Tabelle wird die Unterstützung von PWA Kit-Funktionen für Plug-In-SLAS mit der Hybridauthentifizierung verglichen.

*Der Support ist für eine zukünftige Version geplant.

Um die Hybridauthentifizierung für eine Hybrid-Storefront zu konfigurieren, die teilweise SFRA/SiteGenesis und teilweise Composable Storefront ist, führen Sie die folgenden Schritte aus, die in diesem Leitfaden ausführlich beschrieben werden.

• Richten Sie Origin-Regeln für das Embedded Content Delivery Network (eCDN) ein.
• Erstellen Sie eine React-App für den Einzelhandel mit PWA Kit.
• Aktualisieren Sie PWA-Kit-Routen.
• Führen Sie ein Upgrade @salesforce/commerce-sdk-react durch.
• Aktivieren Sie Cookies in der verwalteten Laufzeit.
• Entfernen Sie Plugin SLAS aus dem Cartridge-Pfad.
• Aktivieren/Deaktivieren der “Do Not Track”-Synchronisierung.

Konfigurieren Sie das eingebettete Content Delivery Network (eCDN) so, dass Seitenanfragen am oberen Rand des Trichters an die Composable Storefront: Startseite (/), die Kategorielistenseite (/category) und die Produktdetailseite (/product) gesendet werden. Diese Seiten werden in einer MRT-Umgebung (Managed Runtime) bereitgestellt, die auf mystorefront.mobify-storefront.com ausgeführt wird. Wenn sich der Käufer für einen Kauf entscheidet, leitet das eCDN den Käufer auf die vorhandene SFRA/SG-Checkout-Seite weiter, die auf www.mystorefront.comausgeführt wird.

• Um Commerce-API-CDN-Zonen zum Weiterleiten von Datenverkehr an Managed Runtime zu verwenden, führen Sie die Schritte unter CDN-APIs für Hybridimplementierungen aus.

Weitere Informationen zum Weiterleiten von Traffic an MRT finden Sie unter:

• TLS-Zertifikate
• DNS CNAME
• Konfiguration Ihrer Umgebung

Machen Sie 1 oder 2.

1. Erstellen einer React-App für den Einzelhandel mit einer privaten SLAS-Clientkonfiguration
   • Erstellen Sie eine PWA Kit-App, indem Sie den folgenden Generatorbefehl in einem Terminalfenster ausführen: npx @salesforce/pwa-kit-create-app my-hybrid-storefront
   • Wählen Sie Die Retail-App mit Ihrer eigenen Commerce Cloud-Instanz aus.
   • Folgen Sie den Anweisungen im Terminal.
   • Antworten Sie mit Ja, wenn Sie gefragt werden, ob Ihr SLAS-Client privat ist.

oder

2. Alternativ können Sie eine React App für den Einzelhandel mit einer voreingestellten Konfiguration generieren und die SLAS-Client-ID in Ihren privaten Client ändern, sobald die App generiert wurde.
   • Führen Sie die Schritte in der Schnellstartanleitung aus.
   • Verwendung eines privaten SLAS Client
   • Stellen Sie sicher, dass der SLAS-Client, der für die Hybridauthentifizierung verwendet wird, den sfcc.session_bridge Bereich enthält.

Standardmäßig verwendet PWA Kit die History API für die Navigation. Klickt ein Käufer auf einen mit der-Komponente von React Router erstellten Link, wird eine softe Navigation zu der Komponente ausgelöst, die dem Pfad des in app/routes.jsx definierten Routenobjekts entspricht. Zum Verlinken einer nicht mit PWA Kit betriebenen Seite (beispielsweise einer SFRA-Seite) müssen Sie jede dem URL-Pfadname entsprechende Route aus app/routes.jsx entfernen.

1. Wenn Ihr PWA Kit-Projekt mit Version 3.x der React App-Vorlage für den Einzelhandel mithilfe der Vorlagenerweiterbarkeit generiert wurde, können Sie die overrides/app/routes.jsx Datei überschreiben, um Links zu Nicht-PWA Kit-Seiten mithilfe von JavaScript herauszufiltern.

   Wir haben ein Beispiel für eine Überschreibung der overrides/app/routes.jsx Datei mit allen Änderungen erstellt, die herausgefiltert /cart werden sollen, und /checkout Routen. Passen Sie den Beispielüberschreibungscode in diesem öffentlichen Gist an, um Links zu Nicht-PWA Kit-Seiten herauszufiltern.

2. Aktualisieren Sie zum Schluss die PWA Catch-all-Route (/*) in app/routes.jsx. Ersetzen Sie die PWA-Komponente '' mit einer Umleitung an den Standardursprung.

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    }

• Wenn Ihre Website commerce-sdk-react verwendet, führen Sie ein Upgrade auf @salesforce/commerce-sdk-react@3.2.0 oder höher durch.

Wenn Hybrid Auth aktiviert ist, enthalten SLAS-Anforderungen /oauth2/token eine Sitzungsbrücke, die mithilfe des Set-Cookie Headers in der Antwort überbrückt wird dwsid.

Aktivieren Sie in Managed Runtime das Cookie-Passthrough:

1. Melden Sie sich bei Managed Runtime Admin an.
2. Navigieren Sie zu Ihrem Projekt und Ihrer Umgebung.
3. Klicken Sie auf Umgebungseinstellungen.
4. Scrollen Sie zum Abschnitt Erweitert , und wählen Sie die Schaltfläche Bearbeiten aus.
5. Aktivieren Sie den Schalter neben Cookies.
6. Scrollen Sie zurück zum Abschnitt Erweitert , und wählen Sie Aktualisieren aus.
7. Warten Sie, bis Ihr Storefront-Bundle erneut bereitgestellt wird.

Mit der Migration auf B2C Commerce Hybrid Auth verwendet PWA Kit keine Plug-in-SLAS mehr. So entfernen Sie Plugin SLAS aus Ihrer Hybrid-Storefront:

1. Gehen Sie zu Administration > Sites > Verwalten von Sites > Wählen Sie Site aus.
2. Gehen Sie zur Registerkarte Einstellungen.
3. Entfernen Sie Plugin SLAS aus dem Cartridge-Pfad.
4. Wenn Sie Codeanpassungen rund um die Käuferauthentifizierung vorgenommen haben, die jedoch nicht spezifisch für Plug-in-SLAS sind, sollten diese weiterhin unverändert funktionieren.
   • Wenn Sie SLAS-spezifische Plug-In-Anpassungen vorgenommen haben, überprüfen Sie diese Anpassungen. Diese Änderungen sind möglicherweise nicht erforderlich, oder Sie müssen die Änderungen in einer anderen Kassette erneut implementieren.
   • Befolgen Sie Best Practices. Alle Ihre Codeanpassungen müssen in einer separaten Cartridge implementiert werden, anstatt direkt im vorkonfigurierten SFRA-Cartridge-Code.
   • Stellen Sie sicher, dass beim Wechsel zur Hybridauthentifizierung keiner Ihrer benutzerdefinierten Cartridge-Codes sitzungsüberbrückende Endpunkte aufruft. Dies führt zu Problemen in Shopper-Sitzungen. Hybrid Auth kümmert sich jetzt für Sie um Shopper-Sitzungen.

Wenn bei reinen SFRA-Sites die Hybridauthentifizierung für die Shopper-Login-Erweiterung aktiviert ist, wird der DNT-Wert automatisch mit der erweiterten Sitzung synchronisiert, um eine nahtlose sitzungsübergreifende Erfahrung zu gewährleisten.

• Um die DNT-Synchronisierung (Do Not Track) im Business Manager zu aktivieren/deaktivieren, navigiere zu Händler-Tools Website-Einstellungen > für Hybrid-Authentifizierung auswählen>.>

Wenn Sie sowohl die Hybridauthentifizierung als auch die DNT-Synchronisierung aktivieren, wird die von einem Käufer auf einer Website erteilte Einwilligung zur Nachverfolgung automatisch mit der anderen Website synchronisiert. Auf einer Hybridwebsite, auf der die Startseite auf PWA Kit und die Warenkorbseite auf SFRA ausgeführt wird, gilt beispielsweise Folgendes:

• Auf der Startseite (PWA Kit) wird dem Käufer eine Einverständniserklärung präsentiert und er gibt seine Tracking-Präferenz an.
• Wenn der Käufer zur Warenkorbseite (SFRA) navigiert, wird der DNT-Wert aus dem PWA-Kit mit SFRA synchronisiert.
• Dies hat zur Folge, dass der Käufer auf der SFRA-Warenkorbseite nicht erneut zur Sendungsverfolgungseinwilligung aufgefordert wird.

Wenn Sie die DNT-Standardimplementierung angepasst haben oder dies planen, ist die Standardsynchronisierung möglicherweise nicht erforderlich und funktioniert nicht wie erwartet. In solchen Fällen können Sie die DNT-Synchronisierung mithilfe einer Standorteinstellung deaktivieren. Sie können die Hybridauthentifizierung auch dann aktivieren, wenn die DNT-Synchronisierung deaktiviert ist.

Es gibt einen entscheidenden Unterschied beim Ablauf von DNT-Cookies zwischen SFRA und PWA Kit:

• SFRA legt fest, dass das DNT-Cookie am Ende der Sitzung abläuft.
• PWA Kit legt den Ablauf so fest, dass er der Lebensdauer des Aktualisierungstokens entspricht (z. B. 30 Tage für Gastkäufer).

Wenn ein Käufer von einer PWA Kit-Seite zu einer SFRA-Seite wechselt, ändert sich der Ablauf des DNT-Cookies vom Ablauf des Aktualisierungstokens zu einem sitzungsbasierten Ablauf. Wenn der Käufer den Browser schließt, wird das Cookie gelöscht. Wenn der Käufer zurückkehrt, wird das Tracking-Consent-Banner daher wieder wie erwartet angezeigt.

Es wird dringend empfohlen, Ihr Hybrid-Setup in einer lokalen Umgebung zu testen. Dazu müssen Sie einen Reverse-Proxy einrichten, da eCDN SIGs und ODS nicht unterstützt. Um Ihre Hybrid-Site lokal auf SIG-Instanzen einzurichten und zu testen, müssen Sie Ihren eigenen Reverse-Proxy oder CDN verwenden, um den Datenverkehr aufzuteilen.

Wir haben eine Beispiel-Node.js-App erstellt, mit der Sie Käufer-Flows mit hybrider Bereitstellung über PWA Kit und SFRA/SiteGenesis entwickeln und testen können. Setup-, Konfigurations- und Testanweisungen zum Einrichten des Reverseproxys werden in der README-Datei für das Repository erwähnt.

Sie können Ihre ODS so konfigurieren, dass sie eine Alias-Konfiguration verwendet, die Ihrer Production-Konfiguration ähnelt. Dies kann dazu beitragen, dass Ihre lokalen und Production-Voreinstellungen identisch bleiben. Indem Sie beispielsweise Ihre Sandbox so konfigurieren, dass Ihre hybride Website unter der /-URI verfügbar ist, stellen Sie sicher, dass die von pwa-kit gesendeten URLs nicht übersetzt werden müssen, damit sie die Website-ID enthalten. Dies entspricht der üblichen Konfiguration einer Production-Website.

Wenn Sie Aliasse im Business Manager aktiveren möchten, befolgen Sie die Anweisungen in diesem Trailhead-Modul für Salesforce B2C Commerce Host-Namen-Aliasse.

Sie können Ihre PWA Kit-Routenkonfiguration so konfigurieren, dass alle ausgehenden URLs (wie z. B. die für SFRA bestimmten) das Präfix /s/SiteID enthalten. Dies gewährleistet, dass Ihre Instanz Controller-URLs auf eine Weise erhält, die normalerweise für Sandboxes verwendet wird, ohne dass Sie Host-Namen-Aliasse erst ausdrücklich konfigurieren müssen. Hinweis: Dies ist möglicherweise nicht für die Production-Konfiguration geeignet. Deshalb empfiehlt sich eine andere Catch-All-Route für Production-Bereitstellungen als für Sandbox-Bereitstellungen.

Aktualisieren Sie zur Konfiguration der Routenpräfixe die PWA-Catch-All-Route (/*) in app/routes.jsx oder overrides/app/routes.jsx.

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}

• Verwenden von Composable Storefront in einer Hybridimplementierung
• Hybride Authentifizierung
• Leitfaden für die Hybridimplementierung
• Konfigurieren einer Hybrid-Storefront mit Plug-in-SLAS
• Siehe Protect Privacy with a Tracking Consent Banner (Datenschutz mit einem Tracking-Einwilligungsbanner).
• Erste Schritte mit Composable Storefront

j

Erste Schritte

Einführung in Composable Storefront

Verwenden von Composable Storefront in einer Hybridimplementierung

Konfigurieren mit Hybrid Auth

eCDN-Regeln für hybride Implementierungen

Einstein-Aktivitäten für hybride Implementierungen

Plugin SLAS-Einrichtung

PWA Kit Framework

Erfolgsfördernde Fähigkeiten

Fragen Sie die Community

Einrichten

Erstellen Sie Ihre Website

Befähigen Sie Ihr Händlerteam

Testen, einführen und überwachen

Verwalten

Deutsch

English

日本語

中文

繁體中文

Français

Deutsch

Italiano

한국어

Português

Español (México)