{"id":109184,"date":"2017-12-28T10:54:39","date_gmt":"2017-12-28T18:54:39","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/cognitive-services-with-powerapps-using-custom-connectors\/"},"modified":"2025-06-11T08:10:26","modified_gmt":"2025-06-11T15:10:26","slug":"cognitive-services-with-powerapps-using-custom-connectors","status":"publish","type":"post","link":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/cognitive-services-with-powerapps-using-custom-connectors\/","title":{"rendered":"Cognitive Services with PowerApps using Custom Connectors"},"content":{"rendered":"
Microsoft Cognitive Services<\/a> are a set of APIs, SDKs and services available to developers to make their applications more intelligent, engaging and discoverable. This blog is an attempt to share an approach for PowerApps makers to use these Cognitive Services using custom connectors<\/a>.<\/p>\n There is an out-of-the-box Computer Vision API connector<\/a>, however the API uses dynamic types, which are not supported in PowerApps yet. There is also an out-of-the-box Face API connector<\/a>, however it isn\u2019t much useful in enterprise scenarios yet, as it\u2019s an API Key based connector and when a PowerApps app created using this connector is shared with other users, each user has to bring in their own API keys<\/a> for using the app.<\/p>\n In the approach described in this blog, the cognitive services APIs are called from an Azure API App<\/a>, using the client libraries which are just a C# client wrapper for the APIs. We shall be using the Microsoft.ProjectOxford.Face<\/a> and Microsoft.ProjectOxford.Vision<\/a> Nuget packages in our API app. I have shared the complete source code for the API App<\/a> for download as well as the PowerApps app file<\/a> to use & test the APIs as well. I have also combined the code for uploading an image to Azure Blob storage<\/a> in this new API app \u2013 ImageUtilities<\/strong>, so that one can use all these functions together in an app if needed.<\/p>\n First we shall create the necessary Azure Services (App Service, Blob Storage, Computer Vision API & Face API), then publish the API App to Azure.<\/p>\n Then, we shall register a new custom connector in PowerApps using the swagger definition from the API App.\u00a0<\/p>\n Finally, we shall create the PowerApps app using this new custom connector.<\/p>\n In PowerApps, when a maker shares an app created using a custom connector, the connector is automatically shared and hence other users can use the app (without needing to type in an API key). In the blog below, we shall also protect our API app endpoint with AAD and also register an app in Azure AD for the custom connector, so that other users can use their own AAD credentials to authenticate and get access to the APIs.<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n Here are the steps :<\/p>\n \u00a0<\/p>\n I have chosen to use an API App for the custom connector versus Azure Functions primarily as API apps can generate the Swagger document<\/a> for use with PowerApps using the Swashbuckle<\/a> Nuget package. This auto generates the definitions for all the reference classes like AnalysisResult<\/a> and others used by the APIs in the swagger document. Since I have used the Swashbuckle feature to include XML Comments<\/a> from my assembly to generate Summary and Description tags in swagger, it becomes quite handy for both the API registration and also for providing intelli-sense when authoring the functions from the PowerApps app.<\/p>\n \u00a0<\/p>\n You will need the following Azure Services setup before you can complete this step:<\/p>\n \u00a0<\/p>\n Download the code for the API App from this location: https:\/\/aka.ms\/ImageUtilitiesCode<\/a>\u00a0<\/p>\n \u00a0<\/p>\n If you haven\u2019t created an API App for use with PowerApps, I recommend reading this tutorial<\/a> to familiarize with the basic concepts. I have used Visual Studio 2017<\/a> for the code used in this app.\u00a0 Extract the contents of the zip file and open the ImageUtilities.sln<\/strong> file to launch the project in Visual Studio.\u00a0 We have added the following Controllers to correspond to the respective APIs from Azure Cognitive Services. The list of APIs for reference is given below:<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n Open the Web.config<\/strong> file and modify the highlighted values in the Web.Config file with corresponding values from your Azure services.<\/p>\n For the StorageConnectionString \u2013 use the format DefaultEndpointsProtocol=https;AccountName=myAccount;AccountKey=myKey;<\/p>\n Use the API keys for the Computer Vision and Face APIs that you had noted down earlier. Also populate the root end points for both the services as well.<\/p>\n \u00a0<\/p>\n Compile & test the APIs locally using the SwaggerUI (CTRL + F5 and navigating to http:\/\/localhost:64279\/<\/a>swagger<\/a>).<\/p>\n \u00a0<\/p>\n Once satisfied, publish the app to Azure. Refer to this article for a good tutorial for Publishing to Azure with Visual Studio<\/a>.\u00a0 Test your API end point by browsing to https:\/\/<yoursitename>.azurewebsites.net\/swagger\/<\/a>.<\/p>\n \u00a0<\/p>\n Download the swagger document. Browse to the Swagger URL mentioned in the Swagger UI of your API (https:\/\/<yoursitename>.azurewebsites.net\/swagger\/docs\/v1<\/a>) in IE and download the json file onto your disk and name it ImageUtilitiesSwaggerv1.json<\/strong><\/p>\n Follow the steps mentioned in this article<\/a> to secure your API with Azure Active Directory. If your Azure Subscription is in a different directory than your organizational Azure AD (like I had), follow the steps mentioned in the Alternative Method<\/a> but make sure that you do the app registration in your organization\u2019s Active Directory (Tip: you can open the AAD specific https:\/\/aad.portal.azure.com<\/a> portal in another browser tab or window).\u00a0 I have registered my app as ImageUtilitiesAPI <\/strong>in my active directory.<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n We now need to register a second application in AAD for the PowerApps connector. This is required to secure the PowerApps custom connector with AAD so that other users within the organization can use their own AAD credentials to authenticate against the connector for the app.\u00a0 I have registered this app as ImageUtilities_PAConnector<\/strong> in my Azure Active Directory.<\/p>\n The second AAD application is used to secure the custom connector registration and acquire delegated access to the ImageUtilitiesAPI<\/strong> app protected by the first application. Name this one ImageUtilities_PAConnector<\/strong>.<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n Register a new Custom Connector in PowerApps<\/a><\/p>\n Browse to the PowerApps portal<\/a>, and add a custom connector as described in this article: Register and use custom connectors<\/a>. Note down the Environment name where you are creating the Custom connector.<\/p>\n Once you have uploaded the OpenAPI (Swagger) file, the wizard auto-detects that you are using the AAD authentication for your web API.\u00a0 (If you are curious how, we have already added a security definitions in the SwaggerConfig file itself, using the c.OAuth2(“oauth2”) method)<\/p>\n Configure the AAD authentication for the custom connector.<\/p>\n You should be able to see all the actions and References imported from the swagger file in the Definition section as per screenshot below.<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n Click Create Connector <\/strong>to create the custom connector.<\/p>\n \u00a0<\/p>\n Open the PowerApps Portal<\/a>.\u00a0 Make sure that you have the same Environment selected as the one in which you created the Custom connector in the previous step.<\/p>\n Click on Apps from the left nav bar.\u00a0<\/p>\n Download the PowerApps app resources from this location: https:\/\/aka.ms\/CognitiveServicesPowerAppsDemo<\/a>.\u00a0 Right click the downloaded zip file (on windows) and select Properties to unblock the contents by checking the Unblock checkbox, before extracting the contents of the zip file.<\/p>\n Then click on Create an App <\/strong>from the top right. This will navigate you to the PowerApps web authoring site. Click on Open<\/strong> from the left nav, then click on Browse.<\/strong><\/p>\n \u00a0<\/p>\n Then select the CognitiveDemos.msapp <\/strong>file that you extracted from the downloaded zip file. This will load the PowerApps app in edit mode.<\/p>\n Click on View <\/strong>> DataSources<\/strong><\/p>\n Click on + Add data source<\/strong><\/p>\n Click on + New connection<\/strong>, and select the ImageUtilitiesAPI<\/strong> (custom connector that you created earlier). Authenticate using your AAD credentials to add it to your application.\u00a0 In case you are wondering the other two connections already present in the app, they are static data files imported from Excel. The source of the file is shared along with the PowerApps app file AppData.xlsx<\/strong>.<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n\u00a0<\/h3>\n
About this blog<\/h3>\n
Let\u2019s get started.<\/h3>\n
\n
Create the API App project<\/a><\/h3>\n
\n
\n
<\/p>\n\n <appSettings>\n <!--<add key=\"StorageConnectionString\" value=\"UseDevelopmentStorage=true\" \/>-->\n <add key=\"StorageConnectionString\" value=\"DummyValue\" \/>\n <add key=\"VisionAPIKey\" value=\"DummyValue\" \/>\n <add key=\"FaceAPIKey\" value=\"DummyValue\" \/>\n <add key=\"VisionAPIRoot\" value=\"https:\/\/westus.api.cognitive.microsoft.com\/vision\/v1.0\"\/>\n <add key=\"FaceAPIRoot\" value=\"https:\/\/westus.api.cognitive.microsoft.com\/face\/v1.0\"\/>\n <\/appSettings><\/pre>\n
\n\u00a0<\/pre>\n
<\/p>\n\u00a0<\/h3>\n
Publish the API to Azure<\/a><\/h3>\n
<\/p>\n
<\/p>\nProtect the API with Azure AD Authentication<\/a><\/h3>\n
<\/p>\n
<\/p>\nRegister another app in Azure AD for the PowerApps custom connector<\/a><\/h3>\n
\n
https:\/\/login.windows.net<\/code><\/li>\nhttps:\/\/msmanaged-na.consent.azure-apim.net\/redirect<\/code><\/li>\n
<\/p>\n\n
<\/p>\nCreate a PowerApps App to use the custom connector<\/a><\/h3>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\nSave, Publish and Test the app<\/a><\/h3>\n