Créer un connecteur personnalisé pour une API Web dans PowerAppsBuild a custom connector for a Web API in PowerApps

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.This tutorial shows you how to start bulding an ASP.NET Web API, host it on Azure Web Apps, enable Azure Active Directory authentication, and then register the ASP.NET Web API in PowerApps. Après avoir enregistré l’API, vous pouvez vous y connecter et l’appeler à partir de votre application.After the API is registered, you can connect to it and call it from your app.

Conditions préalablesPrerequisites

Créer une API web ASP.NET et la déployer vers AzureCreate an ASP.NET Web API and deploy it to Azure

  1. Dans Visual Studio, cliquez sur Fichier > Nouveau projet pour créer une application web ASP.NET en C#.In Visual Studio, click File > New Project to create a new C# ASP.NET web application.

    Nouvelle application web

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

    Nouveau modèle de projet web

  3. Sélectionnez No authentication (Aucune authentification), puis cliquez sur OK.Select No Authentication, and then click OK.

    Aucune authentification

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

    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.Select your Azure account, type a Web App name (or leave the default), and select your Azure Subscription. Sélectionnez ou créez un plan App Service (une collection d’applications web dans votre abonnement).Select or create an App Service plan (a collection of Web Apps within your subscription). Sélectionnez ou créez un groupe de ressources (un ensemble de ressources Azure dans votre abonnement).Select or create a Resource group (a grouping of Azure resources within your subscription). Sélectionnez la région où l’application web doit être déployée.Select the region where the Web App should be deployed. Si cela est nécessaire pour votre API web, sélectionnez ou créez un serveur de base de données Azure.If required for your Web API, select or create an Azure Database server. Pour finir, cliquez sur OK.Finally, click OK.

  5. Créez votre API web.Build out your Web API.

    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#)).Note: If you don't already have code ready for a Web API, try the tutorial Getting Started with ASP.NET Web API 2 (C#).

  6. Pour connecter notre API web à PowerApps, nous aurons besoin d’un fichier OpenAPI décrivant ses opérations.To connect our Web API to PowerApps, we'll need an OpenAPI file that describes its operations. 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.You could write an OpenAPI of your own using the online editor, but for this tutorial, you'll use an open-source tool named 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 the Swashbuckle Nuget package in your Visual Studio project by clicking Tools > NuGet Package Manager > Package Manager Console, and then, in the Package Manager Console, type the command 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.Tip: When you run your Web API application after installing Swashbuckle, an OpenAPI file will now be generated at the 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.A generated user interface is also available at http://<your root URL>/swagger.

  7. Lorsque votre API web est prête, publiez-la sur Azure.When your Web API is ready, publish it to 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.To publish from Visual Studio, right-click on the web project in Solution Explorer, click Publish..., and then follow the prompts in the Publish dialog.
  8. Récupérez le fichier OpenAPI JSON en accédant à https://<azure-webapp-url>/swagger/docs/v1.Retrieve the OpenAPI JSON by navigating to https://<azure-webapp-url>/swagger/docs/v1. Enregistrez le contenu dans un fichier JSON.Save the content as a JSON file. En fonction de votre navigateur, vous devrez peut-être copier et coller le texte dans un fichier texte vide.Depending on your browser, you may need to copy and paste the text into an empty text file.

    Important : un document OpenAPI qui présente des ID d’opération en double n’est pas valide.Important: An OpenAPI document with duplicate operation IDs is invalid. Si vous utilisez l’exemple de modèle C#, l’ID d’opération Values_Get est répété deux fois.If you are using the sample C# template, the operation ID Values_Get is repeated twice. Vous pouvez corriger ce problème en remplaçant une instance par Value_Get avant de republier.You can correct this by changing one instance to Value_Get and re-publishing. Vous pouvez également télécharger un exemple de fichier OpenAPI à partir de ce didacticiel.You can also download a sample OpenAPI file from this tutorial. Veillez à supprimer les commentaires (commençant par //) avant de l’utiliser.Be sure to remove the comments (starting with //) before using it.

Configurer une authentification Azure Active DirectorySet up Azure Active Directory authentication

Vous allez maintenant créer deux applications Azure Active Directory (AAD) dans Azure.You will now create two Azure Active Directory (AAD) applications in Azure. Pour obtenir un exemple sur la procédure à adopter, consultez le didacticiel Azure Resource Manager.For an example of how to do this, see the Azure Resource Manager tutorial.

Important : les deux applications doivent se trouver dans le même répertoire.Important Both apps must be in the same directory.

Première application AAD : sécurisation de l’API webFirst AAD application: Securing the Web API

La première application AAD est utilisée pour sécuriser l’API web.The first AAD application is used to secure the Web API. Nommez-la webAPI.Name it 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 :Follow the above linked tutorial steps (just the section titled "Enable authentication in Azure Active Directory") with the following values:

  • URL de connexion : https://login.windows.netSign-on URL: https://login.windows.net
  • URL de réponse : https://<your-root-url>/.auth/login/aad/callbackReply URL: https://<your-root-url>/.auth/login/aad/callback
  • Vous n’avez pas besoin de clé client.There is no need for a client key.
  • Il est inutile de déléguer des autorisations.There is no need to delegate any permissions.
  • Important : notez l’ID d’application.Important: Note the application ID. Vous en aurez besoin ultérieurement.You will need it later.

Deuxième application AAD : sécurisation du connecteur personnalisé et accès déléguéSecond AAD application: Securing the custom connector and delegated access

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.The second AAD application is used to secure the custom connector registration and acquire delegated access to the Web API protected by the first application. Nommez cette application webAPI-customAPI.Name this one webAPI-customAPI .

  • URL de connexion : https://login.windows.netSign-on URL: https://login.windows.net
  • URL de réponse : https://msmanaged-na.consent.azure-apim.net/redirectReply URL: https://msmanaged-na.consent.azure-apim.net/redirect
  • Ajoutez des autorisations pour obtenir un accès délégué à l’API web.Add permissions to have delegated access to Web API.
  • Vous aurez aussi besoin ultérieurement de l’ID d’application de cette application ; veillez donc à la noter.You need the application ID of this application later as well, so note it.
  • Générez une clé client et placez-la en lieu sûr.Generate a client key and store is somewhere safe. Vous aurez besoin de cette clé ultérieurement.We need this key later.

Ajouter une fonction d'authentification à votre application web AzureAdd authentication to your Azure Web App

  1. Connectez-vous au portail Azure, puis recherchez l’application web que vous avez déployée dans la première section.Sign in to the Azure portal and then find your Web App that you deployed in the first section.
  2. Cliquez sur Paramètres, puis sélectionnez Authentification / autorisation.Click Settings, and then select Authentication / Authorization.
  3. Activez App Service Authentication (Authentification App Service), puis sélectionnez Azure Active Directory.Turn on App Service Authentication and then select Azure Active Directory. Dans le panneau suivant, sélectionnez Express.On the next blade, select 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.Click Select Existing AD App, and select the webAPI AAD application you created earlier.

Vous devriez maintenant pouvoir utiliser AAD pour authentifier votre application web.You should now be able to use AAD to authenticate your web application.

Ajouter le connecteur personnalisé à PowerAppsAdd the custom connector to PowerApps

  1. Modifiez votre fichier OpenAPI afin d’ajouter l’objet securityDefintions ainsi que l’authentification AAD utilisée pour l’application web.Modify your OpenAPI file to add the securityDefintions object and AAD authentication used for the Web App. La section de votre fichier OpenAPI qui comporte la propriété host devrait ressembler à ceci :The section of your OpenAPI file with the host property should look like this:
// 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.Browse to PowerApps, and add a custom connector as described in Register and use custom connectors in PowerApps.
  2. Dès que chargez votre fichier OpenAPI, l’assistant détecte automatiquement l’utilisation de l’authentification AAD pour votre API web.Once you have uploaded your OpenAPI file, the wizard auto-detects that you are using AAD authentication for your Web API.
  3. Configurez l’authentification AAD pour le connecteur personnalisé.Configure the AAD authentication for the custom connector.

    • Client ID : ID client de webAPI-CustomAPIClient ID: Client ID of webAPI-CustomAPI
    • Secret : clé client de webAPI-CustomAPISecret: Client key of webAPI-CustomAPI
    • Login URL : https://login.windows.netLogin URL: https://login.windows.net
    • ResourceUri : ID client de l’API webResourceUri: Client ID of webAPI
  4. Cliquez sur Créer pour établir une connexion avec le connecteur personnalisé.Click Create and creating a connection to the custom connector.

Étapes suivantesNext Steps

Passez en revue le didacticiel de création d’un connecteur personnalisé à l’aide d’Azure Resource Manager.Walk through the Azure Resource Manager custom connector tutorial.