Ajoutez l’authentification à votre application WordPress

Ce tutoriel vous montrera comment intégrer Logto à votre site web Wordpress.

Prérequis

• Un compte Logto Cloud ou un Logto auto-hébergé.
• Une application traditionnelle Logto créée.
• Un projet WordPress : suivez le guide d'installation officiel de Wordpress pour configurer votre site web Wordpress avant de continuer.

Intégration

Installer le plugin

Nous utiliserons le plugin OpenID Connect Generic pour intégrer Logto via le protocole OIDC dans votre site web Wordpress.

1. Connectez-vous à votre site WordPress.
2. Allez dans "Plugins" et cliquez sur "Ajouter nouveau".
3. Recherchez "OpenID Connect Generic" et installez le plugin par daggerhart.
4. Activez le plugin.

Configurer l'URI de redirection

Tout d'abord, configurons l'URI de redirection. Vous pouvez le trouver dans les paramètres du plugin, faites défiler jusqu'à la section "Notes" et copiez la valeur "Redirect URI".

Passez à la page des détails de l'application de Logto Console. Ajoutez un URI de redirection et cliquez sur "Enregistrer les modifications".

Configurer le plugin

Référez-vous au tableau suivant pour les détails de configuration nécessaires :

Champ du plugin	Description
Client ID	L'ID de l'application de votre application Logto
Client Secret	Le secret de l'application de votre application Logto
OpenID Scope	Entrez email profile openid offline_access
Login Endpoint URL	L'URL du point de terminaison d'autorisation de votre application Logto, qui est https://[tenant-id].logto.app/oidc/auth, vous pouvez cliquer sur "afficher les détails du point de terminaison" dans la page de l'application Logto pour obtenir l'URL.
Userinfo Endpoint URL	L'URL du point de terminaison des informations utilisateur de votre application Logto, qui est https://[tenant-id].logto.app/oidc/me.
Token Validation Endpoint URL	L'URL du point de terminaison de validation des jetons de votre application Logto, qui est https://[tenant-id].logto.app/oidc/token.
End Session Endpoint URL	L'URL du point de terminaison de fin de session de votre application Logto, qui est https://[tenant-id].logto.app/oidc/session/end.
Identity Key	La clé unique dans le jeton d’identifiant qui contient l'identité de l'utilisateur, elle peut être email ou sub, selon votre configuration.
Nickname Key	La clé dans le jeton d’identifiant qui contient le surnom de l'utilisateur, vous pouvez la définir sur sub et la modifier plus tard.

Point de contrôle : Testez votre application

Maintenant, vous pouvez tester votre application :

1. Déconnectez-vous de votre site WordPress.
2. Visitez la page de connexion WordPress et cliquez sur le bouton "Se connecter avec Logto".
3. Vous serez redirigé vers la page de connexion Logto.
4. Connectez-vous avec votre compte Logto.
5. Vous serez redirigé vers le site WordPress et connecté automatiquement.

Mappage des rôles

WordPress dispose d'un système de gestion des rôles utilisateur intégré qui définit les actions (capacités) qu'un utilisateur peut effectuer sur un site. Les rôles utilisateur par défaut incluent Administrateur, Éditeur, Auteur, Contributeur et Abonné, chacun avec son propre ensemble de capacités.

Logto utilise le Contrôle d’accès basé sur les rôles (RBAC) comme modèle d'Autorisation, utilisant les "portées" comme la plus petite unité de Permission. Ces portées définissent les actions spécifiques qu'un utilisateur authentifié est autorisé à effectuer au sein d'une application. Cependant, WordPress fonctionne sur un principe différent pour gérer les Permissions utilisateur, en s'appuyant sur des "rôles" prédéfinis qui regroupent diverses capacités ensemble.

Étant donné cette différence fondamentale, nous suggérons de créer des rôles spéciaux au sein de Logto qui correspondent aux rôles définis dans WordPress. Ces rôles peuvent ne pas avoir de portées, ils sont uniquement utilisés comme référence pour mapper les utilisateurs aux rôles WordPress.

Prérequis

• Configurez des rôles dans Logto qui correspondent aux rôles dans WordPress. Par exemple, si vous avez un rôle 'éditeur' dans WordPress, créez un rôle 'group:editors' dans Logto.

Implémenter le mappage des rôles

Pour implémenter le mappage des rôles, nous ajouterons du code personnalisé au fichier functions.php du thème WordPress. Cela implique d'utiliser le hook d'action wp_login, qui se déclenche lorsqu'un utilisateur se connecte. Voici un guide étape par étape sur la façon de configurer cela :

Étape 1 : accéder au fichier functions.php de votre thème

Ouvrez le fichier functions.php de votre thème. Vous pouvez accéder à ce fichier via le panneau d'administration WordPress en naviguant vers Apparence > Éditeur de thème et en sélectionnant functions.php dans la liste des fichiers à droite. Ou dans le code source, naviguez vers le répertoire de votre thème WordPress et localisez le fichier functions.php. Ce fichier vous permet d'ajouter des fonctions PHP personnalisées qui étendent les fonctionnalités de votre site WordPress.

Étape 2 : écrire la fonction de mappage des rôles

Voici un exemple simple d'une fonction que vous pourriez ajouter à functions.php. Cette fonction sera déclenchée lors de la connexion de l'utilisateur et assignera des rôles en fonction de la revendication roles de l'utilisateur récupérée depuis Logto.

function logto_handler($user_login, $user = null) {
	if (!$user) {
		$user = get_user_by('login', $user_login);
	}

	$oidc_claims = get_user_meta($user->ID, 'openid-connect-generic-last-user-claim', true);

	if (in_array('group:editors', $oidc_claims['roles'])) {
		$user->set_role('editor');
	} else {
		$user->set_role('subscriber');
	}
}

add_action('wp_login', 'logto_handler', 10, 2);

Étape 3 : comprendre le code et le personnaliser

• Fonction logto_handler : Cette fonction prend deux paramètres : $user_login (nom d'utilisateur) et $user (objet utilisateur). Elle récupère les rôles depuis Logto qui sont stockés dans les métadonnées utilisateur sous openid-connect-generic-last-user-claim, mappe ce rôle à un rôle WordPress correspondant et l'assigne à l'utilisateur.

• add_action : Cette ligne connecte la fonction logto_handler à l'action wp_login, qui est déclenchée après la connexion d'un utilisateur. Le 10 est la priorité (par défaut), et 2 indique le nombre d'arguments que la fonction accepte.

L'exemple ci-dessus assigne le rôle 'éditeur' aux utilisateurs authentifiés via Logto avec le nom de rôle group:editors. Cependant, dans un scénario réel, vous devrez probablement implémenter plus de types de mappages de rôles.

Vous pouvez trouver la liste des rôles WordPress et leurs capacités ici.

Étape 4 : tester votre configuration

Maintenant, testons la fonction de mappage des rôles en nous connectant avec un utilisateur qui a le rôle group:editors dans Logto. Après vous être connecté, vérifiez le rôle de l'utilisateur dans WordPress pour vous assurer que le mappage fonctionne correctement.

Lectures complémentaires

Flux utilisateur final : flux d'authentification, flux de compte et flux d'organisation Configurer les connecteurs Protéger votre API