Authentification unique (SSO) Auth0 | Se connecter à WordPress avec Auth0

Marché

Le plugin OAuth SSO pour WordPress permet une connexion sécurisée à WordPress via Auth0 en tant que fournisseur OAuth et OpenID Connect. Vous pouvez également configurer le plugin avec différents fournisseurs personnalisés et des fournisseurs d'identité standard. Il prend en charge des fonctionnalités avancées d'authentification unique (SSO) telles que le mappage des attributs de profil utilisateur, le mappage des rôles, etc. Ce guide vous explique comment configurer l'authentification unique entre WordPress et Auth0. À la fin de ce guide, Les utilisateurs devraient pouvoir se connecter à Auth0 via l'authentification unique OAuth pour WordPress. cliquez ici.

Télécharger le plugin

Plans de tarification

Essai gratuit

Pré-requis : Téléchargement Et Installation

Connectez-vous à votre instance WordPress en tant qu'administrateur.
Aller sur WordPress Tableau de bord -> Plugins et cliquez sur Ajouter un nouveau.
Rechercher un Authentification unique OAuth (SSO) plugin pour WordPress et cliquez sur Installer maintenant.
Une fois installé cliquez sur Activer.

Étapes de configuration

Étape 1 : Configurer Auth0 comme fournisseur OAuth

Allez dans https://auth0.com/auth/login et inscrivez-vous ou connectez-vous.
Allez dans Applications dans le panneau de gauche puis cliquez sur Applications.

OAuth/OpenID/OIDC Single Sign-On (SSO), Auth0 SSO Login, accédez aux applications

cliquez sur Créer une application pour créer une nouvelle application.

OAuth/OpenID/OIDC Single Sign-On (SSO), Auth0 SSO Login créer une application

Sélectionner Applications Web régulières et cliquez sur Créer .

OAuth/OpenID/OIDC Single Sign-On (SSO), Auth0 SSO Login, sélectionnez l'application Web standard

Maintenant, allez à Paramétres languette.

OAuth/OpenID/OIDC Single Sign-On (SSO), Auth0 SSO Login, accédez aux paramètres

Faites défiler jusqu'à URI des applications rubrique et entrez le URL de rappel que vous obtiendrez à partir du plugin. Ensuite, faites défiler vers le bas et cliquez sur Enregistrer les modifications.

OAuth/OpenID/OIDC Single Sign-On (SSO), URL de rappel de connexion Auth0 SSO

Copiez le identité du client et Secret client à partir des informations de base dans l'onglet Paramètres et enregistrez-les dans la configuration du plugin miniOrange OAuth Client.

OAuth/OpenID/OIDC Single Sign-On (SSO),Auth0 SSO Login informations d'identification du client

Maintenant, allez à Utilisateurs dans la gestion des utilisateurs depuis le panneau de gauche.

OAuth/OpenID/OIDC Single Sign-On (SSO), Auth0 SSO Login, accédez à l'utilisateur

Cliquez sur Créer un utilisateur pour créer un nouvel utilisateur.

OAuth/OpenID/OIDC Single Sign-On (SSO), Auth0 SSO Login créer un utilisateur

Entrez tous les détails requis et cliquez sur Créer.

OAuth/OpenID/OIDC Single Sign-On (SSO), Auth0 SSO Login répond aux exigences de l'utilisateur

Vous avez configuré avec succès Auth0 en tant que fournisseur OAuth pour obtenir une connexion Auth0 SSO à votre site WordPress.

Étape 2 : Configurer WordPress en tant que client OAuth

Gratuit
Devenez membre Premium

Allez dans Configurer OAuth onglet et cliquez Ajouter une nouvelle application pour ajouter une nouvelle application client à votre site Web.

Auth0 Single Sign-On (SSO) - Auth0 OAuth OAuth - Ajouter une nouvelle application

Choisissez votre application dans la liste des fournisseurs OAuth / OpenID Connect, ici Auth0

Auth0 Single Sign-On (SSO) - Auth0 OAuth OAuth - Sélectionner une application

Après avoir sélectionné le fournisseur, copiez le URL de rappel qui doit être configuré dans la configuration de l'application SSO du fournisseur OAuth.
Entrez les informations d'identification du client comme identité du client & Secret client que vous obtiendrez de l’application Auth0 SSO.
Configurer Services trouvé à partir de l’application Auth0 SSO. Veuillez vous référer au tableau ci-dessous pour configurer le portée et points finaux pour Auth0 dans le plugin.

À noter: Une fois que vous avez créé le compte Auth0, vous trouverez le URL du domaine et vous devrez ajouter la même chose dans les points de terminaison ci-dessous.

Portée:	email de profil openid
Autoriser le point de terminaison :	https://<Auth0-app-domain>/authorize
Point de terminaison du jeton d’accès :	https://<Auth0-app-domain>/oauth/token
Obtenir le point de terminaison des informations utilisateur :	https://<Auth0-app-domain>/userinfo

Auth0 Single Sign-On (SSO) - Auth0 OAuth OAuth - ajouter les informations d'identification du client

Cliquez sur Suivant.
Après avoir vérifié tous les détails sur la page récapitulative, cliquez sur Terminer pour enregistrer la configuration ainsi que tester la connexion SSO.

Auth0 Single Sign-On (SSO) - terminer la configuration

Vous avez configuré avec succès WordPress comme client OAuth pour obtenir une connexion Auth0 sur votre site WordPress.

Allez dans Configurer OAuth et recherchez le nom de votre application pour ajouter une nouvelle application client à votre site Web, ici Auth0.

Configurer Nom de l'application, ID client, secret client à partir de l'application Auth0 SSO.

Veuillez vous référer au tableau ci-dessous pour configurer le portée et points de terminaison pour Auth0 dans le plugin.

À noter: Une fois que vous avez créé le compte Auth0, vous trouverez le URL du domaine et vous devrez ajouter la même chose dans les points de terminaison ci-dessous.

Portée:	profil ouvert
Autoriser le point de terminaison :	https://{your-auth0-domain}/authorize
Point de terminaison du jeton d’accès :	https://{your-auth0-domain}/oauth/token

Auth0 Single Sign-On (SSO) - Auth0 OAuth OAuth - Ajouter le nom de l'application, TenantID

Choisissez votre Type de subvention dans la liste des options & Cliquez sur Enregistrer les paramètres pour enregistrer la configuration.

Auth0 Single Sign-On (SSO) - Auth0 OAuth OAuth - Ajouter un type d'octroi

Vous avez configuré avec succès WordPress comme client OAuth pour obtenir une connexion Auth0 à votre site WordPress.

Étape 3 : Mappage des attributs utilisateur

Le mappage des attributs utilisateur est obligatoire pour permettre aux utilisateurs de se connecter avec succès à WordPress. Nous allons configurer les attributs du profil utilisateur pour WordPress en utilisant les paramètres ci-dessous.

Recherche des attributs utilisateur :

Allez dans Configurer OAuth languette. Faites défiler vers le bas et cliquez sur Configuration du test.

Auth0 Single Sign-On (SSO) - Auth0 OAuth - configuration de test

Vous verrez toutes les valeurs renvoyées par votre fournisseur OAuth à WordPress dans un tableau. Si vous ne voyez pas de valeur pour Prénom, Nom, E-mail ou Nom d'utilisateur, définissez les paramètres requis dans votre fournisseur OAuth pour renvoyer ces informations.
Une fois que vous voyez toutes les valeurs dans la configuration du test, accédez à Mappage d’attributs/rôles , vous obtiendrez la liste des attributs dans une liste déroulante Nom d'utilisateur.

Auth0 Single Sign-On (SSO) - Auth0 OAuth - mappage attribut/rôle

Étape 4 : Mappage des rôles [Premium]

Cliquez sur « Configuration des tests » et vous obtiendrez la liste des noms d'attribut et des valeurs d'attribut envoyés par votre fournisseur OAuth.
Dans la fenêtre Configuration du test, mappez les noms d'attribut dans la section Mappage d'attributs du plugin. Reportez-vous à la capture d'écran pour plus de détails.

plugin client wordpress oauth sso : mappage d'attributs

Activer le mappage de rôles : Pour activer le mappage de rôle, vous devez mapper l'attribut de nom de groupe. Sélectionnez le nom de l'attribut dans la liste des attributs qui renvoie les rôles de votre application fournisseur.
Ex : Rôle

plugin client wordpress oauth sso : configuration de test - mappage de rôles

Attribuez le rôle WordPress au rôle Fournisseur : En fonction de votre application de fournisseur, vous pouvez attribuer le rôle WordPress à vos rôles de fournisseur. Il peut s'agir d'un étudiant, d'un enseignant, d'un administrateur ou de tout autre selon votre candidature. Ajoutez les rôles de fournisseur sous Valeur d'attribut de groupe et attribuez le rôle WordPress requis devant celui-ci sous Rôle WordPress.

Par exemple, dans l'image ci-dessous. L'enseignant s'est vu attribuer le rôle d'administrateur et l'étudiant se voit attribuer le rôle d'abonné.

Une fois le mappage enregistré, le rôle de fournisseur se verra attribuer l'authentification unique (SSO) pour WordPress.
Exemple : Selon l'exemple donné, les utilisateurs avec le rôle « enseignant » seront ajoutés en tant qu'administrateur dans WordPress et « étudiant » sera ajouté en tant qu'abonné.

Étape 5 : créer des attributs personnalisés dans Auth0

Ajouter des attributs personnalisés avec une valeur d'attribut commune
Ajouter des attributs personnalisés spécifiques à l'utilisateur avec différentes valeurs d'attribut

Allez dans https://auth0.com/auth/login pour vous connecter à votre compte de développeur Auth.
Dans le panneau de gauche, accédez à Action -> Flux -> Connexion.

Cliquez sur Ajouter une action -> Créer une personnalisation.

Entrez le nom souhaité et conservez les autres paramètres tels quels. Cliquer sur Créer .

Écrivez le code ci-dessous dans l'éditeur de code. Après avoir écrit le code, cliquez sur Déployer.

      
                
                Code:
                  exports.onExecutePostLogin = async (event, api) => {
                  const attr_name = "favorite_color";
                  api.idToken.setCustomClaim( attr_name , 'Purple');
                          
                  // ... additional code
                  };
                          
                Code Description:
                          
                  attr_name: This will be the attribute name which will you want to create (favorite_color in my case)
                          
                  The function api.idToken.setCustomClaim(), expects the key and its value. Here, the key is attr_name, and its value is “Purple”

Après avoir cliqué sur Déployer, revenez à Action -> Flux -> Connexion -> Personnalisé & Faites glisser et déposez l'action que nous avons créée (Ajouter des attributs personnalisés) entre les flux Démarrer et Terminer, comme indiqué ci-dessous :

Après avoir fait cela, cliquez sur Appliquer .
Enfin, effectuez la configuration de test dans le plugin miniOrange OAuth Single Sign-On pour voir l'attribut personnalisé de l'utilisateur, comme indiqué ci-dessous :

Allez dans https://auth0.com/auth/login pour vous connecter à votre compte de développeur Auth.
Dans le panneau de gauche, accédez à Gestion des utilisateurs -> Utilisateurs.
Sélectionnez l'utilisateur auquel vous souhaitez attribuer l'attribut personnalisé.

Après avoir sélectionné un utilisateur, faites défiler vers le bas et accédez à Métadonnées. Dans métadonnées_utilisateur, vous devrez ajouter les attributs personnalisés sous forme de paire clé-valeur, comme indiqué ci-dessous :

Dans le panneau de gauche, accédez à Action -> Flux -> Connexion.

Cliquez sur Ajouter une action -> Créer une personnalisation.

Entrez le nom souhaité et conservez les autres paramètres tels quels. Cliquer sur Créer .

Écrivez le code ci-dessous dans l'éditeur de code. Après avoir écrit le code, cliquez sur Déployer.

              

              Code:
                exports.onExecutePostLogin = async (event, api) => {
                          
                const { favorite_color, preferred_contact } = event.user.user_metadata;
                        
                if (event.authorization) {
                // Set claims 
                api.idToken.setCustomClaim('fav_color', favorite_color);
                api.idToken.setCustomClaim('preferred_contact', preferred_contact);
                }
                };
                        
                        
              Code Description:
                We’ll add the keys (created in user_metadata) in the const as the parameters.
                        
                When using the "api.idToken.setCustomClaim() function, you will need to include two parameters. The first parameter is used to specify the desired attribute name, while in the second parameter you will add the key which you want set the attribute value.

Après avoir cliqué sur Déployer, revenez à Action -> Flux -> Connexion -> Personnalisé & Glissez et déposez l'action que nous avons créée précédemment (Ajouter des attributs personnalisés) entre les flux Démarrer et Terminer, comme indiqué ci-dessous :

Après avoir fait cela, cliquez sur Appliquer .
Enfin, effectuez la configuration de test dans le plugin miniOrange pour voir l'attribut personnalisé de l'utilisateur, comme indiqué ci-dessous :

Étape 6 : Paramètres de connexion

Paramètres de connexion pour WordPress 5.7 et versions antérieures
Paramètres de connexion pour WordPress 5.8
Paramètres de connexion pour WordPress 5.9

Allez dans Panneau de gauche WordPress > Apparences > Widgets.
Sélectionner miniOrange OAuth. Faites glisser et déposez vers votre emplacement préféré et enregistrez.

Auth0 Single Sign-on (SSO) - Paramètre du bouton de connexion WordPress de création d'un nouveau client

Allez dans Panneau de gauche WordPress > Apparences > Widgets.
Sélectionner miniOrange OAuth. Faites glisser et déposez vers votre emplacement préféré et enregistrez.

Ouvrez votre authentification unique Auth0 pour l'authentification unique Auth0 pour WordPress (SSO) - Auth0 OAuth maintenant.

Assurez-vous que le "Afficher sur la page de connexion" L’option est activée pour votre application. (Reportez-vous à l'image ci-dessous)

Auth0 Single Sign-on (SSO) - Auth0 OAuth - Paramètre du bouton de connexion WordPress de création d'un nouveau client

Maintenant, allez à votre Se connecter à WordPress . (Par exemple https://<votre-domaine-wordpress>/wp-login.php)
Vous verrez un bouton de connexion Auth0 SSO. Une fois que vous aurez cliqué sur le bouton de connexion, vous pourrez tester l'authentification unique (SSO) Auth0 - Auth0 OAuth.

Table des matières