Con B2C Commerce versione 25.3, l’autenticazione ibrida (autentica) sostituisce l’opzione del cartridge SLAS del plug-in.
L’autenticazione ibrida è una soluzione autonoma per le implementazioni di siti che richiedono sia l’autorizzazione Storefront Reference Architecture (SFRA)/SiteGenesis (SG) sia l’autorizzazione Shopper Login and API Access Service (SLAS). Ciò significa che sono necessari sia un dwsid token Web (SFRA/SiteGenesis) che un token Web JSON (SLAS) e che questi token devono essere mantenuti sincronizzati. L’autenticazione ibrida è un miglioramento rispetto all’approccio Plugin SLAS, che offre un metodo più efficiente e semplificato.
L’autenticazione ibrida migliora le prestazioni e la stabilità degli storefront ibridi spostando la funzionalità direttamente nella piattaforma B2C Commerce.
È vivamente consigliato eseguire la migrazione all’autenticazione ibrida in modo da poter sfruttare le prestazioni migliorate e il flusso di lavoro semplificato.
Note
Questa guida spiega come configurare l’autenticazione ibrida per uno storefront ibrido in parte SFRA/SiteGenesis e in parte storefront componibile.
Per ulteriori informazioni sull’autenticazione ibrida, vedere Autenticazione ibrida.
Le attività coinvolte in un’implementazione ibrida con autenticazione ibrida includono:
Per utilizzare l’autenticazione ibrida, crea il tuo sito con:
commerce-sdk-react@3.3.0 o versioni successive
Progressive Web App (PWA) Kit versione 3.10 o successiva
Nella tabella seguente viene confrontato il supporto delle funzionalità di PWA Kit per Plug-in SLAS e Hybrid Auth.
| Nome | della funzione supportato in PWA Kit w. Plugin SLAS | supportato in PWA Kit w. Note sull’autenticazione | ibrida |
|---|---|---|---|
| SiteGenesis | N | Y | |
| Sfollati interni di terze parti e accesso | social N | Parzialmente supportato a partire dal 30/04/2025. |
|
| Accesso | senza password N | Y | |
| SLAS Clienti | Privati Y | Y | |
| Il supporto per i client | pubblici SLAS Y | N* | Hybrid Auth è previsto per una versione futura. |
| SLAS Trusted System (TSOB) | N | Y | |
| Funzionalità | ”Memorizza accesso” dell’Script API N | N/D
|
|
| PWA Kit versione 2.x | Y | N* | Per HA, il supporto per PWA Kit 2.x dipende dal supporto del client pubblico SLAS ed è pianificato per una versione futura. |
| PWA Kit versione 3.x | Y | Y _ | salesforce/commerce-sdk-react v3.2.0_ viene fornito con PWA Kit 3.9.0. |
| Do Not Track (DNT) | N | Y | È necessario eseguire passaggi specifici per abilitare e sincronizzare DNT. Consulta la guida alla documentazione. |
| Contesto | acquirente N | Y |
|
| Esclusione | controller Y | N | In Hybrid Auth, non è necessario escludere alcun controller. |
| Personalizzazione | dell’impostazione dei cookie Y, tramite la personalizzazione | N/D | In Hybrid Auth, a differenza plugin_SLAS di , non si ha più accesso all’oggetto cookie e non è più possibile ignorare le impostazioni dei cookie. |
*Il supporto è previsto per una versione futura.
Per configurare l’autenticazione ibrida per uno storefront ibrido in parte SFRA/SiteGenesis e in parte Storefront componibile, attenersi alla seguente procedura descritta in dettaglio in questa guida.
Configurare la rete eCDN (Embedded Content Delivery Network) per l’invio di richieste di pagina nella parte superiore della canalizzazione allo storefront componibile: home page (/), pagina elenco categoria (/category) e pagina dettagli prodotto (/product). Queste pagine vengono distribuite in un ambiente di runtime gestito (MRT) in esecuzione su mystorefront.mobify-storefront.com. Quando l’acquirente decide di effettuare un acquisto, la eCDN lo reindirizza alla pagina di checkout SFRA/SG esistente in esecuzione su www.mystorefront.com.
Per ulteriori informazioni sul routing del traffico a MRT, vedere:
Fai 1 o 2.
npx @salesforce/pwa-kit-create-app my-hybrid-storefronto
sfcc.session_bridge.Per impostazione predefinita, PWA Kit utilizza History API per la navigazione. Quando un acquirente fa clic su un link creato con il componente di React Router, viene attivata una navigazione soft verso il componente corrispondente al percorso nell’oggetto route definito in app/routes.jsx. Per creare un link a una pagina non realizzata con PWA Kit (ad esempio basata su SFRA), è necessario rimuovere da app/routes.jsx qualsiasi route corrispondente al nome del percorso URL.
Se il progetto PWA Kit è stato generato con la versione 3.x del modello Retail React App utilizzando l’estensibilità del modello, è possibile sostituire il file per filtrare i overrides/app/routes.jsx collegamenti a pagine non PWA Kit utilizzando JavaScript.
È stato creato un esempio di override del overrides/app/routes.jsx file con tutte le modifiche apportate per filtrare /cart e /checkout instradare. Personalizza il codice di override di esempio in questo gist pubblico per filtrare i collegamenti a pagine non PWA Kit.
Infine, aggiornare la route generica PWA (/*) in app/routes.jsx. Sostituire il componente <PageNotFound /> PWA con un reindirizzamento all’origine predefinita.
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@3.2.0.Quando l’autenticazione ibrida è abilitata, le richieste SLAS /oauth2/token contengono un bridge dwsid di sessione utilizzando l’intestazione Set-Cookie nella risposta.
In Runtime gestito, abilitare il passthrough dei cookie:
Questi passaggi si applicano solo se in precedenza è stato utilizzato il plug-in SLAS nello storefront ibrido. Se disponi di un nuovo storefront ibrido e non hai mai utilizzato Plugin SLAS prima d’ora, puoi saltare questi passaggi.
Note
Con la migrazione all’autenticazione ibrida di B2C Commerce, PWA Kit non utilizza più il plug-in SLAS. Per rimuovere Plugin SLAS dallo storefront ibrido:
Per i siti solo SFRA, quando l’autenticazione ibrida è abilitata per l’estensione di accesso acquirente, il valore DNT viene sincronizzato automaticamente con la sessione estesa, garantendo un’esperienza fluida tra le sessioni.
Quando si abilita sia l’autenticazione ibrida che la sincronizzazione DNT, il consenso al monitoraggio fornito da un acquirente su un sito viene sincronizzato automaticamente con l’altro sito. Ad esempio, in un sito ibrido in cui la home page viene eseguita su PWA Kit e la pagina del carrello su SFRA:
Se è stata personalizzata o si prevede di personalizzare l’implementazione DNT predefinita, la sincronizzazione predefinita potrebbe non essere necessaria o funzionare come previsto. In questi casi, è possibile disabilitare la sincronizzazione DNT utilizzando una preferenza del sito. È comunque possibile abilitare l’autenticazione ibrida anche se la sincronizzazione DNT è disattivata.
C’è una differenza fondamentale nella scadenza dei cookie DNT tra SFRA e PWA Kit:
Quando un acquirente passa da una pagina PWA Kit a una pagina SFRA, la scadenza del cookie DNT passa dalla scadenza del token di aggiornamento a una scadenza basata sulla sessione. Se l’acquirente chiude il browser, il cookie viene eliminato. Di conseguenza, quando l’acquirente ritorna, il banner di consenso al monitoraggio viene nuovamente visualizzato come previsto.
Si consiglia vivamente di testare la configurazione ibrida in un ambiente locale. A tale scopo, è necessario configurare un proxy inverso, poiché la rete eCDN non supporta SIG e ODS. Per configurare e testare il sito ibrido localmente su istanze SIG, è necessario utilizzare il proprio proxy inverso o CDN per suddividere il traffico.
È stata creata un’app Node.js di esempio che può essere utilizzata per sviluppare e testare i flussi di acquirenti con distribuzione ibrida su PWA Kit e SFRA/SiteGenesis. Le istruzioni per l’installazione, la configurazione e il test per l’impostazione del proxy inverso sono riportate nel file README del repository.
È possibile configurare la propria istanza ODS affinché utilizzi la configurazione di un alias simile alla configurazione di produzione. In questo modo è possibile mantenere identiche le impostazioni locali e di produzione. Ad esempio, se si configura la Sandbox in modo che il sito ibrido sia disponibile all’URI /, gli URL inviati da pwa-kit includeranno l’ID di sito senza dover essere tradotti. Questa è la configurazione tipica di un sito Production.
Per abilitare gli alias in Business Manager, seguire le istruzioni in questo modulo per Salesforce B2C Commerce Hostname Aliases in Trailhead.
È possibile configurare le route PWA Kit in modo da includere il prefisso /s/SiteID a tutti gli URL in uscita (ad esempio quelli destinati a SFRA). In questo modo, l’istanza riceverà gli URL del controller secondo la modalità normalmente utilizzata nelle Sandbox senza che sia necessario configurare esplicitamente gli alias dei nomi host. Questa configurazione potrebbe non essere appropriata per gli ambienti Production. Pertanto, è consigliabile prevedere una route generica diversa a seconda che la distribuzione sia Production o Sandbox.
Per configurare i prefissi route, aggiornare la route generica PWA (/*) in app/routes.jsx o 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}
j