Comment les partenaires peuvent mettre en place l’authentification unique avec ArcGIS : partie 2
Vous voulez rendre vos applications ArcGIS plus faciles d’accès pour vos clients? Dans ce deuxième billet de blogue d’une série de deux, les membres d’Esri Canada Brianna Kelly, spécialiste en solutions technologiques, et John Osborne, concepteur de solutions, montrent comment créer une application de cartographie web qui s’authentifie dans l’environnement ArcGIS Enterprise configuré dans la première partie.
Dans la première partie de cette série, nous avons configuré des connexions SAML en vue d’authentifier les utilisateurs d’ArcGIS Enterprise avec Auth0. Si nous n’utilisions que des applications ArcGIS sous licence pour les utilisateurs d’ArcGIS Enterprise, la configuration serait complète. Cependant, beaucoup d’entre vous utilisent ArcGIS Enterprise dans le cadre d’une solution plus large que vous proposez à vos clients. Vous utilisez aussi probablement une ou plusieurs technologies ArcGIS Developer – notamment les interfaces API, les outils et les services de localisation – pour personnaliser et ajouter des fonctionnalités SIG avancées à vos applications.
Dans cette deuxième partie de cette série de billets, nous vous montrerons comment personnaliser un exemple d’application Auth0 JavaScript pour y inclure une application de cartographie web ArcGIS Maps SDK for JavaScript.
Les étapes de cette série de billets de blogue sont également disponibles sur GitHub. Notre référentiel GitHub comprend également les étapes facultatives mentionnées dans ce billet de blogue.
Vous voulez en savoir plus sur la façon de devenir membre du réseau des partenaires d’Esri? Obtenez plus d’information maintenant.
Avant de commencer
Pour suivre ce tutoriel, vous aurez besoin de ce qui suit, au minimum :
- ArcGIS Enterprise 11 (version minimale 10.9.1) – compte d’administrateur avec privilèges;
- abonnement annuel au type d’utilisateur Lite Partner (offert uniquement aux partenaires) ou abonnement annuel au type d’utilisateur Viewer;
- compte Auth0 – plan gratuit Auth0;
- tutoriel sur la connexion Auth0 JavaScript;
- utilisateur Auth0 – un utilisateur défini dans Auth0 auquel seront attribués des privilèges d’administrateur dans ArcGIS Enterprise.
À la fin de ce billet de blogue, l’exemple d’application Auth0 JavaScript comprendra une application de cartographie web ArcGIS Maps SDK for JavaScript qui accède au contenu sécurisé par ArcGIS Enterprise à l’aide de l’authentification unique web.
Maintenant que nous avons présenté ce qui sera couvert dans ce tutoriel et les exigences techniques, plongeons dans le vif du sujet!
Partie 1 : Télécharger l’exemple d’application monopage Auth0 Javascript
Important : L’exemple d’application Auth0 JavaScript nécessite l’installation de NODEJS LTS ou de Docker.
1. Connectez-vous à votre compte Auth0. Dans votre tableau de bord Auth0, cliquez sur Applications, puis sélectionnez votre application ArcGIS.
2. Naviguez jusqu’à l’onglet Quick Start (démarrage rapide).
3. Sélectionnez JavaScript pour ouvrir le tutoriel sur JavaScript.
4. À JavaScript: Login tutorial (tutoriel de connexion), cliquez sur DOWNLOAD SAMPLE (télécharger l’exemple). Suivez le tutoriel portant sur Auth0.
Pour des étapes de test supplémentaires, lisez « Optional Step: Test the Auth0 JavaScript Sample App » (étape optionnelle : tester l’exemple d’application Auth0 JavaScript), qui est une partie de notre fichier README (me lire) dans GitHub.
C’est l’exemple d’application Auth0 JavaScript qui affichera la demande de connexion de l’utilisateur. Dans la troisième partie de ce tutoriel, vous ajouterez une page web supplémentaire qui présente une carte web contenant un contenu sécurisé.
Partie 2 : Enregistrer une application avec ArcGIS Enterprise
1. Connectez-vous à votre organisation ArcGIS Enterprise en tant qu’utilisateur qui sera propriétaire de l’application.
2. Sous l’onglet Content (contenu), cliquez sur New item (nouvel élément).
3. Dans la boîte de dialogue New item (nouvel élément), sélectionnez Application.
4. Pour le type d’application, sélectionnez Web mapping (cartographie web), puis réglez l’URL à http://localhost:3000 et cliquez sur Next (suivant).
5. Fournissez un titre, des balises et un résumé pour l’enregistrement de l’application, puis cliquez sur Save (enregistrer).
6. Une fois l’élément créé, cliquez sur l’onglet Settings (paramètres).
7. Sous Web Mapping Application (application de cartographie web), cliquez sur Register (enregistrer).
8. Réglez l’URL de renvoi à http://localhost:3000/map.html, puis cliquez sur Add (ajouter).
9. Sélectionnez Register (enregistrer).
L’identifiant d’application généré par l’enregistrement de l’exemple d’application Auth0 JavaScript permet aux utilisateurs de se connecter à ArcGIS Enterprise avec OAuth 2.0. L’identifiant d’application sera utilisé dans la prochaine série d’étapes.
Partie 3 : Ajouter la page map.html à l’exemple d’application Auth0 JavaScript
Le fichier map.html auquel l’on fait référence dans cette section a été créé à l’aide de deux exemples de code ArcGIS Maps SDK for JavaScript disponibles sur le site des développeurs ArcGIS d’Esri :
- Couche d’entité de démonstration
- Exemple d’accès aux éléments ArcGIS Online par l’intermédiaire d’OAuth 2.0
1. Créez un nouveau fichier appelé map.html dans le dossier /01-login/public de l’exemple d’application Auth0.
2. Naviguez vers le fichier map.html sur GitHub.
3. Copiez le contenu brut et collez-le dans votre fichier map.html dans /01-login/public.
4. Dans ArcGIS Enterprise, sous l’onglet Content (contenu), cliquez sur votre application web, puis sur l’onglet Settings (paramètres).
5. Sous Web Mapping Application (application de cartographie web), cliquez sur Registered Info (informations enregistrées).
6. Copiez l’identifiant de l’application. Vous l’utiliserez dans une prochaine étape.
7. Dans le fichier map.html du dossier /01-login/public, remplacez les URL suivantes :
your_portal_url– URL du portail ArcGIS Enterprise.your_app_id– L’identifiant de votre application enregistrée dans ArcGIS Enterprise.your_fs_service_URL– La couche sécurisée que vous souhaitez utiliser dans la carte. Cet exemple utilise le service SampleWorldCities qui est créé par défaut lors de l’installation d’ArcGIS Enterprise.
8. Enregistrez.
9. Ouvrez /01-login.index.html.
10. Trouvez l’élément de navigation Home (accueil). Le code ressemble à ceci :
```
<li class="nav-item">
<a href="/" class="nav-link route-link">Home</a>
</li>
```
11. Ajoutez le code suivant sous l’élément Home (accueil). Les utilisateurs seront ainsi amenés à naviguer vers la page map.html.
```
<li class="nav-item">
<a href="/map.html" class="nav-link route-link">Map</a>
</li>
```
12. Le code devrait maintenant ressembler à ceci :
```
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="/" class="nav-link route-link">Home</a>
</li>
<li class="nav-item">
<a href="/map.html" class="nav-link route-link">Map</a>
</li>
</ul>
```
13. Ouvrez l’application.
14. Naviguez vers http://localhost:3000, connectez-vous à l’application web, puis cliquez sur l’onglet Map (carte) pour charger la carte.
Une nouvelle page web avec une carte web ArcGIS Maps SDK for JavaScript a été ajoutée à l’exemple d’application Auth0 JavaScript. La carte web accède au contenu sécurisé d’ArcGIS Enterprise. La nouvelle page web est accessible à partir de l’onglet Map (carte) créé sur la page de destination de l’exemple d’application Auth0 JavaScript. Lorsque l’utilisateur clique sur l’onglet Map (carte), il est dirigé vers l’écran Sign in to ArcGIS Enterprise with Esri (connexion à ArcGIS Enterprise avec Esri). Pour supprimer cet écran de connexion, suivez les étapes suivantes.
Partie 4 : Désactiver l’écran de connexion par défaut d’ArcGIS Enterprise
Important : Avant d’effectuer ces étapes, assurez-vous qu’au moins un utilisateur Auth0 se voit attribuer le rôle d’administrateur dans ArcGIS Enterprise. Si un utilisateur Auth0 n’est pas assigné en tant qu’administrateur, l’administration du portail devra être effectuée de manière programmatique. Pour plus de renseignements sur la manière de créer un utilisateur Auth0, consultez la rubrique d’aide d’Auth0 intitulée Créer des utilisateurs.
1. Connectez-vous à votre ArcGIS Enterprise en tant qu’administrateur.
2. Sous l’onglet Organization (organisation), allez à Members (membres). Assurez-vous qu’il y a au moins un membre dans l’organisation ArcGIS Enterprise avec un rôle d’administrateur et que l’utilisateur a également un compte actif dans Auth0.
3. Sous l’onglet Organization (organisation), allez dans Settings (paramètres) et sélectionnez Security (sécurité).
4. Sous Logins (connexions), désactivez la connexion ArcGIS.
5. Naviguez vers http://localhost:3000, connectez-vous à l’application web, puis cliquez sur l’onglet Map (carte) pour charger la carte.
Lorsqu’un utilisateur se connecte à l’exemple d’application Auth0 et clique sur l’onglet Map (carte), l’écran Sign in to ArcGIS Enterprise with Esri (connexion à ArcGIS Enterprise avec Esri) ne l’invite plus à se connecter.
Des questions?
Ceci conclut notre série de billets de blogue en deux parties sur l’authentification unique. (Lire la première partie ici.) En suivant les étapes des deux parties de la série de billets de blogue, vous pouvez offrir une expérience d’authentification unique lorsque vous utilisez ArcGIS Enterprise et les interfaces API et trousses SDK d’ArcGIS Developer. Veuillez noter que si vous souhaitez inclure la technologie Esri dans le cadre d’une offre commerciale, vous aurez besoin d’une autorisation de vente approuvée. Pour en savoir plus sur le processus d’autorisation des ventes ou sur l’ajout de la technologie Esri à vos offres commerciales, n’hésitez pas à nous contacter à l’adresse suivante : bpp@esri.ca.