Au-delà de la simplification de l'expérience utilisateur de votre application, l'authentification unique présente également d'autres avantages. Le fait d'avoir un mot de passe ou un compte unique pour plusieurs applications limite le nombre de points vulnérables du système, ce qui augmente la sécurité et permet aux utilisateurs enregistrés de se souvenir plus facilement de leurs identifiants. Il est prouvé que les gens sont mauvais en matière de gestion des mots de passe et qu'ils réutilisent généralement le même mot de passe pour plusieurs comptes (une très mauvaise idée).

Donc, dans ce blog, je vais vous montrer comment ajouter une connexion avec Google SSO à n'importe quel Mendix application en quelques minutes seulement en utilisant le Module de marché OIDC(Authentification unique Open ID Connect)

De quoi avons-nous besoin ?

Avant de commencer, prenez un moment pour vérifier que vous disposez de tout ce dont vous avez besoin. Assurez-vous d'avoir créé un compte sur la plateforme Google Cloud.

Vous aurez également besoin de certains modules Marketplace pour votre Mendix App:

• Espaces communs communautaires
• Chiffrement
• Communes de Nanoflow
• Module OIDC

Premiers pas

Sur le Google Cloud Console, accédez à l'aperçu de votre projet qui ressemble à ceci.

Cliquez pour créer un nouveau projet, donnez-lui un nom (cela peut être n'importe quoi), puis cliquez sur Créer

Ouvrez votre projet et une fois sur le tableau de bord dans la barre de recherche en haut de la page, recherchez Écran de consentement OAUTH.

Pour le type d'utilisateur, choisissez Externe (cela permettra à tout utilisateur disposant d'un compte Google de créer un compte et d'accéder à votre application. Cliquez sur Créer pour continuer. Sur la page suivante, remplissez tous les détails requis avec vos propres informations comme indiqué ci-dessous.

Sur l'écran suivant « Étendues », vous n'avez rien à renseigner. Cliquez simplement sur Enregistrer et continuer en bas de l'écran.

Sur l'écran final intitulé « Utilisateurs de test », vous pouvez spécifier une liste d'utilisateurs autorisés à accéder à l'application pendant qu'elle est encore en phase de test. Tant que votre application est encore en développement, cela n'est généralement pas nécessaire, sauf si vous avez besoin de plus de 100 utilisateurs de test (car c'est la limite). Décidez si vous devez spécifier des utilisateurs ou non, puis cliquez sur Enregistrer et continuere en bas de l'écran pour continuer.

Nous pouvons maintenant accéder à la page des informations d'identification (dans le menu de gauche) et cliquer sur Créer des informations d'identification, dans la liste déroulante qui apparaît, sélectionnez OAuth ClientID

Sur la page suivante, sélectionnez votre type d'application, dans mon cas, j'ai sélectionné Application Web

Donnez un nom à votre client et ajoutez 2 « URI de redirection autorisées ». La première à ajouter est l'URL cloud de votre application (URL d'application gratuite ou toute URL cloud) et la seconde est votre hôte local. Nous ajoutons l'option d'hôte local afin de pouvoir le tester localement. N'oubliez pas d'ajouter « /oauth/v2/callback » à la fin de toute URL de redirection d'application. Cliquez sur Créer quand tu as fini.

C'est fait ! Assurez-vous de sauvegarder votre identifiant client et votre secret client dans un endroit sûr pour référence ultérieure.

Dans Studio Pro

Maintenant pour le Mendix section de cette version ! Afin de garantir que les utilisateurs anonymes peuvent accéder aux pages requises, nous devons nous assurer que notre application est configurée pour avoir la sécurité activée et également pour autoriser l'accès des utilisateurs anonymes. Pour cela, nous aurons besoin d'un rôle d'utilisateur invité que nous pouvons sélectionner comme utilisateur anonyme.

Assurez-vous également que votre rôle d'utilisateur invité est attribué au module OIDC en tant que rôle de module anonyme, et que l'administrateur doit se voir attribuer le rôle d'utilisateur Administrateur pour le même module OIDC.

Maintenant que nous avons configuré la sécurité et les rôles des utilisateurs, nous devons également autoriser l'utilisateur à accéder à la page de connexion. Accédez à la navigation de vos projets et ajoutez une page d'accueil basée sur les rôles pour les invités. Pour cela, vous pouvez sélectionner la page fournie par le module OIDC, « OIDC.Login_Web_Button ». Fournissez également une page d'accueil basée sur les rôles pour l'utilisateur.

Enfin, nous devons autoriser l'administrateur à accéder aux informations d'identification du client SSO et à les configurer. Une fois encore, une page est déjà fournie dans le module ODIC appelée « OIDC_Client_Overview ». Ajoutez-la à votre navigation et assurez-vous qu'elle est accessible par l'administrateur de votre application.

Exécutez votre application localement et connectez-vous en tant qu'administrateur. J'ai utilisé le widget de changement de démonstration pour me connecter facilement ici. Accédez ensuite à la page de présentation du client OIDC. Cliquez sur nouveau pour créer une nouvelle configuration.

Remplissez l'alias avec le nom que vous souhaitez, je l'ai simplement appelé Google.

Saisissez votre identifiant client et définissez le statut sur Actif. Plus important encore, vous devez ajouter l'URL de configuration automatique pour Google (https://accounts.google.com/.well-known/openid-configuration) et cliquez sur « Importer la configuration ». Cela remplira automatiquement le reste des champs obligatoires. Cette URL est spécifique à Google, d'autres fournisseurs auront leur propre version de celle-ci, alors assurez-vous d'avoir l'URL d'importation correcte pour le fournisseur que vous utilisez.

La dernière étape consiste à sélectionner vos étendues, qui sont les propriétés fournies par le client à propos de votre utilisateur. Assurez-vous de sélectionner OpenID, e-mail et profil (le profil est l'endroit où la plupart des informations de votre utilisateur sont stockées).

Tester la connexion

Lorsqu'un utilisateur invité arrive sur votre site, il verra désormais la page suivante, l'utilisateur doit cliquer sur « Se connecter via SSO »

Ensuite, ils verront cet écran qui invite l'utilisateur à sélectionner le compte Google avec lequel il souhaite se connecter.

Si votre configuration est réussie, l'utilisateur doit arriver sur la page d'accueil en tant qu'utilisateur authentifié. Afin de m'assurer que cette configuration fonctionne, j'ai ajouté une vue de données à la page d'accueil qui renvoie le compte de l'utilisateur connecté et j'ai affiché l'attribut $Account/FullName à l'aide d'une étiquette.

Une dernière chose

Bien que dans ce blog je me sois concentré sur l'utilisation de Google comme client SSO, il est important de se rappeler que ce module peut prendre en charge d'autres plates-formes telles que Salesforce et Microsoft, mais cette configuration devrait fonctionner pour tout client compatible OIDC. Enfin, ce module fonctionne également dans Native Mobile, alors amusez-vous à expérimenter et à essayer de nouvelles implémentations de celui-ci !

Un merci spécial à Éric Tieniber, le créateur de ce module Marketplace, et pour son aide dans la rédaction de cet article !