PageRenderTime 44ms CodeModel.GetById 19ms RepoModel.GetById 0ms app.codeStats 0ms

/articles/power-apps/powerapps-web-api-tutorial.md

https://gitlab.com/apachipa/azure-content
Markdown | 139 lines | 99 code | 40 blank | 0 comment | 0 complexity | 405653590122dc2114c2fbbbe3065511 MD5 | raw file
  1. <properties
  2. pageTitle="Tutorial: Create a custom API using an ASP.Net web app in PowerApps and Logic Flows | Microsoft Azure"
  3. description="ASP.Net web app tutorial to create a custom API in PowerApps and Logic Flows"
  4. services=""
  5. suite="powerapps"
  6. documentationCenter=""
  7. authors="sunaysv"
  8. manager="erikre"
  9. editor=""/>
  10. <tags
  11. ms.service="powerapps"
  12. ms.devlang="na"
  13. ms.topic="article"
  14. ms.tgt_pltfrm="na"
  15. ms.workload="na"
  16. ms.date="04/12/2016"
  17. ms.author="mandia"/>
  18. # Tutorial: Create a custom AAD protected web API for PowerApps and Logic Flows
  19. This tutorial shows you how to create a ASP.Net web API, host it on Azure Webapps, enable AAD authentication (via easy auth), and then register the web API in PowerApps and Logic flows.
  20. ## What you need to get started
  21. * An Azure subscription
  22. * A PowerApps account
  23. * Visual Studio 2013 or higher
  24. ## Step 1: Create a WebAPI and deploy it on Azure
  25. 1. Open Visual Studio and create a new C# ASP.NET web application:
  26. ![](./media/powerapps-web-api-tutorial/newwebapp.png "New WebApp")
  27. 2. On the next screen, select the web API template, and select **No Authentication**:
  28. ![](./media/powerapps-web-api-tutorial/noauth.png "No Authorization")
  29. >[AZURE.IMPORTANT] Make sure you set authentication to "No Authentication".
  30. 3. When the project is created, you need to build the web API for your resources. For this tutorial, we do not go in to the specifics of building a web API.
  31. 4. Next, Generate a Swagger file for the web API. You can do this easily by opening the __Package Manager Console__, and installing __Swashbuckle__:
  32. ![](./media/powerapps-web-api-tutorial/swashbuckle-console.png "Swashbuckle console")
  33. 5. Once installed and enabled, browse the following Swagger docs and UI endpoints respectively:
  34. **\<your-root-url\>/swagger/docs/v1**
  35. **\<your-root-url\>/swagger**
  36. 6. Once you are comfortable with your web API, publish it to Azure. To publish in Visual Studio, go to **BUILD**, and select **PUBLISH** .
  37. 7. Extract the swagger json by navigating to ***https://\<azure-webapp-url\>/swagger/docs/v1***.
  38. > [AZURE.IMPORTANT] A swagger document with duplicate operationid(s) is invalid. If you are using the sample C# template, the operation-id "Values_Get" is repeated twice. Change one instance to "Value_Get".
  39. You can download the swagger used in this tutorial [here][6]. Be sure to replace/remove the comments before using it. Comments start with `//`.
  40. ## Step 2: Set up AAD authentication
  41. This tutorial assumes you know how to create an AAD application in Azure. To learn more about how to create an AAD application, read the [Azure resource manager tutorial](powerapps-azure-resource-manager-tutorial.md). We need two AAD applications for this tutorial.
  42. 1. The first AAD application is used to secure the web API. Name it **webAPI**.
  43. 2. The second AAD application is used to secure the custom API registration and acquire delegated access to the web API protected by the first app. Name this one **webAPI-customAPI** .
  44. 3. For **webAPI**, use the following configuration:
  45. 1. Sign-on url: ***https://login.windows.net***
  46. 2. App-ID Uri: ***https://\<your-root-url\>*** (typically the url of your website deployed on Azure)
  47. 3. Reply url: ***https://\<your-root-url\>/.auth/login/aad/callback***
  48. >[AZURE.IMPORTANT] You need the Client ID of this app later, so note it.
  49. 4. For **webAPI-customAPI**, use the following configuration:
  50. 1. Sign-on url: **https://login.windows.net**
  51. 2. App-ID Uri: ***can be any unique URL***
  52. 3. Reply url: ***https://msmanaged-na.consent.azure-apim.net/redirect***
  53. 4. Add permissions to have delegated access to webAPI.
  54. 5. You need the Client ID of this app later as well, so note it.
  55. 6. Generate a key and store is somewhere safe. We need this key later.
  56. >[AZURE.IMPORTANT] Both apps must be in the same directory.
  57. ## Step 3: Set up easy auth on your web app
  58. 1. Sign in to the [Azure portal](https://portal.azure.com), and go to your web app that you deployed in **Step 1** (in this topic).
  59. 2. In **Settings**, select **"Authentication / Authorization"**.
  60. 3. Turn on **App Service Authentication**, and select **Azure Active Directory**. On the next blade, select **Express**.
  61. 4. Click on the **Select Existing AD App**, and select the first AAD application you created as part of Step two. In this case, select **webAPI**.
  62. This should setup AAD authentication for you web app.
  63. ## Step 4: Set up the Custom API
  64. 1. We need to modify our swagger a bit to enter the `securityDefintions` object and AAD authentication used for the web app. Add the following lines of code:
  65. ```javascript
  66. "host": "<your-root-url>",
  67. "schemes": [
  68. "https" //Change scheme to https
  69. ],
  70. "securityDefinitions": {
  71. "AAD": {
  72. "type": "oauth2",
  73. "flow": "implicit",
  74. "authorizationUrl": "https://login.windows.net/common/oauth2/authorize",
  75. "scopes": []
  76. }
  77. },
  78. ```
  79. 2. Go to the PowerApps [web portal][1], and add a custom API. [Use Custom APIs in Logic Flows and PowerApps](powerapps-register-custom-api.md) lists the steps.
  80. 3. Once you have uploaded your Swagger, the wizard auto-detects that you are using AAD authentication for your webAPI.
  81. 4. Configure the AAD authentication for your custom API:
  82. 1. Client ID: ***Client ID of webAPI-CustomAPI*** from 4.5 in **Step 2** (in this topic)
  83. 2. Secret: ***Key from webPI-CustomAPI*** from 4.6 in **Step 2** (in this topic)
  84. 3. Login url: ***https://login.windows.net***
  85. 4. ResourceUri: ***Client ID of webAPI*** from 3.4 in **Step 2** (in this topic)
  86. 5. Select **Create**, and try creating a connection on the Custom API. If everything is setup correctly, you should be able to sign-in successfully.
  87. For a more detailed experience on creating PowerApps and Logic Flows, see the following:
  88. - [Connect to Office 365, Twitter, and Microsoft Translator][5]
  89. - [Show data from Office 365][4]
  90. - [Create an app from data][3]
  91. - [Get started with logic flows][2]
  92. For questions or comments, email [customapishelp@microsoft.com](mailto:customapishelp@microsoft.com).
  93. <!--Reference links in article-->
  94. [1]: https://web.powerapps.com
  95. [2]: https://powerapps.microsoft.com/tutorials/get-started-logic-flow/
  96. [3]: https://powerapps.microsoft.com/tutorials/get-started-create-from-data/
  97. [4]: https://powerapps.microsoft.com/tutorials/show-office-data/
  98. [5]: https://powerapps.microsoft.com/tutorials/powerapps-api-functions/
  99. [6]: http://pwrappssamples.blob.core.windows.net/samples/webAPI.json