PWA Kit est livré avec la possibilité d’utiliser la connexion sans mot de passe pour vos acheteurs. Incluez cette fonctionnalité dans votre site de kit Progressive Web App (PWA) pour améliorer l’expérience d’achat. La connexion sans mot de passe permet aux acheteurs de se connecter en toute sécurité à votre site à l’aide d’un code de vérification ou d’un lien dans un e-mail ou un SMS au lieu d’un mot de passe.
Notre site de démonstration montre l’implémentation par défaut de la connexion sans mot de passe.
Pour activer et configurer la connexion sans mot de passe pour votre site PWA Kit, suivez les étapes décrites dans ce guide. Tout au long de ce guide, nous utilisons un exemple de boutique avec l’URL : https://www.example.com. Remplacez-le example.com par votre nom de domaine.
Créez votre site à l’aide de Composable Storefront et de Retail React App version 6.0 ou ultérieure.
Configurez un client privé SLAS (Shopper Login and API Access). Pour plus d’informations sur la configuration d’un client privé SLAS pour une connexion sans mot de passe, reportez-vous à la section Configurer la connexion sans mot de passe.
Les acheteurs doivent se connecter à votre site au moins une fois à l’aide de leur nom d’utilisateur et de leur mot de passe avant de pouvoir utiliser la connexion sans mot de passe.
Contrairement au champ URL de redirection, le champ URL de rappel ne prend pas en charge les caractères génériques. Incluez toujours l’URL complète d’un rappel, y compris le protocole.
Note
1. Configurer l’URL de rappel
Fournissez une URL de rappel à SLAS. De cette façon, SLAS peut envoyer à cette URL toutes les informations dont votre site a besoin pour créer un jeton de connexion (code de vérification ou lien dans un e-mail ou un SMS) pour un acheteur. Pour plus d’informations, consultez Connexion sans mot de passe avec SLAS et Connexion sans mot de passe avec SMS.
SLAS envoie une requête HTTP POST à l’URL de rappel pour transférer les informations d’identification de l’acheteur vers une destination de votre choix, généralement un fournisseur de services de messagerie ou de marketing. Par défaut, PWA Kit génère un lien sécurisé et utilise Salesforce Marketing Cloud pour transférer le lien dans un e-mail. Pour personnaliser cette fonctionnalité, décrivez le mécanisme que vous souhaitez utiliser pour vous assurer que les acheteurs obtiennent le jeton sans mot de passe à huit chiffres généré par SLAS.
Il existe trois options possibles pour décrire le mécanisme de fourniture d’une URL de rappel à SLAS. Ils sont décrits en détail ci-dessous.
a. Utiliser une URL de rappel externe
b. Utiliser une intégration Marketing Cloud
c. Utiliser un point de terminaison POST personnalisé dans votre projet PWA Kit
a. Utiliser une URL de rappel externe
Fournissez toute URL de rappel externe accessible au public capable de traiter la remise du jeton à l’aide de l’adresse e-mail de l’acheteur.
Il peut s’agir, par exemple, d’une instance B2C Commerce, d’un environnement Managed Runtime ou de votre propre serveur.
Si vous disposez d’une licence Marketing Cloud, vous pouvez envoyer le jeton par e-mail ou par SMS (en fonction des conditions de votre contrat). Il s’agit de l’implémentation par défaut incluse dans PWA Kit.
Pré-requis
Pour connaître tous les prérequis et toutes les étapes qui s’appliquent à l’utilisation d’une intégration Marketing Cloud, consultez ces guides.
Définissez ces variables d’environnement dans Managed Runtime.
MARKETING_CLOUD_CLIENT_ID à votre identifiant client Marketing Cloud
MARKETING_CLOUD_CLIENT_SECRET à votre clé secrète client Marketing Cloud
MARKETING_CLOUD_SUBDOMAIN à votre sous-domaine Marketing Cloud
MARKETING_CLOUD_PASSWORDLESS_LOGIN_TEMPLATE à la clé de définition d’événement unique pour l’événement d’API transactionnelle attaché au modèle d’e-mail que vous avez stocké dans Marketing Cloud.
Configurez l’URL de rappel complète dans votre client SLAS. Par exemple, https://example.com/passwordless-login-callback. Reportez-vous à la section Configurer un client privé SLAS.
Si vous souhaitez personnaliser le chemin de rappel à partir de , mettez-le également à jour à ssr.js l’emplacement de configuration du point de /passwordless-login-callback terminaison POST. Voir l’option c. Utilisez un point de terminaison POST personnalisé dans votre projet PWA Kit ci-dessous.
ou
c. Utiliser un point de terminaison POST personnalisé dans votre projet PWA Kit
Configurez un point de terminaison POST personnalisé pour gérer l’envoi des jetons à app/ssr.js l’aide de l’option de votre choix : e-mail ou SMS. Reportez-vous à l’exemple de cette implémentation de app/ssr.js Marketing Cloud.
1// Define a POST route for the '/passwordless-login-callback' endpoint.2app.post('/passwordless-login-callback', (req, res)=>{3 const slasCallbackToken = req.headers['x-slas-callback-token']4 validateSlasCallbackToken(slasCallbackToken).then(()=>{5 sendMagicLinkEmail(6 req,7 res,8 PASSWORDLESS_LOGIN_LANDING_PATH,9 process.env.MARKETING_CLOUD_PASSWORDLESS_LOGIN_TEMPLATE10)11})12}
Configurez un client privé SLAS. Dans le champ URL de rappel, saisissez l’URL de rappel que vous avez configurée dans votre point de terminaison POST personnalisé.
2. Ajouter l’URL de rappel à la liste blanche
Pour l’une des trois options d’URL de rappel, assurez-vous que l’URL de rappel que vous avez configurée est sur liste blanche dans le Callback URL champ du client SLAS que vous utilisez. Pour ce faire, procédez comme suit :
Accéder à l’interface utilisateur d’administration de SLAS : Connectez-vous à votre instance Salesforce B2C Commerce et accédez à la section Admin SLAS.
Créer ou modifier un client : Sélectionnez votre client SLAS sur lequel vous souhaitez gérer les URL de rappel.
Ajouter des URL autorisées : Dans la configuration du client, fournissez une liste des URL de rappel valides pour votre site.
3. Terminez la configuration dans votre projet PWA Kit
a. Mises à jour template-retail-react-app/config/default.js
Pour configurer la connexion sans mot de passe dans votre projet PWA Kit, effectuez la mise à jour template-retail-react-app/config/default.js comme indiqué dans cet exemple.
Dans votre projet PWA Kit, utilisez l’URL de rappel que vous avez configurée dans le cadre des conditions préalables à la mise à jour template-retail-react-app/config/default.js comme suit.
1module.exports = {2 app:{3 login:{45 // Enable passwordless login with an absolute callback URL.6 passwordless:{7 enabled: true,8 callbackURI: 'https://example.com/passwordless-login-callback'9}1011 // Enable passwordless login with a relative callback URL.12 // This example callback URL uses the default Marketing Cloud implementation.13 // You can customize the behavior of this callback URL endpoint in ssr.js.14 passwordless: {15 enabled: true,16 callbackURI: '/passwordless-login-callback'171819 // More code here...
b. Facultatif : Utiliser une variable d’environnement pour définir l’URL de rappel
La valeur de la variable d’environnement pour la connexion sans mot de passe remplace toutes les valeurs que vous avez ajoutées dans template-retail-react-app/config/default.js.
Note
Si vous le souhaitez, vous pouvez définir l’URL de rappel à l’aide d’une variable d’environnement au lieu de template-retail-react-app/config/default.js. Utilisez-le template-retail-react-app/config/default.js pour activer la connexion sans mot de passe. Configurez cette variable d’environnement pour définir l’URL de rappel.
Meilleures pratiques pour la connexion sans mot de passe
Mettez en œuvre une limitation de débit pour éviter les abus de la fonctionnalité de connexion sans mot de passe. Par exemple, si vous utilisez un CDN intégré (eCDN), vous pouvez appliquer des règles de limitation de débit eCDN.
Utilisez des mesures de sécurité robustes pour protéger les comptes des acheteurs. Par exemple, si vous utilisez un réseau de diffusion de contenu (CDN) tiers, tel que Cloudfare, vous pouvez bloquer les requêtes en fonction du score de menace.
Suivez l’utilisation des options d’authentification par les acheteurs et diagnostiquez efficacement les problèmes. Par exemple, utilisez Log Center pour accéder aux journaux de Managed Runtime (MRT) et de votre instance B2C Commerce.
Résoudre les problèmes de connexion sans mot de passe
Cette section propose une solution pour une erreur courante que vous pouvez rencontrer concernant la connexion sans mot de passe.
Résultats inattendus avec la connexion sans mot de passe
Cause potentielle : L’étendue ou l’URL de rappel est incorrecte.
j