Implémenter la connexion sociale

PWA Kit est livré avec la possibilité d’utiliser la connexion sociale pour vos acheteurs. Incluez cette fonctionnalité dans votre site de kit Progressive Web App (PWA) pour améliorer l’expérience d’achat. Grâce à la connexion par les réseaux sociaux, les acheteurs peuvent rapidement se connecter à votre site et créer des profils à l’aide de leurs comptes de réseaux sociaux.

Notre site de démonstration montre l’implémentation par défaut de la connexion sociale.

Pour activer et configurer la connexion sociale 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 sociale n’est pas prise en charge dans les boutiques hybrides.

Note

IdP pris en charge

PWA Kit prend en charge les fournisseurs d’identité (IdP) répertoriés sous Fournisseurs d’identité pris en charge.

Si vous remplissez les conditions préalables, les identifiants de connexion aux réseaux sociaux Google et Apple sont disponibles par défaut dans l’application Retail React App.

Prérequis

Pour utiliser la connexion sociale :

Créez votre site à l’aide de Composable Storefront et de Retail React App version 6.0 ou ultérieure.
Pour ajouter l’IdP de votre choix, suivez la procédure décrite dans Enregistrement d’un fournisseur d’identité.
Configurez un client SLAS (Shopper Login and API Access). Dans le champ URI de redirection de votre client, saisissez l’URI de redirection que vous souhaitez utiliser dans le flux de connexion sociale. Par défaut, PWA Kit utilise /social-callback comme chemin. Par exemple, si votre domaine est example.com, saisissez : https://www.example.com/social-callback. Remplacez-le example.com par votre domaine actuel.

Configurer la connexion sociale dans PWA Kit

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

Pour configurer la connexion sociale dans votre projet PWA Kit, effectuez la mise à jour template-retail-react-app/config/default.js comme indiqué dans cet exemple.

Vérifiez que le chemin d’accès à l’URI de redirection configuré dans votre projet PWA Kit correspond au chemin configuré dans votre client SLAS. Le client SLAS peut utiliser un caractère générique pour l’URI complet, mais les chemins doivent correspondre exactement.

1module.exports = {
2    app: {
3        login: {
4            social: {
5
6               // Enable social login and add your chosen IdPs and Redirect URI.
7                enabled: true,
8                idps: ['Google', 'Apple'],
9                redirectURI: '/social-callback' // relative path
10            }
11            // More code here...
12
13         sites,
14         commerceAPI: {
15            proxyPath: `/mobify/proxy/api`,
16            parameters: {
17
18            // Add your clientId, organizationId, short code, and siteId.
19                clientId: 'c9c45bfd-0ed3-4aa2-9971-40f88962b836',
20                organizationId: 'f_ecom_zzrf_001',
21                shortCode: '8o7m175y',
22                siteId: 'RefArchGlobal'
23            }
24
25           // More code here...

b. Facultatif : Utiliser une variable d’environnement pour définir l’URI de redirection

La valeur de la variable d’environnement pour la connexion sociale 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’URI de redirection à l’aide d’une variable d’environnement au lieu de template-retail-react-app/config/default.js. Permet template-retail-react-app/config/default.js d’activer la connexion sociale et de définir les IdP. Configurez cette variable d’environnement pour définir l’URI de redirection.

SOCIAL_LOGIN_REDIRECT_URI

voir Variables d’environnement.

Ajouter des icônes pour les fournisseurs d’identité pris en charge

Par défaut, PWA Kit importe et configure les icônes pour les connexions sociales Google et Apple dans le SocialLogin composant du template-retail-react-app/app/components/social-login/index.jsx fichier. Sur votre site, vous pouvez inclure des icônes pour d’autres fournisseurs d’identité pris en charge. Pour ce faire, procédez comme suit.

a. Importer des icônes dans le SocialLogin composant

Dans cet exemple, nous importons l’icône Facebook dans le SocialLogin composant.

1// Icons
2import {
3  AppleIcon,
4  GoogleIcon,
5  FacebookIcon
6} from '@salesforce/retail-react-app/app/components/icons'

b. Étendre l’objet IDP_CONFIG

Utilisez l’objet IDP_CONFIG dans le SocialLogin composant pour afficher des boutons pour vos connexions sociales supplémentaires, chacun avec ses icônes respectives et ses messages localisés.

Dans cet exemple, nous ajoutons la configuration pour Facebook. Assurez-vous que chaque clé IdP correspond au nom en minuscules de l’IdP que vous avez choisi.

1const IDP_CONFIG = {
2  apple: {
3    icon: AppleIcon,
4    message: defineMessage({
5      id: 'login_form.button.apple',
6      defaultMessage: 'Apple'
7    })
8  },
9  google: {
10    icon: GoogleIcon,
11    message: defineMessage({
12      id: 'login_form.button.google',
13      defaultMessage: 'Google'
14    })
15  },
16  facebook: {
17    icon: FacebookIcon,
18    message: defineMessage({
19      id: 'login_form.button.facebook',
20      defaultMessage: 'Facebook'
21    })
22  }
23}

Meilleures pratiques pour la connexion sociale

Suivez les meilleures pratiques de sécurité pour protéger les comptes des acheteurs. Exemple :
- Si vous utilisez un CDN intégré (eCDN), vous pouvez appliquer des règles de limitation de débit eCDN.
- Si vous utilisez un réseau de diffusion de contenu (CDN) tiers, tel que Cloudfare, vous pouvez bloquer les requêtes par 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.
Fusionnez les profils d’acheteurs dans Shopper Login and API Access Service (SLAS) pour vous assurer que les acheteurs disposant à la fois d’une identité B2C Commerce et d’un fournisseur d’identité tiers peuvent se connecter en toute transparence sans créer de comptes en double.

Si les deux profils existaient avant votre configuration loginMergeClaims et avant qu’un acheteur ne se connecte à votre site, aucune fusion n’est effectuée. Les comptes ne peuvent pas être fusionnés rétroactivement.
Les étapes du guide Fusionner les profils d’acheteurs s’appliquent aux acheteurs qui possèdent le même identifiant de connexion pour leur profil B2C Commerce et un IdP tiers.

Note

Pour en savoir plus sur la fusion de profils et les cas d’utilisation pris en charge, consultez la section Fusionner les profils d’acheteurs.

Résoudre les problèmes de connexion sociale

Cette section propose des solutions pour quelques erreurs courantes que vous pouvez rencontrer en matière de connexion sociale.

Les acheteurs ne peuvent pas se connecter

Cause potentielle : La configuration de la connexion sociale est incorrecte.

Solution suggérée : Vérifiez que le chemin d’accès à l’URI de redirection configuré dans votre projet PWA Kit correspond au chemin configuré dans votre client SLAS. Reportez-vous à la section Configurer la connexion sociale.

Des conflits de profils d’acheteurs se produisent

Cause potentielle : Les acheteurs ont des profils distincts pour B2C Commerce et les fournisseurs d’identité tiers.

Solution suggérée : Suivez la procédure décrite dans Fusionner les profils d’acheteurs pour fusionner les enregistrements des acheteurs enregistrés auprès de B2C Commerce et d’un fournisseur d’identité tiers.

Voir aussi

Fournisseurs d’identité SLAS