Websource Connexion sociale pour WordPress

À quoi ça sert

Websource Connexion sociale ajoute des boutons « Continuer avec Google », « Continuer avec Facebook », etc. à vos formulaires de connexion et d'inscription.

• Le visiteur clique, s'identifie chez le réseau, puis revient connecté sur votre site.
• S'il n'a pas encore de compte, il est créé automatiquement (compte client WooCommerce si WooCommerce est actif).
• S'il a déjà un compte avec la même adresse e-mail, l'extension lui demande son mot de passe avant de relier les deux. Aucun compte n'est jamais fusionné automatiquement.
• Sept réseaux sont fournis : Google, Facebook, X (Twitter), LinkedIn, Microsoft, Apple et GitHub. Chacun a son guide pas à pas dans l'écran de réglages.

L'extension fonctionne sans WooCommerce. Quand WooCommerce est actif, les boutons s'ajoutent aussi à la page « Mon compte » et à la commande.

Installation

1. Dans l'administration, ouvrez Extensions > Ajouter une extension > Téléverser une extension.
2. Choisissez le fichier websource-sociallogin.zip, puis cliquez sur Installer maintenant.
3. Cliquez sur Activer l'extension.
4. Ouvrez Réglages > Connexion sociale.

Votre site doit être servi en HTTPS : les réseaux sociaux refusent une URL de redirection en http://. Si ce n'est pas le cas, un bandeau vous le signale en haut de l'écran.

Prise en main en 5 minutes

1. Ouvrez Réglages > Connexion sociale.
2. Dans la carte Google, cliquez sur Guide pas à pas : Google et suivez les étapes (voir aussi « Créer vos identifiants, réseau par réseau » plus bas).
3. Cliquez sur Copier à côté de URL de rappel à coller chez le réseau, et collez cette adresse chez Google.
4. Recopiez le Client ID et le Client Secret donnés par Google dans la carte.
5. Activez l'interrupteur Activer, puis cliquez sur Enregistrer. Le badge de la carte passe à Actif.
6. Ouvrez votre page de connexion dans une fenêtre de navigation privée : le bouton Continuer avec Google est là. Essayez-le.

Un réseau n'apparaît sur le site que s'il est activé et complet. Un réseau incomplet reste invisible pour vos visiteurs.

Réglages

Réseaux sociaux

Chaque réseau a sa carte. Le badge indique son état : Actif, Configuré (désactivé), Incomplet ou Non configuré.

Apparence des boutons

Où afficher les boutons

Textes

Avec Polylang ou WPML, ces deux textes se traduisent dans l'écran de traduction des chaînes.

Bloc et shortcode

Créer vos identifiants, réseau par réseau

Pour chaque réseau, vous créez une « application » gratuite chez lui. Vous lui indiquez l'adresse de retour vers votre site (l'URL de redirection), et il vous donne un identifiant et un secret à recopier dans l'extension.

L'URL de redirection est toujours la même pour tous les réseaux :

https://votre-site.fr/websource-sociallogin/callback

Ne la tapez pas à la main : copiez celle affichée dans la carte du réseau avec le bouton Copier. Elle doit être identique au caractère près (https, avec ou sans www, sans barre oblique à la fin). Si votre site n'utilise pas les permaliens, l'adresse affichée a la forme https://votre-site.fr/?wsx_sl=callback.

Google

Google utilise OpenID Connect : l'extension valide la signature de l'id_token et n'accepte l'e-mail que s'il est vérifié par Google. Comptez environ 10 minutes. Aucun coût.

Où créer vos identifiants : Google Cloud Console.

URL de redirection à saisir chez Google : https://votre-site.fr/websource-sociallogin/callback (copiez la vôtre avec le bouton Copier de la carte Google).

1. Créer (ou choisir) un projet Google Cloud — console.cloud.google.com > sélecteur de projet (en haut) > Nouveau projet. Connectez-vous avec le compte Google de votre entreprise. Cliquez sur le sélecteur de projet, puis Nouveau projet. Donnez-lui le nom de votre site et validez.
2. Configurer l'écran de consentement OAuth — Menu ☰ > API et services > Écran de consentement OAuth (ou « Google Auth Platform > Branding »). C'est la fenêtre que vos clients voient en se connectant. Choisissez le type d'utilisateur Externe. - Nom de l'application : le nom de votre site - E-mail d'assistance utilisateur : une adresse que vous lisez - Domaines autorisés : votre-site.fr - Lien vers les règles de confidentialité : https://votre-site.fr/ (votre page « politique de confidentialité ») - E-mail du développeur : votre e-mail
3. Déclarer les autorisations (scopes) — Écran de consentement > Accès aux données (Scopes) > Ajouter ou supprimer des niveaux d'accès. Ajoutez uniquement les trois niveaux d'accès « non sensibles » : openid, .../auth/userinfo.email et .../auth/userinfo.profile. Ils ne déclenchent pas de vérification approfondie par Google.
4. Créer l'ID client OAuth — Menu ☰ > API et services > Identifiants > + Créer des identifiants > ID client OAuth. Type d'application : Application Web. Dans URI de redirection autorisés, collez exactement l'adresse ci-dessous (https, sans espace, sans « / » ajouté). - Type d'application : Application Web - Nom : Connexion boutique - Origines JavaScript autorisées : laisser vide (inutile) - URI de redirection autorisés : https://votre-site.fr/websource-sociallogin/callback
5. Copier l'ID client et le code secret dans l'extension — Fenêtre « Client OAuth créé » > ID client + Code secret du client. Copiez l'ID client (se termine par .apps.googleusercontent.com) et le Code secret du client, collez-les dans les champs de cette extension, activez Google puis enregistrez. Le secret n'est affiché en clair nulle part ensuite.
6. Passer en production — Écran de consentement > État de publication > Publier l'application. Tant que l'application est en Test, seuls les « utilisateurs tests » que vous listez (100 maximum) peuvent se connecter, et leur autorisation expire au bout de 7 jours. Cliquez sur Publier l'application (statut « En production »). Avec uniquement les scopes non sensibles ci-dessus, aucune vérification par Google n'est nécessaire.

Scopes demandés : openid email profile. L'extension reçoit : identifiant Google (sub), e-mail, état de vérification de l'e-mail, prénom, nom. Rien d'autre.

Erreurs fréquentes :

Facebook

Facebook Login (Meta). Les permissions public_profile et email sont accordées par défaut, sans passer par la revue d'application. Comptez environ 15 minutes. Gratuit.

Où créer vos identifiants : Meta for Developers.

URL de redirection à saisir chez Facebook : https://votre-site.fr/websource-sociallogin/callback (copiez la vôtre avec le bouton Copier de la carte Facebook).

1. Créer une app Meta — developers.facebook.com > Mes apps > Créer une app. Connectez-vous avec un compte Facebook (devenu « compte développeur »). Cliquez sur Créer une app, saisissez le nom de votre site et votre e-mail. Pour le cas d'usage, choisissez Authentifier et demander des données aux utilisateurs avec Facebook Login. Type d'app : « Consommateur » ou « Autre », selon l'assistant.
2. Renseigner les informations de base — Paramètres de l'app > Général. Renseignez ce qui est obligatoire pour passer en mode Live, puis copiez l'ID de l'app et la Clé secrète (bouton « Afficher », votre mot de passe Facebook est demandé). - Domaines de l'app : votre-site.fr - URL de la politique de confidentialité : votre page de politique de confidentialité (obligatoire) - URL des conditions d'utilisation : votre page de CGV (recommandé) - Icône de l'app (1024×1024) : votre logo - Catégorie : Achats / Commerce
3. Configurer Facebook Login — Tableau de bord > Cas d'usage > Facebook Login > Personnaliser > Paramètres (ou Produits > Facebook Login > Paramètres). Activez Connexion OAuth client et Connexion OAuth Web, Forcer HTTPS et le mode strict pour les URI de redirection, puis collez l'adresse ci-dessous. - URI de redirection OAuth valides : https://votre-site.fr/websource-sociallogin/callback
4. Vérifier les permissions — Cas d'usage > Facebook Login > Permissions et fonctionnalités. Assurez-vous que public_profile et email sont sur « Accès standard » (ils le sont par défaut). Aucune revue d'application n'est nécessaire pour ces deux-là.
5. Coller l'ID et la clé secrète dans l'extension — Cette extension > Facebook. ID de l'app = « Client ID », Clé secrète = « Client Secret ». Activez Facebook et enregistrez.
6. Passer l'app en mode Live — Bandeau en haut du tableau de bord > « Mode de l'app » : Développement → Live. En mode Développement, seuls les administrateurs, développeurs et testeurs de l'app peuvent se connecter. Basculez sur Live une fois la politique de confidentialité et la catégorie renseignées. La « vérification de l'entreprise » n'est demandée que pour des accès avancés, pas pour public_profile + email.

Permissions demandées : email public_profile. L'extension reçoit : identifiant Facebook (id), prénom, nom et e-mail s'il existe. Facebook ne renvoie que des e-mails confirmés.

Erreurs fréquentes :

X (Twitter)

X (anciennement Twitter) : OAuth 2.0 avec PKCE, application de type « client confidentiel ». L'e-mail n'est fourni que si votre application y est autorisée (scope users.email) ; sinon l'extension le demandera au client. Les offres et quotas de l'API X évoluent : vérifiez-les sur le portail.

Où créer vos identifiants : X Developer Portal.

URL de redirection à saisir chez X (Twitter) : https://votre-site.fr/websource-sociallogin/callback (copiez la vôtre avec le bouton Copier de la carte X (Twitter)).

1. Ouvrir un compte développeur X — developer.x.com > Developer Portal. Connectez-vous avec le compte X de votre entreprise et acceptez le contrat développeur (décrivez l'usage : « connexion des clients de ma boutique avec leur compte X »).
2. Créer un Project et une App — Developer Portal > Projects & Apps > + Add Project (puis Add App). L'application doit obligatoirement être rattachée à un Project (sinon l'API répond « client-not-enrolled »).
3. Activer l'authentification utilisateur (OAuth 2.0) — Votre App > Settings > User authentication settings > Set up. C'est ici que se règle la connexion. - App permissions : Read (lecture seule suffit) - Request email from users : à cocher si disponible (nécessite les deux URL ci-dessous) - Type of App : Web App, Automated App or Bot (= Confidential client) - Callback URI / Redirect URL : https://votre-site.fr/websource-sociallogin/callback - Website URL : https://votre-site.fr - Terms of service / Privacy policy : URL de vos CGV et de votre politique de confidentialité
4. Récupérer le Client ID et le Client Secret — Votre App > Keys and tokens > OAuth 2.0 Client ID and Client Secret. Cliquez sur Generate (ou Regenerate). Le Client Secret n'est affiché qu'une seule fois : copiez-le immédiatement. N'utilisez pas « API Key / API Secret » ni le « Bearer Token » : ce sont d'autres mécanismes (OAuth 1.0a).
5. Choisir les scopes — Cette extension > X > Scopes. Par défaut : users.read tweet.read users.email. Si X répond « invalid_scope », supprimez users.email : la connexion fonctionnera, et l'extension demandera l'e-mail au client.
6. Coller les identifiants dans l'extension — Cette extension > X. Client ID, Client Secret, activez X puis enregistrez.
7. Mise en production — Developer Portal > votre App > Settings. X n'a pas de mode « développement / live » : l'application est utilisable dès sa création. Vérifiez cependant le niveau d'accès (Free, Basic…) et ses quotas de requêtes : une boutique à fort trafic peut dépasser les limites d'un niveau gratuit.

Scopes demandés : users.read tweet.read users.email. L'extension reçoit : identifiant X (id), nom affiché et, si autorisé, l'e-mail confirmé (confirmed_email).

Erreurs fréquentes :

LinkedIn

LinkedIn via le produit « Sign In with LinkedIn using OpenID Connect » (OpenID Connect standard). Une Page LinkedIn d'entreprise est obligatoire pour créer l'application. Comptez environ 10 minutes. Gratuit.

Où créer vos identifiants : LinkedIn Developer Portal.

URL de redirection à saisir chez LinkedIn : https://votre-site.fr/websource-sociallogin/callback (copiez la vôtre avec le bouton Copier de la carte LinkedIn).

1. Créer l'application — linkedin.com/developers/apps > Create app. Renseignez les champs ; la Page LinkedIn doit appartenir à votre entreprise (vous devez en être administrateur). - App name : le nom de votre site - LinkedIn Page : la Page LinkedIn de votre entreprise - Privacy policy URL : votre politique de confidentialité - App logo : votre logo (minimum 100×100 px)
2. Ajouter le produit « Sign In with LinkedIn using OpenID Connect » — Votre app > onglet Products. Cliquez sur Request access en face de « Sign In with LinkedIn using OpenID Connect » (accès accordé immédiatement). Sans ce produit, LinkedIn répond « unauthorized_scope_error ».
3. Déclarer l'URL de redirection — Votre app > onglet Auth > OAuth 2.0 settings > Authorized redirect URLs for your app. Cliquez sur le crayon, Add redirect URL, collez l'adresse ci-dessous puis Update. - Authorized redirect URLs : https://votre-site.fr/websource-sociallogin/callback
4. Copier le Client ID et le Client Secret — Votre app > onglet Auth > Application credentials. Copiez le Client ID et le Primary Client Secret, collez-les dans cette extension, activez LinkedIn puis enregistrez.
5. Vérifier l'application — Votre app > onglet Settings > Verify. Cliquez sur Verify : LinkedIn génère un lien que l'administrateur de la Page doit approuver. Une application non vérifiée peut afficher un avertissement aux clients. Il n'existe pas de mode « live » séparé : l'app fonctionne dès l'ajout du produit.

Scopes demandés : openid profile email (openid, profile, email). L'extension reçoit : identifiant LinkedIn (sub), prénom, nom, e-mail et son état de vérification.

Erreurs fréquentes :

Microsoft

Microsoft Entra ID (comptes professionnels/scolaires, et comptes personnels Outlook, Hotmail, Xbox). Important : Microsoft ne garantit pas que l'e-mail d'un compte professionnel appartient à son titulaire ; l'extension ne le considère donc comme vérifié que si Microsoft l'atteste (revendication xms_edov) et demande sinon une confirmation par e-mail.

Où créer vos identifiants : Microsoft Entra admin center.

URL de redirection à saisir chez Microsoft : https://votre-site.fr/websource-sociallogin/callback (copiez la vôtre avec le bouton Copier de la carte Microsoft).

1. Inscrire une application — entra.microsoft.com > Identité > Applications > Inscriptions d'applications > + Nouvelle inscription. Il faut un compte Azure/Entra (un compte Microsoft gratuit suffit pour créer le locataire). - Nom : le nom de votre site - Types de comptes pris en charge : Comptes dans un annuaire d'organisation et comptes Microsoft personnels (multilocataire et personnels) - URI de redirection - plateforme : Web - URI de redirection : https://votre-site.fr/websource-sociallogin/callback
2. Noter l'ID d'application (client) — Votre inscription > Vue d'ensemble. Copiez l'ID d'application (client) : c'est le Client ID. Le champ « Locataire » de l'extension reste sur common (comptes professionnels et personnels). Utilisez consumers pour les seuls comptes personnels, organizations pour les seuls comptes professionnels, ou l'ID de répertoire (locataire) pour un seul annuaire.
3. Créer un secret client — Certificats et secrets > Secrets client > + Nouveau secret client. Choisissez une durée (24 mois maximum), puis copiez immédiatement la colonne Valeur (pas l'« ID de secret »). Elle ne sera plus affichée. Notez la date d'expiration : à l'échéance, la connexion cessera de fonctionner tant que vous n'aurez pas créé un nouveau secret.
4. Vérifier les autorisations — Autorisations de l'API. Microsoft Graph, autorisations déléguées : openid, profile, email (et User.Read par défaut). Aucun consentement administrateur n'est requis pour ces droits.
5. Ajouter les revendications facultatives (recommandé) — Configuration des jetons > + Ajouter une revendication facultative > ID. Ajoutez email, given_name, family_name et, si proposée, xms_edov (domaine de l'e-mail vérifié). Acceptez d'activer l'autorisation Graph « email » si Entra le propose.
6. Marque et mise en production — Image de marque et propriétés. Renseignez le logo, les URL des conditions d'utilisation et de la politique de confidentialité, et si possible la vérification de l'éditeur (supprime la mention « non vérifié » à l'écran de consentement). Il n'y a pas de mode « test » à quitter : l'application est utilisable dès son inscription. Dans certaines organisations, un administrateur doit autoriser l'application pour ses utilisateurs.

Scopes demandés : openid profile email. L'extension reçoit : identifiant (locataire + objet), nom, e-mail (préféré : revendication email).

Erreurs fréquentes :

Apple

Sign in with Apple : le plus technique des réseaux. Il exige le programme Apple Developer (99 USD/an), un Services ID, une clé privée .p8 et une adresse en HTTPS. L'extension génère lui-même le « client secret » (JWT signé ES256) à chaque connexion à partir de votre clé : vous n'avez pas à le renouveler tous les 6 mois. Apple peut masquer l'e-mail du client (adresse relais @privaterelay.appleid.com).

Où créer vos identifiants : Apple Developer.

URL de redirection à saisir chez Apple : https://votre-site.fr/websource-sociallogin/callback (copiez la vôtre avec le bouton Copier de la carte Apple).

1. Rejoindre l'Apple Developer Program — developer.apple.com/programs > Enroll. L'adhésion est payante (99 USD/an) et peut prendre 1 à 2 jours pour une entreprise (numéro D-U-N-S).
2. Créer un App ID avec « Sign in with Apple » — Certificates, Identifiers & Profiles > Identifiers > + > App IDs > App. Description et Bundle ID (ex. fr.votreboutique.web). Dans Capabilities, cochez Sign in with Apple, puis Continue > Register. Cet App ID sert de « Primary App ID ».
3. Créer un Services ID (= Client ID) — Identifiers > + > Services IDs. Description et Identifier (ex. fr.votreboutique.signin) : cet Identifier est le Client ID. Cochez Sign in with Apple puis cliquez sur Configure. - Primary App ID : l'App ID créé à l'étape 2 - Domains and Subdomains : votre-site.fr (sans https://) - Return URLs : https://votre-site.fr/websource-sociallogin/callback
4. Créer une clé privée — Keys > + > Key Name > Sign in with Apple > Configure. Choisissez le Primary App ID, validez, puis téléchargez le fichier AuthKey_XXXXXXXXXX.p8 : Apple ne le propose qu'une seule fois, gardez-le en lieu sûr. Notez le Key ID (10 caractères).
5. Relever le Team ID — developer.apple.com/account > Membership details > Team ID. Identifiant de 10 caractères.
6. Remplir l'extension — Cette extension > Apple. Services ID, Team ID, Key ID, puis collez tout le contenu du fichier .p8 (de -----BEGIN PRIVATE KEY----- à -----END PRIVATE KEY-----) dans le champ « Clé privée ». Elle est chiffrée en base et jamais renvoyée au navigateur. Activez Apple et enregistrez.
7. Mise en production et e-mails relais — Certificates, Identifiers & Profiles > More > Configure Sign in with Apple for Email Communication. Apple n'a pas de mode « test » : tout fonctionne dès la configuration. Si un client choisit « Masquer mon e-mail », vos e-mails transactionnels passent par un relais Apple : enregistrez là votre domaine d'envoi et vos adresses d'expédition (SPF et DKIM valides) sinon ils ne seront pas livrés. Apple peut aussi demander de vérifier le domaine en déposant un fichier dans /.well-known/.

Scopes demandés : name email. L'extension reçoit : identifiant Apple (sub), e-mail (réel ou relais), état de vérification, et le nom uniquement lors de la toute première autorisation.

Erreurs fréquentes :

GitHub

GitHub (OAuth App). Idéal pour une clientèle de développeurs. L'extension n'utilise que les e-mails marqués « vérifiés » par GitHub. Comptez 5 minutes. Gratuit.

Où créer vos identifiants : GitHub Developer settings.

URL de redirection à saisir chez GitHub : https://votre-site.fr/websource-sociallogin/callback (copiez la vôtre avec le bouton Copier de la carte GitHub).

1. Ouvrir les réglages développeur — github.com > votre avatar > Settings > Developer settings > OAuth Apps > New OAuth App. Pour une application appartenant à une organisation : Organization > Settings > Developer settings > OAuth Apps.
2. Remplir le formulaire — Register a new OAuth application. GitHub n'accepte qu'une seule URL de rappel par OAuth App : créez une application par domaine de boutique. - Application name : le nom de votre site - Homepage URL : https://votre-site.fr - Authorization callback URL : https://votre-site.fr/websource-sociallogin/callback - Enable Device Flow : laisser décoché
3. Récupérer le Client ID et générer le secret — Après « Register application » > Client ID, puis « Generate a new client secret ». Copiez le Client ID puis cliquez sur Generate a new client secret : il n'est affiché qu'une seule fois, copiez-le immédiatement dans cette extension.
4. Scopes — Cette extension > GitHub > Scopes. Par défaut read:user user:email : user:email permet de lire les e-mails du compte, dont le principal vérifié.
5. Mise en production — Application > Advanced / logo. Les OAuth Apps n'ont ni revue ni mode test : elles sont utilisables immédiatement par tous les comptes GitHub. Ajoutez un logo (Upload new logo). Si l'organisation d'un client restreint l'accès aux applications tierces, il verra « Request » : c'est à l'administrateur de son organisation d'approuver.

Scopes demandés : read:user user:email. L'extension reçoit : identifiant GitHub (id), nom, e-mail principal vérifié.

Erreurs fréquentes :

Problèmes fréquents (tous réseaux)

Cas d'usage

Un visiteur sans compte

1. Il clique sur Continuer avec Google.
2. Il choisit son compte chez Google.
3. Il revient sur votre site, connecté. Son compte a été créé avec son nom et son adresse e-mail. Les cases « newsletter » ne sont jamais cochées à sa place.

Un client qui a déjà un compte avec la même adresse

L'extension ne relie jamais deux comptes toute seule. Elle affiche l'écran Confirmez votre identité et demande le mot de passe du compte existant. Après cinq erreurs, la demande est annulée.

Le réseau ne fournit pas d'adresse e-mail vérifiée

Certains réseaux (X, parfois Facebook ou Microsoft) ne donnent pas d'adresse e-mail, ou ne garantissent pas qu'elle appartient à la personne. L'extension demande alors l'adresse au visiteur et lui envoie un lien de confirmation. Le lien est valable une heure, sert une seule fois et doit être ouvert dans le même navigateur.

Un client veut lier ou délier un réseau

Avec WooCommerce : Mon compte > Connexions sociales. Sans WooCommerce : le bouton Gérer mes connexions sociales de son profil, ou la page où vous avez placé le bloc Websource Connexions sociales (compte).

Boutons dans la page « Mon compte » de WooCommerce

Questions fréquentes

Faut-il WooCommerce ? Non. Sans WooCommerce, les boutons s'affichent sur la page de connexion de WordPress et dans le bloc ou le shortcode.

Un visiteur peut-il créer un compte si les inscriptions sont fermées ? Non. Sans WooCommerce, l'extension suit le réglage Réglages > Général > Tout le monde peut s'inscrire. Si la case est décochée, seuls les utilisateurs existants peuvent se connecter avec un réseau. Un bandeau vous le rappelle dans l'écran de réglages.

Quelles données sont conservées ? Pour chaque compte lié : l'utilisateur, le réseau, son identifiant chez le réseau, l'adresse e-mail transmise et la date. Aucun mot de passe et aucun jeton d'accès du réseau ne sont conservés.

Est-ce compatible avec les outils RGPD de WordPress ? Oui. Les liens figurent dans Outils > Exporter les données personnelles et sont supprimés par Outils > Effacer les données personnelles. Ils sont aussi supprimés quand le compte est supprimé. Un texte à ajouter à votre politique de confidentialité est proposé dans Réglages > Confidentialité > Guide de politique.

Quels cookies sont posés ?wssl_bind (1 heure, sécurise la connexion en cours) et wssl_last (180 jours, retient le dernier réseau utilisé).

Un client inscrit par un réseau peut-il se connecter par mot de passe ? Oui, après avoir défini un mot de passe avec Mot de passe oublié ?.

Puis-je ajouter un autre réseau ? Oui, un développeur peut en ajouter un (voir la référence développeur).

Dépannage

Désinstallation

1. Ouvrez Extensions > Extensions installées.
2. Cliquez sur Désactiver sous Websource Connexion sociale. Les boutons disparaissent, les réglages et les liens sont conservés.
3. Cliquez sur Supprimer pour tout effacer : les réglages, les secrets et les deux tables de l'extension (comptes liés et demandes en cours). Les comptes des utilisateurs ne sont pas supprimés.

Pensez aussi à supprimer les applications créées chez les réseaux si vous ne les utilisez plus.