L’authentification des utilisateurs est l’une des parties les plus importantes de la création d’une application, et presque toutes les applications disposent d’une sorte d’authentification. Cependant, il devient rapidement difficile de gérer l’authentification lorsque vous avez plusieurs applications liées mais indépendantes à gérer.
Disons que vous créez une application de partage de photos qui permet à un utilisateur de s’inscrire avec un nom d’utilisateur et un mot de passe pour partager ses photos. Votre équipe pourrait décider plus tard de créer un forum avec WordPress pour aider à répondre aux questions de vos utilisateurs, mais ce nouveau projet n’est pas lié à votre application d’origine. Il utilise une pile technologique, une base de données et une configuration d’hébergement entièrement différentes.
Cela signifie que vos utilisateurs doivent s’inscrire de nouveau sur ce deuxième site Web et mémorisez un autre ensemble de noms d’utilisateur et de mots de passe. Donner aux utilisateurs deux ensembles d’informations d’identification entièrement différents n’est pas idéal, c’est donc là qu’intervient l’authentification unique.
L’authentification unique, communément appelée SSO, est un mécanisme d’authentification qui permet aux utilisateurs d’utiliser un seul ensemble d’informations d’identification pour se connecter à plusieurs applications ou sites Web différents. Dans une configuration SSO typique, vous avez un fournisseur de services – l’application à laquelle l’utilisateur essaie de se connecter – et un fournisseur d’identité comme FusionAuth, qui gère l’authentification. Cela signifie que vos utilisateurs n’ont besoin que d’un seul ensemble d’informations d’identification pour se connecter à toutes vos applications.
Utiliser FusionAuth pour l’authentification unique
Pour utiliser SSO, vous devez choisir un fournisseur d’identité qui gérera l’authentification pour vous. FusionAuth est l’un de ces fournisseurs d’identité. FusionAuth fournit des bibliothèques pour la plupart des principaux langages et frameworks de programmation, notamment PHP, Ruby, Python, Java, Go et .NET.
FusionAuth est entièrement personnalisable et est disponible en tant que package autonome pour Linux, Mac et Windows, vous pouvez donc auto-héberger FusionAuth sur n’importe quel serveur. Vous pouvez même commencer gratuitement, il n’est donc pas nécessaire d’entrer votre numéro de carte de crédit pour suivre ce tutoriel.
Si vous créez un site Web avec WordPress et que vous devez intégrer la gestion des utilisateurs, vous pouvez tirer parti de l’authentification unique. Il fournit une solution plus flexible pour les utilisateurs et leur évite de gérer plusieurs informations d’identification. Poursuivant l’exemple ci-dessus, avec l’authentification unique, un utilisateur peut se connecter à l’application de partage de photos et à l’application de forum avec le même nom d’utilisateur et le même mot de passe.
Dans ce didacticiel, vous apprendrez à configurer l’authentification unique dans WordPress à l’aide de FusionAuth à l’aide d’un Plugin WordPress OpenID Connect.
Conditions préalables
Pour intégrer FusionAuth à WordPress, vous avez besoin de deux choses : une instance WordPress avec des autorisations d’administrateur et un compte FusionAuth. Si vous souhaitez exécuter FusionAuth vous-même, vous pouvez téléchargez-le gratuitement.
Si vous souhaitez suivre ce didacticiel et ne souhaitez pas vous embêter à lancer une instance WordPress ou une instance FusionAuth, vous pouvez utiliser le Script Docker Compose ici pour configurer rapidement une instance WordPress et FusionAuth. Si vous avez déjà une instance WordPress et un compte FusionAuth, vous pouvez passer à Ajout de FusionAuth à WordPress.
Avant de commencer, assurez-vous que Docker est installé et exécuté sur votre ordinateur et que Docker Compose est installé. Vous pouvez trouver les guides d’installation de Docker ici et les guides pour Docker Compose ici.
Configuration de WordPress et FusionAuth
Une fois que Docker est en cours d’exécution et un compte FusionAuth, exécutez les commandes suivantes dans votre terminal :
git clone https://github.com/FusionAuth/fusionauth-example-wordpress-sso.git
cd fusionauth-example-wordpress-sso
docker-compose up -d
Cela démarrera une instance WordPress sur le port 8030 et une instance FusionAuth sur le port 9011. Maintenant, terminez l’installation de WordPress en ouvrant une fenêtre de navigateur et en accédant à localhost:8030.
Vous devriez être accueilli avec cet écran :
Choisissez votre langue préférée et cliquez sur « Continuer ».
Sur la page suivante, entrez le titre du site et créez un compte administrateur en fournissant un nom d’utilisateur, une adresse e-mail et un mot de passe.
Appuyez sur « Installer WordPress » pour terminer l’installation. Connectez-vous avec votre nouveau nom d’utilisateur et mot de passe lorsque c’est terminé.
Configuration de FusionAuth
Maintenant, configurons FusionAuth. Aller vers localhost:9011. Vous verrez l’écran de configuration FusionAuth.
Entrez votre nom, prénom, email et mot de passe. Une fois terminé, cliquez sur « Envoyer » pour terminer l’installation.
Ajout de FusionAuth SSO à WordPress
Une fois FusionAuth et WordPress installés, vous pouvez procéder à l’ajout de FusionAuth SSO à votre instance WordPress. Dans cette section, vous allez installer un plug-in OAuth Single Sign-On et le configurer pour communiquer avec votre instance FusionAuth locale.
Installation du plugin
Pour ce tutoriel, vous utiliserez le Plugin générique OpenID Connect.
Accédez à votre tableau de bord d’administration WordPress à localhost:8030/wp-admin et cliquez sur la page « Plugins » dans la barre latérale. Cliquez sur le bouton « Ajouter un nouveau », et sur la page suivante, recherchez « OpenID Connect Generic ».
Le plugin doit être le premier dans les résultats de la recherche. Tu veux celui par daggerhart. Installez et activez le plugin.
Une fois le plugin activé, choisissez « Paramètres » puis « OpenID Connect Client » dans le menu de gauche. C’est ici que vous pourrez configurer le plugin pour qu’il fonctionne avec FusionAuth.
Mais d’abord, configurons FusionAuth. Après cela, vous reviendrez pour terminer la configuration de ce plugin WordPress.
Configuration de FusionAuth
Pour commencer avec SSO, vous devez créer une application dans FusionAuth. Une application représente la ressource où les utilisateurs se connecteront, dans votre cas, au site WordPress. Chaque site Web, application mobile ou toute autre application doit être créé en tant qu’application dans FusionAuth. Les utilisateurs peuvent utiliser le même nom d’utilisateur et mot de passe pour se connecter à toutes ces applications gérées par FusionAuth.
Nous n’allons pas créer une application de partage de photos dans ce tutoriel ; cela vous est laissé en exercice, cher lecteur. Supposons que vous ayez une application de partage de photos existante et que vous souhaitiez ajouter l’authentification unique dans une application WordPress, comme le forum mentionné ci-dessus.
Cliquez sur le menu « Applications » dans la barre latérale, puis sur le bouton vert plus (« + ») dans le coin supérieur droit.
Dans l’écran « Ajouter une application », fournissez un nom pour votre application. Ceci est juste à des fins d’affichage afin que vous puissiez distinguer vos applications.
Maintenant, cliquez sur l’onglet OAuth. Les paramètres par défaut devraient suffire. La seule chose que vous devez fournir est la valeur « URL de redirection autorisées ». Ce sont les URL vers lesquelles les utilisateurs seront redirigés après leur authentification. Dans ce cas, les deux URL sont fournies et gérées par le plugin. Saisissez ces deux URL :
http://localhost:8030/wp-admin/admin-ajax.php?action=openid-connect-authorize. Il s’agit de l’URL vers laquelle FusionAuth redirigera une fois l’utilisateur connecté.http://localhost:8030/wp-login.php?loggedout=true&wp_lang=en_USIl s’agit de l’URL vers laquelle FusionAuth redirigera une fois l’utilisateur déconnecté.
Ton wp_lang la valeur peut varier si vous utilisez un autre paramètre régional.
Une fois que vous avez déplacé cette application en production, assurez-vous de mettre à jour les URL de redirection autorisées avec les vrais noms d’hôte. Si votre site WordPress réside à forum.photosharing.com, les URL seraient :
https://forum.photosharing.com/wp-admin/admin-ajax.php?action=openid-connect-authorize. Il s’agit de l’URL vers laquelle FusionAuth redirigera une fois l’utilisateur connecté.https://forum.photosharing.com/wp-login.php?loggedout=true&wp_lang=en_USIl s’agit de l’URL vers laquelle FusionAuth redirigera une fois l’utilisateur déconnecté.
Voici à quoi devrait ressembler l’onglet « OAuth » une fois que vous avez terminé :
Par défaut, FusionAuth fournit une fonctionnalité de connexion. Vous devrez créer manuellement de nouveaux utilisateurs via le panneau d’administration ou via l’API. Ceci est utile si vous créez un site interne où vous ne voulez pas que les utilisateurs s’enregistrent, mais dans ce didacticiel, les utilisateurs devraient pouvoir créer un compte.
Pour activer l’enregistrement de l’utilisateur, cliquez sur l’onglet « Inscription » et activez « Inscription en libre-service ». Conservez les paramètres par défaut inchangés.
Lorsque vous avez terminé, cliquez sur le bouton bleu Enregistrer dans le coin supérieur droit :
Une liste de vos applications vous sera maintenant présentée. Cliquez sur le bouton de visualisation (le miroir vert) à côté de l’application que vous venez de créer :
Une fenêtre contextuelle s’ouvrira avec les détails de votre demande.
Recherchez la section « Configuration OAuth ». Vous devrez peut-être faire défiler un peu vers le bas :
Gardez cette fenêtre ouverte car vous devrez faire un peu de copier-coller à partir d’ici à l’étape suivante.
Configuration du plugin
Revenez à votre tableau de bord d’administration WordPress où vous avez stocké les informations du plugin WordPress.
Vous devriez voir cet écran de configuration :
Revenez à l’écran FusionAuth et copiez « Client Id » et « Client Secret » dans la fenêtre contextuelle (vous devrez peut-être faire défiler un peu vers le bas).
Maintenant, retournez à l’écran de configuration du plugin WordPress et commencez à saisir des valeurs.
- Collez les valeurs des champs « Client Id » et « Client Secret » dans le formulaire de configuration.
- Mettre
openiddans le champ « Portée OpenID ». - Dans le champ “Login Endpoint URL”, mettez
<your-fusionauth-domain>/oauth2/authorize. Dans notre cas, ce serahttp://localhost:9011/oauth2/authorize. - Dans le champ “Userinfo Endpoint URL”, mettez
<your-fusionauth-domain>/oauth2/userinfo. Cependant, comme nous fonctionnons dans un conteneur Docker, WordPress ne peut pas atteindre FusionAuth vialocalhost, donc l’URL doit êtrehttp://fusionauth:9011/oauth2/userinfo. Docker s’occupe de la résolution DNS locale. - Dans le champ « URL de point de terminaison de validation de jeton », mettez
<your-fusionauth-domain>/oauth2/token. Dans notre cas, il doit êtrehttp://localhost:9011/oauth2/token. Dans notre cas, pour la même raison, il serahttp://fusionauth:9011/oauth2/token. - Dans le champ « URL de point de terminaison de session », mettez
<your-fusionauth-domain>/oauth2/logout. Dans notre cas, ce serahttp://localhost:9011/oauth2/logout. - Cochez « Désactiver la vérification SSL » car aucune de nos instances Docker n’exécute HTTPS.
- Remplacez les valeurs « Clé d’identité » et « Clé de surnom » par
sub. C’est ce que WordPress utilisera comme identifiants en interne. - Remplacez le « Formatage du nom d’affichage » par
{email}. C’est ce qui sera affiché à l’utilisateur dans l’écran d’administration de WordPress. - Cochez « Lier les utilisateurs existants » si les utilisateurs de votre base de données WordPress locale ont les mêmes e-mails que les utilisateurs de votre base de données FusionAuth ; sinon, vous verrez une erreur lorsque ces utilisateurs essaieront de se connecter.
Notez que « Autoriser le point de terminaison » n’a pas besoin d’être modifié car il sera ouvert dans le navigateur. Comme mentionné ci-dessus, pour les URL telles que « URL de point de terminaison de validation de jeton », si vous utilisez Docker, vous devrez utiliser un nom d’hôte résolvable tel que fusionauth. Si vous n’utilisez pas Docker, vous devez garder toutes les URL pointées vers localhost.
Cliquez enfin sur le bouton « Enregistrer les modifications ». Voici à quoi ressemblera un formulaire rempli une fois que vous l’aurez rempli :
Essai
Pour tester l’ensemble du flux de connexion, déconnectez-vous du tableau de bord WordPress ou utilisez une fenêtre de navigation privée. Accédez à la page de connexion WordPress : http://localhost:8030/wp-login.php. Vous devriez voir un bouton « Connexion avec OpenID Connect » au-dessus des champs de connexion habituels.
En cliquant sur ce bouton, vous serez redirigé vers la page de connexion FusionAuth. Vous pouvez vous connecter avec vos informations d’identification FusionAuth, par exemple l’utilisateur que vous avez créé en premier.
Vous pouvez également cliquer sur le lien « Créer un compte » et enregistrer un nouvel utilisateur.
Une fois authentifié avec succès, vous serez redirigé vers la page d’accueil de l’administrateur du site WordPress.
Toutes les pages destinées aux utilisateurs de FusionAuth peuvent être thématiques pour ressembler aux autres pages d’application. En savoir plus ici.
Vous pouvez confirmer qu’il s’agit bien de l’utilisateur avec lequel vous vous êtes connecté en regardant le nom d’affichage, qui devrait être l’adresse e-mail de votre utilisateur FusionAuth.
Félicitations, vous avez implémenté avec succès l’authentification unique avec FusionAuth sur votre site WordPress. Les utilisateurs peuvent s’inscrire et se connecter avec succès.
Conclusion
Dans ce didacticiel, vous avez appris comment l’authentification unique peut faciliter la vie de vos utilisateurs WordPress en leur permettant d’utiliser un seul ensemble d’informations d’identification pour se connecter à toutes vos applications. Vous avez appris comment FusionAuth peut servir de fournisseur d’identité et comment l’intégrer à WordPress en tirant parti d’un plugin SSO.
*** Ceci est un blog syndiqué Security Bloggers Network de Le blog FusionAuth Rédigé par Le blog FusionAuth. Lire le message original sur : https://fusionauth.io/blog/2021/12/06how-to-set-up-single-sign-on-between-fusionauth-wordpress/
Jeu de briques
Snake
Pacman
Bubble