在 PowerApps 中為 Web API 建置自訂連接器Build a custom connector for a Web API in PowerApps

本教學課程說明如何開始建置 ASP.NET Web API、將它裝載於 Azure Web Apps、啟用 Azure Active Directory 驗證,然後在 PowerApps 中註冊 ASP.NET Web API。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. 註冊 API 之後,您可以與它連線,然後從您的應用程式呼叫它。After the API is registered, you can connect to it and call it from your app.

必要條件Prerequisites

建立 ASP.NET Web API 並將它部署至 AzureCreate an ASP.NET Web API and deploy it to Azure

  1. 在 Visual Studio 中,按一下 [檔案] > [新增專案] 以建立新的 C# ASP.NET Web 應用程式。In Visual Studio, click File > New Project to create a new C# ASP.NET web application.

    新的 Web 應用程式

  2. 選取 Web API 範本。Select the Web API template. 保持 [雲端中的主機] 勾選。Leave Host in the cloud checked. 按一下 [變更驗證]。Click Change Authentication.

    新的 Web 專案範本

  3. 選取 [不需要驗證],然後按一下 [確定]。Select No Authentication, and then click OK.

    不需要驗證

  4. 按一下 [新增 ASP.NET 專案] 對話方塊上的 [確定]。Click OK on the New ASP.NET Project dialog. [設定 Microsoft Azure Web 應用程式] 對話方塊隨即顯示。The Configure Microsoft Azure Web App dialog appears.

    設定 Microsoft Azure Web 應用程式]]

    選取您的 Azure 帳戶,輸入 Web 應用程式名稱 (或保留預設值),然後選取您的 Azure 訂用帳戶Select your Azure account, type a Web App name (or leave the default), and select your Azure Subscription. 選取或建立 App Service 方案 (訂用帳戶的 Web 應用程式集合)。Select or create an App Service plan (a collection of Web Apps within your subscription). 選取或建立資源群組 (訂用帳戶的 Azure 資源群組)。Select or create a Resource group (a grouping of Azure resources within your subscription). 選取應該部署 Web 應用程式所在的區域。Select the region where the Web App should be deployed. 如果您的 Web API 有需要,選取或建立 Azure 資料庫伺服器If required for your Web API, select or create an Azure Database server. 最後,按一下 [確定]。Finally, click OK.

  5. 建置 Web API。Build out your Web API.

    注意︰如果您還沒有準備好 Web API 的程式碼,請嘗試開始使用 ASP.NET Web API 2 (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. 若要將 Web API 連線至 PowerApps,則需要可描述其作業的 OpenAPI 檔案。To connect our Web API to PowerApps, we'll need an OpenAPI file that describes its operations. 您可以使用線上編輯器撰寫自己的 OpenAPI,但是在本教學課程中,您將使用名為 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. 在您的 Visual Studio 專案中安裝 Swashbuckle Nuget 套件,方法是按一下 [工具] > [NuGet 套件管理員] > [套件管理員主控台],然後在 [套件管理員主控台] 中輸入命令 Install-Package SwashbuckleInstall 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.

    安裝套件 Swashbuckle

    秘訣:當您在安裝 Swashbuckle 之後執行 Web API 應用程式時,OpenAPI 檔案現在會在 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. 產生的使用者介面也可以在 http://<your root URL>/swagger 使用。A generated user interface is also available at http://<your root URL>/swagger.

  7. 當您的 Web API 準備就緒時,請將它發佈到 Azure。When your Web API is ready, publish it to Azure. 若要從 Visual Studio 發佈,以滑鼠右鍵按一下 [方案總管] 中的 Web 專案,按一下 [發佈...],然後依照 [發佈] 對話方塊中的提示進行。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. 藉由瀏覽至 https://<azure-webapp-url>/swagger/docs/v1 來擷取 OpenAPI JSON。Retrieve the OpenAPI JSON by navigating to https://<azure-webapp-url>/swagger/docs/v1. 將內容儲存為 JSON 檔案。Save the content as a JSON file. 根據您的瀏覽器而定,您可能需要複製文字並將其貼到空白文字檔。Depending on your browser, you may need to copy and paste the text into an empty text file.

    重要:具有重複作業識別碼的 OpenAPI 文件無效。Important: An OpenAPI document with duplicate operation IDs is invalid. 如果您使用範例 C# 範本,作業識別碼 Values_Get 會重複兩次。If you are using the sample C# template, the operation ID Values_Get is repeated twice. 您可以藉由將某個執行個體變更為 Value_Get 然後重新發佈,來修正這個問題。You can correct this by changing one instance to Value_Get and re-publishing. 您也可以從本教學課程下載範例 OpenAPI 檔案You can also download a sample OpenAPI file from this tutorial. 在使用它之前請務必移除註解 (開頭為 //)。Be sure to remove the comments (starting with //) before using it.

設定 Azure Active Directory 驗證Set up Azure Active Directory authentication

您現在會在 Azure 中建立兩個 Azure Active Directory (AAD) 應用程式。You will now create two Azure Active Directory (AAD) applications in Azure. 如需如何執行這項作業的範例,請參閱 Azure Resource Manager 教學課程For an example of how to do this, see the Azure Resource Manager tutorial.

重要:這兩個應用程式必須在相同的目錄中。Important Both apps must be in the same directory.

第一個 AAD 應用程式︰保護 Web APIFirst AAD application: Securing the Web API

第一個 AAD 應用程式是用來保護 Web API。The first AAD application is used to secure the Web API. 將其命名為 webAPIName it webAPI. 遵循上方連結的教學課程步驟 (只有標題為<在 Azure Active Directory 中啟用驗證>的章節),具有下列值︰Follow the above linked tutorial steps (just the section titled "Enable authentication in Azure Active Directory") with the following values:

  • 登入 URL:https://login.windows.netSign-on URL: https://login.windows.net
  • 回覆 URL:https://<your-root-url>/.auth/login/aad/callbackReply URL: https://<your-root-url>/.auth/login/aad/callback
  • 不需要用戶端金鑰。There is no need for a client key.
  • 不需要委派任何權限。There is no need to delegate any permissions.
  • 重要:請記下應用程式識別碼。Important: Note the application ID. 您稍後需要它。You will need it later.

第二個 AAD 應用程式︰保護自訂連接器和委派的存取權Second AAD application: Securing the custom connector and delegated access

第二個 AAD 應用程式是用來保護自訂連接器註冊,並取得第一個應用程式保護的 Web API 之委派的存取權。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. 將它命名為 webAPI-customAPIName this one webAPI-customAPI .

  • 登入 URL:https://login.windows.netSign-on URL: https://login.windows.net
  • 回覆 URL:https://msmanaged-na.consent.azure-apim.net/redirectReply URL: https://msmanaged-na.consent.azure-apim.net/redirect
  • 新增權限以擁有 Web API 之委派的存取權。Add permissions to have delegated access to Web API.
  • 您稍後也需要此應用程式的應用程式識別碼,所以請記下它。You need the application ID of this application later as well, so note it.
  • 產生用戶端金鑰且存放區是安全的位置。Generate a client key and store is somewhere safe. 我們稍後需要此金鑰。We need this key later.

將驗證新增至您的 Azure Web 應用程式Add authentication to your Azure Web App

  1. 登入 Azure 入口網站,然後尋找您在第一個區段中部署的 Web 應用程式。Sign in to the Azure portal and then find your Web App that you deployed in the first section.
  2. 按一下 [設定],然後選取 [驗證/授權]。Click Settings, and then select Authentication / Authorization.
  3. 開啟 [App Service 驗證],然後選取 [Azure Active Directory]。Turn on App Service Authentication and then select Azure Active Directory. 在下一個刀鋒視窗中,選取 [快速]。On the next blade, select Express.
  4. 按一下 [選取現有的 AD 應用程式],然後選取您稍早建立的 webAPI AAD 應用程式。Click Select Existing AD App, and select the webAPI AAD application you created earlier.

您現在應該能夠使用 AAD 驗證 Web 應用程式。You should now be able to use AAD to authenticate your web application.

將自訂連接器新增至 PowerAppsAdd the custom connector to PowerApps

  1. 修改您的 OpenAPI 檔案以新增用於 Web 應用程式的 securityDefintions 物件和 AAD 驗證。Modify your OpenAPI file to add the securityDefintions object and AAD authentication used for the Web App. 您的 OpenAPI 檔案區段 (具有 host 屬性) 應該會如下所示: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. 瀏覽至 PowerApps,並如在 PowerApps 中註冊及使用自訂連接器中所述來新增自訂連接器。Browse to PowerApps, and add a custom connector as described in Register and use custom connectors in PowerApps.
  2. 上傳 OpenAPI 檔案之後,精靈會自動偵測您是針對 Web API 使用 AAD 驗證。Once you have uploaded your OpenAPI file, the wizard auto-detects that you are using AAD authentication for your Web API.
  3. 針對自訂連接器設定 AAD 驗證。Configure the AAD authentication for the custom connector.

    • 用戶端識別碼:webAPI-CustomAPI 的用戶端識別碼Client ID: Client ID of webAPI-CustomAPI
    • 密碼:webAPI-CustomAPI 的用戶端金鑰Secret: Client key of webAPI-CustomAPI
    • 登入 URLhttps://login.windows.netLogin URL: https://login.windows.net
    • ResourceUri:webAPI 的用戶端識別碼ResourceUri: Client ID of webAPI
  4. 按一下 [建立],然後建立自訂連接器的連線。Click Create and creating a connection to the custom connector.

後續步驟Next Steps

逐步解說 Azure Resource Manager 自訂連接器教學課程Walk through the Azure Resource Manager custom connector tutorial.