Ce didacticiel vous montre comment commencer à créer une API web ASP.NET, l’héberger sur Azure Web Apps, activer l’authentification Azure Active Directory, puis inscrire l’API web ASP.NET dans PowerApps. Après avoir enregistré l’API, vous pouvez vous y connecter et l’appeler à partir de votre application.

Conditions préalables

Créer une API web ASP.NET et la déployer vers Azure

  1. Dans Visual Studio, cliquez sur Fichier > Nouveau projet pour créer une application web ASP.NET en C#.

    Nouvelle application web

  2. Sélectionnez le modèle API Web. Laissez la case Host in the cloud (Héberger dans le cloud) activée. Cliquez sur Modifier l’authentification.

    Nouveau modèle de projet web

  3. Sélectionnez No authentication (Aucune authentification), puis cliquez sur OK.

    Aucune authentification

  4. Cliquez sur OK dans la boîte de dialogue New ASP.NET Project (Nouveau projet ASP.NET). La boîte de dialogue Configure Microsoft Azure Web App (Configurer Microsoft Azure Web App) s’affiche.

    Configurer Microsoft Azure Web App ]

    Sélectionnez votre compte Azure, tapez un nom d’application web (ou laissez la valeur par défaut), puis sélectionnez votre abonnement Azure. Sélectionnez ou créez un plan App Service (une collection d’applications web dans votre abonnement). Sélectionnez ou créez un groupe de ressources (un ensemble de ressources Azure dans votre abonnement). Sélectionnez la région où l’application web doit être déployée. Si cela est nécessaire pour votre API web, sélectionnez ou créez un serveur de base de données Azure. Pour finir, cliquez sur OK.

  5. Créez votre API web.

    Remarque : si vous ne possédez pas encore de code disponible pour une API web, suivez le didacticiel Getting Started with ASP.NET Web API 2 (C#) (Débuter avec l’API web 2 ASP.NET (C#)).

  6. Pour connecter notre API web à PowerApps, nous aurons besoin d’un fichier OpenAPI décrivant ses opérations. Vous pourriez écrire vous-même un fichier OpenAPI à l’aide de l’éditeur en ligne, mais dans ce didacticiel, vous allez utiliser un outil open source appelé Swashbuckle. Installez le package Nuget Swashbuckle dans votre projet Visual Studio en cliquant sur Outils > Gestionnaire de package NuGet > Console du Gestionnaire de package, puis, dans la console, tapez la commande Install-Package Swashbuckle.

    Install-Package Swashbuckle

    Conseil : lorsque vous exécutez votre application API web après avoir installé Swashbuckle, un fichier OpenAPI est désormais généré à l’URL http://<your root URL>/swagger/docs/v1. Une interface utilisateur générée est également disponible à l’adresse http://<your root URL>/swagger.

  7. Lorsque votre API web est prête, publiez-la sur Azure. Pour publier à partir de Visual Studio, cliquez avec le bouton droit sur le projet web dans l’Explorateur de solutions, cliquez sur Publier... , puis suivez les invites dans la boîte de dialogue Publier.

  8. Récupérez le fichier OpenAPI JSON en accédant à https://<azure-webapp-url>/swagger/docs/v1. Enregistrez le contenu dans un fichier JSON. En fonction de votre navigateur, vous devrez peut-être copier et coller le texte dans un fichier texte vide.

    Important : un document OpenAPI qui présente des ID d’opération en double n’est pas valide. Si vous utilisez l’exemple de modèle C#, l’ID d’opération Values_Get est répété deux fois. Vous pouvez corriger ce problème en remplaçant une instance par Value_Get avant de republier. Vous pouvez également télécharger un exemple de fichier OpenAPI à partir de ce didacticiel. Veillez à supprimer les commentaires (commençant par //) avant de l’utiliser.

Configurer une authentification Azure Active Directory

Vous allez maintenant créer deux applications Azure Active Directory (AAD) dans Azure. Pour obtenir un exemple sur la procédure à adopter, consultez le didacticiel Azure Resource Manager.

Important : les deux applications doivent se trouver dans le même répertoire.

Première application AAD : sécurisation de l’API web

La première application AAD est utilisée pour sécuriser l’API web. Nommez-la webAPI. Suivez les étapes du didacticiel référencé ci-dessus (uniquement la section intitulée « Activer l’authentification dans Azure Active Directory ») avec les valeurs suivantes :

  • URL de connexion : https://login.windows.net
  • URL de réponse : https://<your-root-url>/.auth/login/aad/callback
  • Vous n’avez pas besoin de clé client.
  • Il est inutile de déléguer des autorisations.
  • Important : notez l’ID d’application. Vous en aurez besoin ultérieurement.

Deuxième application AAD : sécurisation du connecteur personnalisé et accès délégué

La deuxième application AAD sert à sécuriser l’inscription du connecteur personnalisé, et est utilisée pour acquérir un accès délégué à l’API web protégée par la première application. Nommez cette application webAPI-customAPI.

  • URL de connexion : https://login.windows.net
  • URL de réponse : https://msmanaged-na.consent.azure-apim.net/redirect
  • Ajoutez des autorisations pour obtenir un accès délégué à l’API web.
  • Vous aurez aussi besoin ultérieurement de l’ID d’application de cette application ; veillez donc à la noter.
  • Générez une clé client et placez-la en lieu sûr. Vous aurez besoin de cette clé ultérieurement.

Ajouter une fonction d'authentification à votre application web Azure

  1. Connectez-vous au portail Azure, puis recherchez l’application web que vous avez déployée dans la première section.
  2. Cliquez sur Paramètres, puis sélectionnez Authentification / autorisation.
  3. Activez App Service Authentication (Authentification App Service), puis sélectionnez Azure Active Directory. Dans le panneau suivant, sélectionnez Express.
  4. Cliquez sur Sélectionner une application AD existante, puis sélectionnez l’application AAD webAPI que vous avez créée précédemment.

Vous devriez maintenant pouvoir utiliser AAD pour authentifier votre application web.

Ajouter le connecteur personnalisé à PowerApps

  1. Modifiez votre fichier OpenAPI afin d’ajouter l’objet securityDefintions ainsi que l’authentification AAD utilisée pour l’application web. La section de votre fichier OpenAPI qui comporte la propriété host devrait ressembler à ceci :
// File header should be above here...

"host": "<your-root-url>",
"schemes": [
    "https"      //Make sure this is https!
],
"securityDefinitions": {
    "AAD": {
        "type": "oauth2",
        "flow": "implicit",
        "authorizationUrl": "https://login.windows.net/common/oauth2/authorize",
        "scopes": {}
    }
},

// The rest of the OpenAPI document follows...
  1. Accédez à PowerApps, et ajoutez un connecteur personnalisé, comme décrit dans l’article Enregistrer et utiliser des connecteurs personnalisés dans PowerApps.

  2. Dès que chargez votre fichier OpenAPI, l’assistant détecte automatiquement l’utilisation de l’authentification AAD pour votre API web.

  3. Configurez l’authentification AAD pour le connecteur personnalisé.

    • Client ID : ID client de webAPI-CustomAPI
    • Secret : clé client de webAPI-CustomAPI
    • Login URL : https://login.windows.net
    • ResourceUri : ID client de l’API web
  4. Cliquez sur Créer pour établir une connexion avec le connecteur personnalisé.

Étapes suivantes

Passez en revue le didacticiel de création d’un connecteur personnalisé à l’aide d’Azure Resource Manager.