Implémenter la réinitialisation du mot de passe

PWA Kit est livré avec la possibilité d’utiliser la réinitialisation du 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. Avec la réinitialisation du mot de passe, si les acheteurs ont oublié leur mot de passe, ils peuvent utiliser un code de vérification ou un lien dans un e-mail ou un SMS pour retrouver l’accès à leur compte en créant un nouveau mot de passe.

Notre site de démonstration montre l’implémentation par défaut de la réinitialisation du mot de passe.

Pour activer et configurer la réinitialisation du mot de passe pour votre site PWA Kit, suivez les étapes de 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 réinitialisation du mot de passe n’est pas prise en charge dans les boutiques hybrides.

Pour utiliser la réinitialisation de mot de passe, créez votre site à l’aide de Composable Storefront et de Retail React App version 6.0 ou ultérieure.

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 réinitialisation du 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 (code de vérification ou lien dans un e-mail ou un SMS) pour un acheteur. Pour plus d’informations, reportez-vous à la section Réinitialisation du mot de passe.

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 à 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 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 étapes qui s’appliquent à l’utilisation d’une intégration Marketing Cloud, consultez Créer un parcours d’envoi transactionnel.

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_RESET_PASSWORD_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/reset-password-callback. Reportez-vous à la section Configurer un client SLAS.

Si vous souhaitez personnaliser le chemin de rappel à partir de , mettez-le également à jour à ssr.js l’emplacement de configuration du point de /reset-password-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 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.

Il existe deux façons de configurer la réinitialisation du mot de passe dans votre projet PWA Kit.

  • a. Mettre à jour template-retail-react-app/config/default.js
  • b. Utiliser des variables d’environnement

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

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.

ou

b. Utiliser des variables d’environnement

La valeur de la variable d’environnement pour la réinitialisation du mot de passe remplace toute valeur que vous avez ajoutée dans template-retail-react-app/config/default.js.

Utilisez cette variable d’environnement pour définir l’URL de rappel pour la réinitialisation du mot de passe.

RESET_PASSWORD_CALLBACK_URI

voir Variables d’environnement.

  • Mettez en œuvre une limitation de débit pour éviter les abus liés à la réinitialisation du 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 lors de la réinitialisation du mot de passe.

Cause potentielle : Le service d’envoi de l’e-mail prend plus de temps que prévu ou l’acheteur n’a pas reçu l’e-mail.

Solution suggérée : Incluez une option de renvoi ou autorisez les acheteurs à saisir un mode de contact de secours. Vérifiez s’il y a des problèmes avec les filtres anti-spam.