Gestion de l'accès à votre portail d'API avec Azure Active Directory - Cloud

Version
Cloud
Language
Français (France)
Product
Talend Cloud
Module
Talend API Designer
Content
Création et développement

Gestion de l'accès à votre API Portal avec Azure Active Directory

Déployez votre API Portal sur Azure Static Web Apps et configurez les rôles et les droits d'accès des consommateur·trices.

Azure Static Web Apps est fourni avec une fonctionnalité de gestion des rôles vous permettant d'utiliser Azure Active Directory pour gérer l'authentification à votre API Portal. Vous pouvez facilement définir des rôles personnalisés pour vos utilisateur·trices et limiter leur accès à des pages spécifiques.

Dans l'exemple suivant, l'API Portal contient :
  • une page d'accueil personnalisée
  • une page "Request access (Demander l'accès)" personnalisée
  • La liste des API par défaut avec la documentation publiée des API
  • La page "Getting started (Prise en main)" par défaut

La page "Getting started (Prise en main)" et la documentation des API doivent être disponibles uniquement aux utilisateur·trices ayant le rôle api_developer. La page d'accueil et la page "Request access (Demander l'accès)" doivent être visibles par tous les utilisateur·trices authentifié·es.

Pour plus d'informations concernant la personnalisation de la page d'accueil et la création de pages, consultez Organiser le contenu et en ajouter.

Définir les rôles personnalisés pour Azure Static Web Apps

Créez un fichier dans le dépôt de votre API Portal afin de définir des rôles personnalisés et leurs droits d'accès.

Avant de commencer

Vous avez généré le dépôt de votre API Portal depuis Talend Cloud API Designer. Pour plus d'informations, consultez le Guide d'utilisation de Talend Cloud API Designer.

Procédure

  1. À la racine du dépôt de votre API Portal, créez un fichier nommé staticwebapp.config.json.
    Ce fichier définit les routes (itinéraires en termes Microsoft) et les rôles pouvant y accéder. Pour plus d'informations, consultez Routes in Azure Static Web Apps.
  2. Définissez vos routes (itinéraires en termes Microsoft).
    Dans cet exemple, vous devez ajouter cinq routes :
    • /login pour permettre aux utilisateur·trices de se connecter via Azure Active Directory.
    • /logout pour permettre aux utilisateur·trices de se déconnecter
    • /me pour afficher les informations concernant l'utilisateur·trice.
    • /apis/* pour spécifier comment gérer la liste des API et la documentation des API.
    • /getting-started pour spécifier comment gérer la page "Getting started (Prise en main)".
    • /* pour spécifier comment gérer toute autre page de l'API Portal. Cette route doit être la dernière du fichier.

    Si nécessaire, vous pouvez également utiliser des routes pour bloquer les autres fournissseurs d'autorisations. Pour plus d'informations, consultez Bloquer un fournisseur d’autorisation.

  3. Définir une redirection si les utilisateur·trices ne sont pas connecté·es.

    Azure Static Web Apps retourne un code de statut 401 lorsqu'un·e utilisateur·trice non connecté·e essaye d'accéder à une page disponible uniquement aux utilisateur·trices connecté·es. Vous pouvez rediriger les utilisateur·trices à partir de la page d'erreur par défaut vers une page de connexion à l'aide de l'élément responseOverrides. Pour plus d'informations, consultez Remplacement des réponses.

    Dans cet exemple, le fichier staticwebapp.config.json ressemble à ceci :
    {
        "routes": [
            {
                "route": "/login",
                "rewrite": "/.auth/login/aad"
            },
            {
                "route": "/logout",
                "redirect": "/.auth/logout"
            },
            {
                "route": "/me",
                "redirect": "/.auth/me"
            },
            {
                "route": "/apis/*",
                "allowedRoles": ["api_developer"]
            },
            {
                "route": "/getting-started",
                "allowedRoles": ["api_developer"]
            },
            {
                "route": "/*",
                "allowedRoles": ["authenticated"]
            }
        ],
        "responseOverrides": {
            "401": {
                "redirect": "/login",
                "statusCode": 302
            }
        }
    }
  4. Effectuez un commit de vos modifications.

Personnaliser l'en-tête de votre API Portal

Personnalisez l'en-tête de votre API Portal pour afficher les informations utilisateur·trice et un bouton Log out (Déconnexion).

Pourquoi et quand exécuter cette tâche

Vous pouvez personnaliser les fichiers HTML de l'API Portal pour ajouter des éléments personnalisés si nécessaire. La bonne pratique est de copier les dossiers et fichiers depuis themes/talend à la racine du dépôt. Ainsi, vous pouvez écraser les fichiers par défaut sans les modifier.
Avertissement : Si vous avez téléchargé une version mise à jour du thème après avoir écrasé les fichiers du thème, vous devez mettre à jour manuellement vos fichiers personnalisés.

Procédure

  1. À la racine du dépôt de votre API Portal, créez un dossier layouts et, dans celui-ci, créez un dossier partials.
  2. Copiez le fichier /themes/talend/layouts/partials/header.html dans le dossier /layouts/partials créé.
    Vous avez à présent deux fichiers header.html dans le dépôt. Vous devez modifier celui dans /layouts/partials.
  3. Dans votre nouveau fichier header.html, avant la balise de fermeture </ul>, ajoutez un élément <li> contenant un lien vers la page de déconnexion et les informations utilisateur·trice.

    Exemple

      <li style="margin-left: auto; margin-right: 1em">
        <a href="/logout">Log out</a>
        <span id="user"></span>
      </li>
  4. Après la balise de fermeture </ul>, ajoutez un élément <script> pour récupérer les informations utilisateur·trice depuis la route /me.

    Exemple

    <script>
      fetch('/me')
      .then(response => response.json())
      .then(me => document.getElementById('user').innerHTML = me.clientPrincipal.userDetails)
      .catch(e => document.getElementById('user').innerHTML = 'Anonymous');
    </script>
  5. Effectuez un commit de vos modifications.

Déployer votre portail avec Azure Static Web Apps

Déployez votre portail en connectant votre dépôt GitHub à Azure Static Web Apps. Pour plus d'informations, consultez la Documentation sur Azure Static Web Apps.

Avant de commencer

  • Vous disposez des droits requis sur Microsoft Azure.
  • Vous avez généré le dépôt de votre API Portal.

Procédure

  1. Connectez-vous à votre compte Azure et ouvrez le service Static Web Apps.
  2. Cliquez sur Add pour créer une nouvelle application Web statique.
  3. Dans la section Projet Details (Détails du projet), sélctionnez votre abonnement et votre groupe de ressources.
  4. Dans Static Web App details, saisissez un nom pour votre application Web et sélectionnez une région.
  5. Cliquez sur Sign in with GitHub pour associer votre compte GitHub à votre application Web et cliquez sur Authorize Azure-App-Service-Static-Web-Apps.
  6. Une fois votre compte associé, sélectionnez l'entreprise, le dépôt et la branche à utiliser pour construire votre portail.
  7. Dans la liste déroulante Build Presets, sélectionnez Hugo, puis saisissez les détails requis de l'emplacement.
    Ce paramètre autorise Azure Static Web Apps à utiliser automatiquement la configuration de construction fournie dans le dépôt GitHub.
  8. Cliquez sur Review + create (Vérifier + créer).
  9. Assurez-vous que votre configuration est correcte et cliquez sur Create (Créer).

Résultats

Votre portail est en cours de déploiement et une Action GitHub démarre automatiquement sur votre dépôt.
Une fois terminée, vous pouvez cliquer sur l'URL fournie dans Azure Static Web Apps pour accéder à votre portail.

Ajouter des utilisateur·trices à votre API Portal

Invitez des utilisateur·trices à accéder à votre API Portal et gérez leurs rôles.

Procédure

  1. Dans Azure Static Web Apps, ouvrez votre application API Portal et allez dans Settings (Paramètres) > Role management (Gestion des rôles).
  2. Cliquez sur le bouton Invite (Inviter).
  3. Sélectionnez Azure Active Directory dans le champ Authentication provider et saisissez l'adresse e-mail de l'utilisateur·trice.
  4. Saisissez le nom du ou des rôle·s personnalisé·s adéquat·s, comme défini dans staticwebapp.config.json.
    Dans cet exemple, vous avez le rôle personnalisé api_developer.
  5. Cliquez sur Generate.
  6. Partagez le lien d'invitation fourni avec l'utilisateur·trice correspondant·e.

Résultats

Une fois que l'utilisateur·trice utilise le lien d'invitation, il ou elle pourra se connecter. Il lui sera proposé d'autoriser l'accès à leur adresse e-mail et identifiant. Il ou elle pourra ensuite voir les pages accessibles selon leurs rôles.