Aller au contenu principal
Version: NEXT GEN

SocialAuth+

L'extension SocialAuth+ permet de faciliter les connexions avec OAuth2 pour les plateformes suivantes : Google, Discord, GitHub et Facebook.

Facilitez l'accès à votre plateforme pour vos clients potentiels avec SocialAuth+. Cette solution utilise la technologie OAuth+ pour une connexion rapide et sécurisée. Vos utilisateurs peuvent s'inscrire et se connecter en un clic via leurs comptes, sans craindre de perdre leur mot de passe. Simplifiez leur expérience utilisateur et augmentez votre taux de conversion grâce à cette extension d'authentification avancée.

Configuration dans ClientXCMS​

L'extension SocialAuth+ est disponible gratuitement, et activable depuis l'onglet "Extensions" de votre espace d'administration de votre site ClientXCMS.

Activation de l'extension​

Pour activer l'extension SocialAuth+ gratuitement, procédez comme suit :

  1. Connectez-vous à l'espace d'administration de ClientXCMS.
  2. Cliquez sur le bouton "Paramètres" sur la barre de navigation en haut.
  3. Dans la section "Paramètres d'extensions", cliquez sur la page "Extensions".
  4. Recherchez l'extension "Social Auth+" dans la liste des extensions disponibles.
  5. Cliquez sur le bouton "Activer" en dessous de cette dernière pour la mettre en place gratuitement.

Configuration des identifiants OAuth sur ClientXCMS​

Une fois l'extension SocialAuth+ activée depuis votre espace d'administration ClientXCMS, ré-accédez à l'onglet "Paramètres".

Image: SocialAuth+ Onglet

Sur cette page, vous pourrez gérer les différentes méthodes d'authentification en fonction des plateformes que vous souhaitez intégrer. Pour en configurer une, cliquez sur le bouton "Configurer" en dessous du logo de la plateforme ou sur l'écrou violet de réglage en haut. Image: SocialAuth+ Config

Exemple de configuration OAuth2​

Voici à quoi ressemble la configuration OAuth d'une plateforme d'authentification sur ClientXCMS, il suffit d'avoir ID Client et Secret Client générés et fournis par la plateforme. Suivez la suite de cette documentation afin de savoir comment procéder en fonction des plateformes pour obtenir ces fameuses clés d'authentification OAuth2 : Image : Exemple page configuration OAuth

Redirect URI​

Copiez bien l'URL de redirection (unique) donnée par ClientXCMS. Pour CHAQUE plateforme, la redirection URL sera différente. Elle est importante car elle permet de rediriger l'utilisateur sur votre site après l'authentification du compte sur la plateforme cible, afin de finaliser l'authentification. Elle fait en sorte que l'utilisateur puisse se connecter s'il a déjà un compte sur votre site, ou qu'il s'inscrive s'il n'a pas encore de compte. Elle est généralement formatée comme celle-là : https://votre.domaine.com/auth/<nom_plateforme>/callback où <nom_plateforme> correspond à l'une de ces valeurs :

  • google
  • discord
  • facebook
  • github

Obtenir les clés d'authentification OAuth2​

Pour pouvoir utiliser cette extension, vous devez obtenir les clés d'authentification OAuth2 pour chaque plateforme que vous souhaitez prendre en charge.

Voici comment procéder pour chaque plateforme :​

Google​

1. Rendez-vous sur la console développeur Google et connectez-vous à votre compte Google.

2. Créez un nouveau projet en cliquant sur le bouton "Sélectionner un projet". Image: Google Config - Bouton &quot;Sélectionner le projet&quot;

3. Donnez un nom à votre projet et suivez les étapes de configuration.

4. Une fois votre projet créé, cliquez sur le raccourci d'accès rapide "API et services" Image: Google Config - Raccourci accès rapide &quot;API et services&quot;

5. Accédez à la section "Ecran de consentement OAuth" dans la colonne de gauche.

Image: Google Config - Section &quot;Ecran de consentement OAuth&quot;

6. Sélectionnez l'option "Externes", cliquez ensuite sur le bouton "Créer". Image: Google Config - Bouton &quot;Externes&quot; consentement

7. Gérez les niveaux d'accès du consentement OAuth de l'application. Cliquez sur le bouton "Ajouter ou Supprimer des champs d'application"

Image : Google Config - Niveaux d&#39;accès consentement

Sélectionnez tous les champs et cliquez sur le bouton bleu "Mettre à jour" en dessous. Image : Google Config - Champs de niveaux d&#39;accès consentement

8. Remplissez les informations requises pour le consentement OAuth, veillez à bien définir le domaine autorisé par le domaine de votre site ClientXCMS (domaine de premier niveau, pas de sous-domaine requis, le domaine suffira) Image : Google Config - &quot;Domaines autorisés&quot;

9. Accédez à la section "Identifiants" dans la colonne de gauche.

Image: Google Config - Section &quot;Identifiants&quot;

10. Cliquez sur "Créer des identifiants" et choisissez "ID client OAuth". Image: Google Config - Bouton &quot;ID client OAuth&quot;

11. Sélectionnez le type d'application approprié (ici : Application Web) et définissez le nom de votre application Image : Google Config - Type d&#39;applications

12. En dessous, dans "URI de redirection autorisés", cliquez sur le bouton "Ajouter un URI" et définissez l'URI de redirection donné par ClientXCMS dans la page de configuration dans le champ "URI 1", cliquez ensuite sur le bouton bleu "Créer". Image : Google Config - Redirect URI Google

13. Une fois que vous avez créé l'application OAuth, vous obtiendrez les clés d'authentification OAuth2 nécessaires. Google Config - API Send

14. Insérez-les dans la configuration OAuth de la plateforme sur ClientXCMS.

Discord​

1. Rendez-vous sur le portail développeur Discord et connectez-vous à votre compte Discord.

2. Cliquez sur le bouton bleu "New Application" en haut à droite pour créer une nouvelle application. Image : Discord Config - Nouvelle Application

3. Donnez un nom à votre application, cochez pour approuver les conditions générales d'utilisation et les politiques pour les développeurs de Discord. Cliquez ensuite sur le bouton "Create" en bas à droite pour enregistrer la nouvelle application. Image : Discord Config - Créer l&#39;Application

4. Rendez-vous dans la section "OAuth2" dans le menu de navigation à gauche.

Image : Discord Config - Menu Navigation &quot;OAuth2&quot; Image : Discord Config - Interface OAuth2&quot;

5. Révélez le "Client Secret" en cliquant sur le bouton bleu "Reset Secret", si vous avez activé l'A2F (Authentification A 2 Facteurs) sur votre compte Discord, utilisez votre application de génération de codes à 6 chiffres pour confirmer l'action. Image : Discord Config - Révéler le Client Secret&quot;

6. En dessous, dans "Redirects", cliquez sur le bouton "Add Redirect" pour ajouter l'URI de redirection et définissez l'URI de redirection donné par ClientXCMS dans la page de configuration dans le champ "URI 1", cliquez ensuite sur le bouton bleu "Créer". Image : Discord Config - Redirect URI Discord

7. Cliquez sur le bouton "Save Changes" en bas pour sauvegarder les changements. Copiez les clés "Client ID" et "Client Secret". Discord Config - API Send

8. Insérez-les dans la configuration OAuth de la plateforme sur ClientXCMS.

GitHub​

1. Connectez-vous à votre compte GitHub.

2. Accédez à la page "Paramètres" de votre profil.

3. Dans le menu de gauche, cliquez sur "[Developer settings](

https://github.com/settings/apps)".

Image : GitHub Config - &quot;Developer Settings&quot;

4. Cliquez sur le bouton "New GitHub App" pour enregistrer une nouvelle application. Image : GitHub Config - &quot;New GitHub App&quot;

5. Remplissez les informations de base de votre application. Image : GitHub Config - Informations de base

6. En dessous, dans le champ "Callback URL", définissez l'URI de redirection donné par ClientXCMS dans la page de configuration et cochez l'option "Request user authorization (OAuth) during installation" pour demander l'utilisation d'OAuth2 lors de l'installation. Image : GitHub Config - Redirect URI GitHub

7. Encore en dessous, décochez la case "Active" de la section "Webhook", car pour notre utilisation, nous n'en aurons pas besoin. En décochant cette case, le champ "Webhook URL" deviendra optionnel et non obligatoire. Également pour la section "Permissions", il sera inutile d'accorder des permissions. GitHub met déjà à disposition toutes les informations que ClientXCMS a besoin afin de créer le compte ou de se connecter. Ajouter des privilèges requis pour votre application peut repousser certains utilisateurs à s'inscrire sur votre site.

Image : GitHub Config - Désactiver Webhook et autres paramètres Image : GitHub Config - Permissions

8. À la toute fin du formulaire de création de l'application GitHub, sélectionnez bien "Any account" pour autoriser tous les comptes à installer votre application, qui permettra à vos utilisateurs de s'authentifier avec GitHub. Enregistrez ensuite l'application avec le bouton vert en dessous "Create GitHub App". Image : GitHub Config - Qui peut installer cette application

9. Retrouvez Client ID et Secret ID

Voici la page de gestion de votre application OAuth2 dans laquelle vous avez été automatiquement redirigé après avoir créé l'application GitHub.

Image : GitHub Config - Page de gestion de l&#39;application

  • Client Secret : Vous pouvez trouver le Client Secret dans la section "Client secrets" de la page de gestion de l'application GitHub. Cliquez sur le bouton "Generate a client secret" pour générer une clé Secret ID. Image : GitHub Config - Section &quot;Client secrets&quot;
  • Client ID : Vous pouvez facilement trouver le Client ID en haut de la page de gestion de l'application, dans la section "About". Image : GitHub Config - Section &quot;About&quot; Client ID

10. Vous disposerez ensuite des clés "Client ID" et "Client Secret" pour votre application que vous devrez spécifier dans la configuration OAuth de la plateforme sur ClientXCMS. Image : GitHub Config - API Send

Facebook​

1. Rendez-vous sur le portail développeur Facebook et connectez-vous ou inscrivez-vous afin de créer un compte développeur Meta. Entrez vos informations personnelles.

2. Créez une nouvelle application en cliquant sur le bouton vert en haut à droite "Créer une app". Image : Facebook Config - Bouton &quot;Créer une app&quot;

3. Sélectionnez l'option "Autoriser les utilisateurs à se connecter avec leur compte Facebook", cliquez ensuite sur le bouton bleu ci-dessous "Suivant". Image : Facebook Config - Option &quot;Autoriser les utilisateurs à se connecter avec leur compte Facebook&quot;

4. Spécifiez les informations relatives à l'application, tel que son nom et l'email de contact. Cliquez sur le bouton vert ci-dessous "Créer une application" afin d'enregistrer l'application. Image : Facebook Config - Informations relatives à l&#39;application

5. Une fois l'application créée, vous serez automatiquement redirigé vers le panneau de gestion de l'application. Image : Facebook Config - Panneau de gestion de l&#39;application

6. Dans la section "Produits" du tableau de bord de votre application, sélectionnez "Facebook Login" et configurez les paramètres requis à l'aide du bouton "Configurer". Image : Facebook Config - Page &quot;Produits&quot; Dans le petit menu déroulant du bouton "Configurer", sélectionnez "Paramètres". Image : Facebook Config - Menu déroulant Paramètres Facebook Login &quot;

7. Dans la section "URI de redirection OAuth valides", spécifiez la valeur de l'URI de redirection donné par ClientXCMS dans la page de configuration, cliquez ensuite sur le bouton bleu, en bas à droite, "Enregistrer les modifications".

Image : Facebook Config - Redirect URI Facebook

9. Dans le menu de navigation du panneau de l'application, allez dans "Paramètres" puis dans la sous-catégorie "Général". Sur la première ligne, vous trouverez l'identifiant de l'application (Client ID) et la clé secrète (Secret ID), cliquez sur le bouton "Afficher" afin de copier la clé générée. Image : Facebook Config - API Send Vous disposerez ensuite des clés "Client ID" et "Client Secret" pour votre application que vous devrez spécifier dans la configuration OAuth de la plateforme sur ClientXCMS.

10. Publiez l'application afin de la rendre publique : Dans le menu du panneau de gestion de l'application Facebook, dans la catégorie "Publier", cliquez sur le bouton "Lancer en direct" pour lancer l'application OAuth2 en mode production afin qu'elle puisse être utilisée par vos utilisateurs.

Image : Facebook Config - Publier l&#39;application

Problème Erreur 403​

Pour régler ce problème, rendez-vous sur votre panel de gestion Plesk, puis Web Application Firewall. Dans le mode du pare-feu changez en "Detection only". Il devrait être initialement à "On". Image : ModSecurity Apache - &quot;Detection only&quot;

Re-testez la connexion via Google.

Félicitations 👏​

Vous avez maintenant configuré l'extension SocialAuth+ avec les clés d'authentification OAuth2. Vos clients pourront désormais se connecter et s'inscrire plus facilement, plus rapidement et en toute sécurité sur votre espace client !