Implémenter la connexion sans mot de passe

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.

La connexion sans mot de passe n’est pas prise en charge dans les boutiques hybrides.

Pour utiliser la connexion sans mot de passe :

  • 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.

Il y a trois étapes de configuration.

  1. Configurer l’URL de rappel
  2. Ajouter l’URL de rappel à la liste blanche
  3. Terminez la configuration dans votre projet PWA Kit
  • 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.

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.

  • Configurez un client privé SLAS. Dans le champ URL de rappel, saisissez votre URL de rappel accessible publiquement.

ou

b. Utiliser une intégration Marketing Cloud

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.

Configurez votre intégration

Pour obtenir les valeurs de configuration de Marketing Cloud ci-dessous, consultez Créer une intégration d’API OAuth 2.0.

  • 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.
    voir Variables d’environnement.
  • 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.
  • 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é.

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.

a. Mises à jour template-retail-react-app/config/default.js

Si vous ne l’avez pas déjà fait, remplissez les conditions préalables.

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.

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.

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.

PASSWORDLESS_LOGIN_CALLBACK_URI

voir Variables d’environnement.

  • 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.

Cette section propose une solution pour une erreur courante que vous pouvez rencontrer concernant la connexion sans mot de passe.

Cause potentielle : L’étendue ou l’URL de rappel est incorrecte.

Solution suggérée : Assurez-vous que l’étendue et l’URL de rappel sont correctement configurées. Reportez-vous à la section Configurer un client privé SLAS.