Configurer une boutique hybride avec authentification hybride

Avec B2C Commerce version 25.3, l’authentification hybride (auth) remplace l’option de cartridge Plug-in SLAS.

L’authentification hybride est une solution autonome pour les implémentations de sites qui nécessitent à la fois une autorisation Storefront Reference Architecture (SFRA)/SiteGenesis (SG) et une autorisation Shopper Login and API Access Service (SLAS). Cela signifie que vous avez besoin à la fois d’un dwsid jeton Web (SFRA/Site Genesis) et d’un jeton Web JSON (SLAS), et que ces jetons doivent être synchronisés. L’authentification hybride est une amélioration par rapport à l’approche Plugin SLAS, offrant une méthode plus efficace et rationalisée.

L’authentification hybride améliore les performances et la stabilité des boutiques hybrides en déplaçant la fonctionnalité directement dans la plateforme B2C Commerce.

Ce guide explique comment configurer l’authentification hybride pour une boutique hybride qui est à la fois SFRA/SiteGenesis et composable.

Pour plus d’informations sur l’authentification hybride, consultez Authentification hybride.

Les tâches impliquées dans une implémentation hybride avec authentification hybride sont les suivantes :

1. Suivez les étapes de l’authentification hybride.
2. Configurer l’authentification hybride pour la boutique composable (obligatoire).
3. Utilisez les zones CDN de l’API Commerce pour acheminer le trafic vers Managed Runtime. Reportez-vous à la section API CDN pour les déploiements headless par phases (obligatoire).
4. Obtenir des analyses à l’aide d’Einstein Activities pour des déploiements headless échelonnés (facultatif)

Pour utiliser l’authentification hybride, construisez votre site avec :

• commerce-sdk-react@3.3.0 ou version ultérieure

• Kit Progressive Web App (PWA) version 3.10 ou ultérieure

Le tableau suivant compare la prise en charge des fonctionnalités PWA Kit pour les SLAS de plug-in par rapport à l’authentification hybride.

*La prise en charge est prévue pour une version future.

Pour configurer l’authentification hybride pour une boutique hybride qui est à la fois SFRA/SiteGenesis et composable, suivez les étapes décrites en détail dans ce guide.

• Configurer une boutique hybride avec authentification hybride
  • Résumé du processus
  • Prérequis
  • Matrice de prise en charge de la fonctionnalité d’authentification hybride
  • Configurer l’authentification hybride pour une boutique composable
    • Configurer les règles d’origine du réseau de diffusion de contenu intégré (eCDN)
    • Créer une PWA Kit Retail React App
    • Mettre à jour les itinéraires du PWA Kit
    • Mise à niveau @salesforce/commerce-sdk-react
    • Activer les cookies sur le runtime managé
    • Supprimer le plugin SLAS du chemin d’accès de la cartridge
  • Activer/Désactiver la synchronisation Ne pas suivre
    • Aucune personnalisation
    • DNT Cookie Expiration
  • Configurer l’hybride localement (instances SIG)
    • Configurer une On-Demand Sandbox pour utiliser un alias
    • Configurer les routes PWA Kit pour préfixer les URL sortantes (facultatif)
  • Voir aussi

Configurez le réseau de diffusion de contenu intégré (eCDN) pour envoyer les requêtes de page en haut de l’entonnoir à la boutique composable : page d’accueil (/), page de liste de catégories (/category) et page de détails du produit (/product). Ces pages sont déployées dans un environnement MRT (Managed Runtime) s’exécutant sur mystorefront.mobify-storefront.com. Lorsque l’acheteur décide d’effectuer un achat, l’eCDN le redirige vers la page de paiement SFRA/SG existante en cours d’exécution le www.mystorefront.com.

• Pour utiliser les zones CDN de l’API Commerce afin d’acheminer le trafic vers Managed Runtime, suivez la procédure décrite dans API CDN pour les implémentations hybrides.

Pour plus d’informations sur le routage du trafic vers MRT, voir :

• Certificats TLS
• DNS CNAME
• Configurer votre environnement

Faites-en 1 ou 2.

1. Créer une Retail React App avec une configuration de client privé SLAS
   • Créez une application PWA Kit en exécutant la commande de générateur suivante dans une fenêtre de terminal : npx @salesforce/pwa-kit-create-app my-hybrid-storefront
   • Sélectionnez l’application Retail à l’aide de votre propre instance Commerce Cloud.
   • Suivez les instructions dans le terminal.
   • Répondez Oui à la question : Votre client SLAS est-il privé ?

ou

2. Vous pouvez également générer une application Retail React App avec une configuration prédéfinie et remplacer l’identifiant de client SLAS par votre client privé une fois l’application générée.
   • Suivez les étapes du guide de démarrage rapide.
   • Utiliser un client privé SLAS
   • Assurez-vous que le client SLAS utilisé pour l’authentification hybride inclut l’étendue sfcc.session_bridge.

Par défaut, PWA Kit utilise History API pour la navigation. Lorsqu’un acheteur clique sur un lien créé avec le composant de React Router, il déclenche une navigation logicielle vers le composant correspondant au chemin dans l’objet route défini dans app/routes.jsx. Pour créer un lien vers une page externe à PWA Kit (une page créée à l’aide de SFRA, par exemple), vous devez supprimer de app/routes.jsx toute route correspondant au chemin d’accès de l’URL.

1. Si votre projet PWA Kit a été généré avec la version 3.x du modèle Retail React App à l’aide de l’extensibilité du modèle, vous pouvez remplacer le fichier pour filtrer les overrides/app/routes.jsx liens vers des pages autres que PWA Kit à l’aide de JavaScript.

   Nous avons créé un exemple de remplacement du overrides/app/routes.jsx fichier avec toutes les modifications en place pour filtrer /cart les routes et /checkout les itinéraires. Personnalisez l’exemple de code de remplacement dans ce gist public pour filtrer les liens vers des pages autres que PWA Kit.

2. Enfin, mettez à jour la route PWA catch-all (/*) dans app/routes.jsx. Remplacez le composant PWA par une redirection vers l’origine par défaut.

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    }

• Si votre site utilise commerce-sdk-react, effectuez une mise à niveau vers @salesforce/commerce-sdk-react@3.2.0 ou une version ultérieure.

Lorsque l’authentification hybride est activée, les demandes SLAS /oauth2/token contiennent un pontage dwsid de session à l’aide de l’en-tête Set-Cookie de la réponse.

Dans Managed Runtime, activez le transfert des cookies :

1. Connectez-vous à Managed Runtime Admin.
2. Accédez à votre projet et à votre environnement.
3. Cliquez sur Environment Settings (Paramètres d’environnement).
4. Faites défiler jusqu’à la section Avancé et sélectionnez le bouton Modifier.
5. Activez l’option à côté de Cookies.
6. Faites défiler l’écran jusqu’à la section Avancé et sélectionnez Mettre à jour.
7. Attendez que votre offre groupée de boutique en ligne soit redéployée.

Avec la migration vers l’authentification hybride B2C Commerce, PWA Kit n’utilise plus les SLAS de plug-in. Pour supprimer Plugin SLAS de votre boutique hybride :

1. Accédez à Administration > Sites > Gérer les sites > Sélectionnez Site.
2. Accédez à l’onglet Paramètres.
3. Supprimez le plugin SLAS du chemin d’accès de la cartridge.
4. Si vous avez des personnalisations de code autour de l’authentification de l’acheteur mais non spécifiques aux SLAS de plug-in, elles devraient continuer à fonctionner telles quelles.
   • Si vous avez effectué des personnalisations spécifiques à Plugin SLAS, passez en revue ces personnalisations. Il se peut que ces modifications ne soient pas nécessaires ou que vous deviez les réimplémenter dans une autre cartridge.
   • Suivez les meilleures pratiques. Toutes vos personnalisations de code doivent être implémentées dans une cartridge distincte plutôt que directement dans le code de cartridge SFRA prêt à l’emploi.
   • Assurez-vous que lorsque vous passez à l’authentification hybride, aucun de vos codes de cartridge personnalisés n’appelle de points de terminaison de pontage de session. Cela entraînera des problèmes dans les sessions acheteur. L’authentification hybride s’occupe désormais des sessions d’achat pour vous.

Pour les sites SFRA uniquement, lorsque l’authentification hybride est activée pour l’extension de connexion de l’acheteur, la valeur DNT est automatiquement synchronisée avec la session étendue, ce qui garantit une expérience transparente entre les sessions.

• Pour activer/désactiver la synchronisation Do Not Track (DNT) dans Business Manager, accédez à Outils du marchand Sélectionnez Site > Préférences > du site Paramètres d’authentification > hybride.

Lorsque vous activez à la fois l’authentification hybride et la synchronisation DNT, le consentement au suivi fourni par un acheteur sur un site est automatiquement synchronisé avec l’autre site. Par exemple, dans un site hybride où la page d’accueil s’exécute sur PWA Kit et la page du panier sur SFRA :

• Sur la page d’accueil (PWA Kit), l’acheteur se voit présenter un formulaire de consentement et indique sa préférence de suivi.
• Lorsque l’acheteur accède à la page du panier (SFRA), la valeur DNT de PWA Kit est synchronisée avec SFRA.
• Par conséquent, la page du panier SFRA n’invite plus l’acheteur à donner son consentement au suivi.

Si vous avez personnalisé ou prévoyez de personnaliser l’implémentation DNT par défaut, il est possible que la synchronisation par défaut ne soit pas requise et ne fonctionne pas comme prévu. Dans ce cas, vous pouvez désactiver la synchronisation DNT à l’aide d’une préférence du site. Vous pouvez toujours activer l’authentification hybride même si la synchronisation DNT est désactivée.

Il existe une différence essentielle dans l’expiration des cookies DNT entre SFRA et PWA Kit :

• SFRA configure le cookie DNT pour qu’il expire à la fin de la session.
• PWA Kit définit l’expiration de manière à ce qu’elle corresponde à la durée de vie du jeton d’actualisation (par exemple, 30 jours pour les acheteurs invités).

Lorsqu’un acheteur passe d’une page PWA Kit à une page SFRA, l’expiration du cookie DNT passe de l’expiration du jeton d’actualisation à une expiration basée sur la session. Si l’acheteur ferme le navigateur, le cookie est supprimé. Par conséquent, lorsque l’acheteur revient, la bannière de consentement au suivi s’affiche à nouveau comme prévu.

Nous vous recommandons vivement de tester votre configuration hybride dans un environnement local. Pour ce faire, vous devez configurer un proxy inverse car l’eCDN ne prend pas en charge les SIG et les ODS. Pour configurer et tester votre site hybride localement sur des instances SIG, vous devez utiliser votre propre proxy inverse ou CDN pour répartir le trafic.

Nous avons créé un exemple d’application Node.js. Vous pouvez l’utiliser pour développer et tester des flux d’acheteurs pour un déploiement hybride sur PWA Kit et SFRA/SiteGenesis. Les instructions d’installation, de configuration et de test pour la configuration du proxy inverse sont mentionnées dans le fichier README du dépôt.

Vous pouvez configurer votre ODS pour utiliser une configuration d’alias similaire à votre configuration de production. Cela peut vous aider à maintenir des configurations locales et de production identiques. Par exemple, en configurant votre sandbox de sorte que votre site hybride soit disponible à l’URI /, vous vous assurez que les URL envoyées par pwa-kit n’ont pas besoin d’être traduites pour inclure l’identifiant du site. C’est généralement ainsi qu’un site de production est configuré.

Pour activer les alias dans Business Manager, suivez les instructions de ce module pour les alias de nom d’hôte Salesforce B2C Commerce sur Trailhead.

Vous pouvez configurer les routes de votre PWA Kit pour modifier toutes les URL sortantes (par exemple, celles destinées à SFRA) afin d’inclure le préfixe /s/SiteID. Cela garantit que votre instance reçoit les URL du controller d’une manière normalement utilisée sur les sandboxes sans avoir à configurer explicitement des alias de noms d’hôte. Notez que cela peut ne pas convenir à une configuration de production ; vous souhaiterez donc peut-être avoir une route par défaut (catch-all) différente pour les déploiements en production et sur sandbox.

Pour configurer les préfixes de route, mettez à jour la route par défaut de PWA (/*) dans app/routes.jsx ou 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}

• Utiliser une boutique composable dans une implémentation hybride
• Authentification hybride
• Conseils pour la mise en œuvre hybride
• Configurer une boutique hybride avec des plug-ins SLAS
• Voir Protect Privacy with a Tracking Consent Banner (Protéger la confidentialité avec une bannière de consentement au suivi).
• Premiers pas avec Composable Storefront

j

Premiers pas

Présentation de la boutique composable

Utiliser une boutique composable dans une implémentation hybride

Configurer avec l’authentification hybride

Règles eCDN pour les implémentations hybrides

Einstein Activities pour les implémentations hybrides

Configuration du plugin SLAS

Framework du PWA Kit

Les compétences pour réussir

Ask the Community

Préparez-vous

Construire votre site

Habiliter votre équipe marchande

Tester, lancer et surveiller

Maintenir

Français

English

日本語

中文

繁體中文

Français

Deutsch

Italiano

한국어

Português

Español (México)