PageRenderTime 38ms CodeModel.GetById 30ms app.highlight 6ms 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
 11<tags
 12   ms.service="powerapps"
 13   ms.devlang="na"
 14   ms.topic="article"
 15   ms.tgt_pltfrm="na"
 16   ms.workload="na" 
 17   ms.date="04/12/2016"
 18   ms.author="mandia"/>
 19
 20# Tutorial: Create a custom AAD protected web API for PowerApps and Logic Flows
 21
 22This 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. 
 23
 24## What you need to get started
 25
 26* An Azure subscription
 27* A PowerApps account
 28* Visual Studio 2013 or higher
 29
 30## Step 1: Create a WebAPI and deploy it on Azure
 311. Open Visual Studio and create a new C# ASP.NET web application:  
 32![](./media/powerapps-web-api-tutorial/newwebapp.png "New WebApp")
 33
 342. On the next screen, select the web API template, and select **No Authentication**:  
 35![](./media/powerapps-web-api-tutorial/noauth.png "No Authorization")
 36
 37	>[AZURE.IMPORTANT] Make sure you set authentication to "No Authentication".
 38
 393. 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.
 40
 414. Next, Generate a Swagger file for the web API. You can do this easily by opening the __Package Manager Console__, and installing __Swashbuckle__:  
 42![](./media/powerapps-web-api-tutorial/swashbuckle-console.png "Swashbuckle console")
 43
 445. Once installed and enabled, browse the following Swagger docs and UI endpoints respectively:  
 45 **\<your-root-url\>/swagger/docs/v1**  
 46
 47 	**\<your-root-url\>/swagger**  
 48
 496. Once you are comfortable with your web API, publish it to Azure. To publish in Visual Studio, go to **BUILD**, and select **PUBLISH** .
 50
 517. Extract the swagger json by navigating to ***https://\<azure-webapp-url\>/swagger/docs/v1***.  
 52
 53	> [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".
 54
 55
 56You can download the swagger used in this tutorial [here][6]. Be sure to replace/remove the comments before using it. Comments start with `//`.
 57
 58## Step 2: Set up AAD authentication
 59
 60This 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. 
 61
 621. The first AAD application is used to secure the web API. Name it **webAPI**.
 632. 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** .
 643. For **webAPI**, use the following configuration:  
 65
 66  1. Sign-on url: ***https://login.windows.net***
 67  2. App-ID Uri: ***https://\<your-root-url\>*** (typically the url of your website deployed on Azure)
 68  3. Reply url: ***https://\<your-root-url\>/.auth/login/aad/callback***  
 69  
 70	>[AZURE.IMPORTANT] You need the Client ID of this app later, so note it.
 71
 724. For **webAPI-customAPI**, use the following configuration:  
 73  
 74  1. Sign-on url: **https://login.windows.net**
 75  2. App-ID Uri: ***can be any unique URL***
 76  3. Reply url: ***https://msmanaged-na.consent.azure-apim.net/redirect***
 77  4. Add permissions to have delegated access to webAPI.
 78  5. You need the Client ID of this app later as well, so note it.
 79  6. Generate a key and store is somewhere safe. We need this key later.
 80
 81>[AZURE.IMPORTANT] Both apps must be in the same directory.
 82
 83## Step 3: Set up easy auth on your web app
 84
 851. 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).
 862. In **Settings**, select **"Authentication / Authorization"**.
 873. Turn on **App Service Authentication**, and select **Azure Active Directory**.  On the next blade, select **Express**.  
 884. 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**.
 89
 90This should setup AAD authentication for you web app.
 91
 92## Step 4: Set up the Custom API 
 93
 941. 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: 
 95
 96	```javascript
 97  "host": "<your-root-url>",
 98  "schemes": [
 99    "https"						//Change scheme to https 
100  ],
101  "securityDefinitions": {
102    "AAD": {
103      "type": "oauth2",
104      "flow": "implicit",
105      "authorizationUrl": "https://login.windows.net/common/oauth2/authorize",
106      "scopes": []
107    }
108  },
109	```
110
1112. 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.
112
1133. Once you have uploaded your Swagger, the wizard auto-detects that you are using AAD authentication for your webAPI.
114
1154. Configure the AAD authentication for your custom API:  
116
117  1. Client ID: ***Client ID of webAPI-CustomAPI*** from 4.5 in **Step 2** (in this topic)
118  2. Secret: ***Key from webPI-CustomAPI*** from 4.6 in **Step 2** (in this topic)
119  3. Login url: ***https://login.windows.net***
120  4. ResourceUri: ***Client ID of webAPI*** from 3.4 in **Step 2** (in this topic)
121
1225. Select **Create**, and try creating a connection on the Custom API. If everything is setup correctly, you should be able to sign-in successfully. 
123
124For a more detailed experience on creating PowerApps and Logic Flows, see the following: 
125
126- [Connect to Office 365, Twitter, and Microsoft Translator][5]
127- [Show data from Office 365][4]
128- [Create an app from data][3]
129- [Get started with logic flows][2]
130
131For questions or comments, email [customapishelp@microsoft.com](mailto:customapishelp@microsoft.com).
132
133<!--Reference links in article-->
134[1]: https://web.powerapps.com
135[2]: https://powerapps.microsoft.com/tutorials/get-started-logic-flow/
136[3]: https://powerapps.microsoft.com/tutorials/get-started-create-from-data/
137[4]: https://powerapps.microsoft.com/tutorials/show-office-data/
138[5]: https://powerapps.microsoft.com/tutorials/powerapps-api-functions/
139[6]: http://pwrappssamples.blob.core.windows.net/samples/webAPI.json