À quoi ça sert
Websource Social Login ajoute à votre boutique des boutons « Continuer avec Google », « Continuer avec GitHub », etc. Le client se connecte ou crée son compte sans mot de passe à retenir.
- Sept réseaux : Google, Facebook, X (Twitter), LinkedIn, Microsoft, Apple, GitHub. Vous n'activez que ceux qui vous intéressent.
- Un guide pas à pas dans le back-office pour chaque réseau, avec l'adresse à copier chez le réseau.
- Création automatique du compte client à la première connexion.
- Protection contre la prise de compte : un compte existant n'est jamais fusionné automatiquement, le client saisit son mot de passe pour lier les deux.
- Boutons personnalisables et emplacements au choix : page de connexion, création de compte, tunnel de commande, en-tête, liste de souhaits.
- Une page Connexions sociales dans le compte du client pour lier ou délier un réseau.
Installation
- Dans le back-office, ouvrez Modules > Gestionnaire de modules.
- Cliquez sur Installer un module, choisissez le fichier
websourcesociallogin.zip. - Cliquez sur Configurer.
Votre boutique doit être en HTTPS : les réseaux refusent une adresse de retour en http://. Si ce n'est pas le cas, le module affiche l'avertissement « Le SSL n'est pas activé sur cette boutique ».
Après l'installation, aucun bouton n'apparaît : il faut configurer et activer au moins un réseau.
Prise en main en 5 minutes
L'exemple prend Google. Comptez une dizaine de minutes, création de l'application chez Google comprise.
- Ouvrez Modules > Gestionnaire de modules, recherchez « Websource Social Login », cliquez sur Configurer.
- Dans la carte Google, cliquez sur Guide pas à pas : Google et suivez les étapes chez Google.
- Chez Google, collez l'adresse affichée dans URL de rappel à coller chez le réseau (bouton Copier).
- Revenez dans le module. Collez le Client ID et le Client Secret fournis par Google.
- Activez l'interrupteur Activer de la carte Google.
- Cliquez sur Enregistrer. Le message « Réglages enregistrés. » apparaît et la carte passe à l'état Actif.
- Ouvrez la page de connexion de votre boutique : le bouton « Continuer avec Google » est sous le formulaire.
Réglages
L'écran Configurer comporte quatre parties, accessibles par les boutons du haut : Réseaux, Apparence et emplacements, Textes et RGPD, Aide. Le bouton Enregistrer reste visible en bas de l'écran.
Réseaux
Une carte par réseau. Un réseau n'apparaît dans la boutique que s'il est activé et complet.
| Réglage | Rôle |
|---|---|
| Activer | Interrupteur du réseau. |
| État | Non configuré, incomplet (les champs manquants sont indiqués), configuré ou Actif. |
| Client ID, Client Secret | Fournis par le réseau. Le secret n'est jamais réaffiché : le champ indique « •••• enregistré ». Laissé vide, il est conservé. |
| Effacer le secret enregistré | Cochez pour supprimer le secret à l'enregistrement. |
| Locataire (tenant) | Microsoft seulement. common convient dans la plupart des cas. |
| Services ID, Team ID, Key ID, Clé privée (.p8) | Apple seulement. |
| Scopes demandés | Autorisations demandées au réseau. La valeur par défaut convient presque toujours. |
| Position (1 = premier) | Ordre d'affichage des boutons. |
| URL de rappel à coller chez le réseau | Adresse exacte, en https, à recopier telle quelle chez le réseau. Bouton Copier. |
| Tester la configuration | Vérifie les champs, l'URL de rappel, les scopes et l'activation. |
| Guide pas à pas | Les étapes à suivre chez le réseau, les erreurs fréquentes et les liens officiels. |
Apparence et emplacements
| Réglage | Rôle |
|---|---|
| Style | Contour (fond blanc, bordure du thème), plein (couleur officielle du réseau) ou neutre (couleurs du thème). |
| Disposition | Colonne, pleine largeur ou grille d'icônes. |
| Forme | Carrée, Arrondie (thème) ou pilule. |
| Icône seule (texte masqué, conservé pour les lecteurs d'écran) | Affiche seulement le logo. |
| Rayon (px, 0-32), Bordure (px, 0-4) | Arrondi et épaisseur de la bordure. |
| Fond, Texte, Bordure | Couleurs facultatives qui remplacent le style : #rgb, #rrggbb, #rrggbbaa, rgb(), rgba(), transparent ou var(--couleur-du-theme). Toute autre valeur est refusée. |
| Afficher le séparateur « ou » | Ligne « OU » entre le formulaire et les boutons. |
| Mettre en avant le dernier réseau utilisé | Place en premier le réseau utilisé la dernière fois (cookie local sans donnée personnelle). |
| Aperçu | Montre les sept réseaux. Dans la boutique, seuls les réseaux actifs et complets s'affichent. |
| Où afficher les boutons | Page de connexion, Page de création de compte, Tunnel de commande (informations personnelles), En-tête : menu « Mon compte » (visiteur), Fenêtre « connectez-vous » de la liste de souhaits. |
Les boutons ne sont jamais affichés à un client déjà connecté.
Textes et RGPD
| Réglage | Rôle |
|---|---|
| Texte des boutons | Par langue. {network} est remplacé par le nom du réseau. Vide : « Continuer avec {network} ». |
| Mention RGPD | Texte affiché sous les boutons, par langue. Vide : texte par défaut. Adaptez-le à votre politique de confidentialité. |
Aide
Le bas de l'écran rappelle les problèmes fréquents communs à tous les réseaux et les données conservées par le module.
Cas d'usage
Des icônes discrètes dans l'en-tête. Cochez En-tête : menu « Mon compte » (visiteur) : les logos des réseaux actifs apparaissent à côté de « Créer un compte ».
Un client veut lier un réseau à son compte. Dans son compte, il ouvre Connexions sociales et clique sur Lier ce compte.
Un client a déjà un compte avec la même adresse e-mail. À sa première connexion par un réseau, le module lui demande son mot de passe pour relier les deux comptes. Rien n'est fusionné sans cette vérification.
Sur téléphone. Les boutons occupent toute la largeur, sous le formulaire.
Questions fréquentes
Faut-il activer les sept réseaux ? Non. Activez ceux que vos clients utilisent.
Est-ce payant chez les réseaux ? Le guide de Google indique « Aucun coût ». Pour les autres réseaux, consultez leur guide pas à pas dans le module.
Quelles données le module reçoit-il ? L'identifiant du client chez le réseau, son nom et son adresse e-mail, pour créer ou retrouver son compte. Rien n'est publié en son nom.
Quelles données sont conservées ? Pour chaque compte lié : le client, le réseau, l'identifiant chez le réseau, l'e-mail transmis et la date de consentement. Aucun jeton d'accès n'est conservé.
Les clients créés par un réseau sont-ils inscrits à la newsletter ? Non, ni à la newsletter ni aux offres partenaires.
Un client inscrit par un réseau peut-il avoir un mot de passe ? Oui, avec « Mot de passe oublié ». C'est nécessaire avant de délier son dernier réseau.
Dépannage
| Problème | Solution |
|---|---|
| Aucun bouton n'apparaît | Un réseau n'est visible que s'il est activé et complet, et si l'emplacement est coché dans Où afficher les boutons. |
| « Le SSL n'est pas activé sur cette boutique » | Activez le SSL dans les paramètres de la boutique : les réseaux exigent une URL de rappel en https. |
| « Session expirée » après le retour du réseau | Le cookie de liaison a été bloqué, ou la demande a duré plus de 10 minutes. Réessayez, toujours avec la même adresse de boutique (avec ou sans www). |
| Le réseau refuse l'URL | L'adresse saisie chez le réseau doit être strictement identique à l'URL de rappel affichée. |
| Erreur « redirect_uri_mismatch », « invalid_client »… | Ouvrez le Guide pas à pas du réseau : la rubrique « Erreurs fréquentes et solutions » les explique. |
| Les boutons manquent sur un emplacement avec un autre thème | Le thème doit appeler l'emplacement du module : voir la référence développeur. |
| Boutique multilingue ou plusieurs domaines | L'URL de rappel est la même pour toutes les langues d'un domaine. Avec plusieurs boutiques, enregistrez l'URL de chaque boutique chez le réseau. |
Désinstallation
- Ouvrez Modules > Gestionnaire de modules.
- En face de « Websource Social Login », ouvrez le menu et cliquez sur Désinstaller.
La désinstallation supprime les réglages, les identifiants des réseaux et les liaisons entre comptes clients et réseaux. Les comptes clients sont conservés : un client inscrit par un réseau devra utiliser « Mot de passe oublié » pour se connecter. Pensez à supprimer les applications créées chez les réseaux.