Egyéni összekötő létrehozása webes API-hoz a PowerAppsbenBuild a custom connector for a Web API in PowerApps

Ez az oktatóanyag azt mutatja be, hogyan fejleszthet ASP.NET-alapú webes API-t, üzemeltetheti azt az Azure Web Apps szolgáltatásban, engedélyezheti az Azure Active Directory-hitelesítést, és regisztrálhatja az ASP.NET-alapú webes API-t a PowerAppsben.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. Az API regisztrálása után csatlakozhat ahhoz, és meghívhatja az alkalmazásból.After the API is registered, you can connect to it and call it from your app.

ElőfeltételekPrerequisites

ASP.NET-alapú webes API létrehozása és üzembe helyezése az Azure-onCreate an ASP.NET Web API and deploy it to Azure

  1. Új C# ASP.NET-alapú webalkalmazás a Visual Studióban való létrehozásához kattintson a Fájl > Új projekt lehetőségre.In Visual Studio, click File > New Project to create a new C# ASP.NET web application.

    Új webalkalmazás

  2. Válassza ki a webes API sablont.Select the Web API template. Hagyja bejelölve a Host in the cloud (Üzemeltetés a felhőben) jelölőnégyzetet.Leave Host in the cloud checked. Kattintson a Change authentication (Hitelesítés módosítása) lehetőségre.Click Change Authentication.

    Új webesprojekt-sablon

  3. Válassza a Nincs hitelesítés lehetőséget, majd kattintson az OK gombra.Select No Authentication, and then click OK.

    Nincs hitelesítés

  4. Kattintson az OK gombra a New ASP.NET Project (Új ASP.NET-alapú projekt) párbeszédpanelen.Click OK on the New ASP.NET Project dialog. Ekkor megjelenik a Configure Microsoft Azure Web App (A Microsoft Azure webes alkalmazás konfigurálása) párbeszédpanel.The Configure Microsoft Azure Web App dialog appears.

    A Microsoft Azure-webalkalmazás konfigurálása]]

    Válassza ki az Azure-fiókját, adja meg a webalkalmazás nevét (vagy hagyja meg az alapértelmezettet), majd válassza ki az Azure-előfizetését.Select your Azure account, type a Web App name (or leave the default), and select your Azure Subscription. Válasszon vagy hozzon létre egy App Service-csomagot (webalkalmazások egy gyűjteményét az előfizetésben).Select or create an App Service plan (a collection of Web Apps within your subscription). Válasszon vagy hozzon létre egy erőforráscsoportot (Azure-erőforrások egy csoportját az előfizetésben).Select or create a Resource group (a grouping of Azure resources within your subscription). Válassza ki a régiót, ahol üzembe szeretné helyezni a webalkalmazást.Select the region where the Web App should be deployed. Válasszon vagy hozzon létre egy Azure-adatbáziskiszolgálót, amennyiben ez szükséges a webes API-hoz.If required for your Web API, select or create an Azure Database server. Végül kattintson az OK gombra.Finally, click OK.

  5. Építse ki a webes API-t.Build out your Web API.

    Megjegyzés:: Ha még nem készített kódot a webes API-hoz, kipróbálhatja a Getting Started with ASP.NET Web API 2 (C#) (Ismerkedés az ASP.NET Web API 2-vel (C#)) című oktatóanyagot.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. A webes API a PowerAppshez való csatlakoztatásához szüksége lesz egy OpenAPI-fájlra, amely leírja a műveleteit.To connect our Web API to PowerApps, we'll need an OpenAPI file that describes its operations. Az online szerkesztővel saját OpenAPI-t is írhat, de ebben az oktatóanyagban egy Swashbuckle nevű nyílt forráskódú eszközt fogunk használni.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. Telepítse a Swashbuckle Nuget-csomagját a Visual Studio-projektjében. Ehhez kattintson az Eszközök > NuGet Package Manager (NuGet-csomagkezelő) > Package Manager Console (Csomagkezelői konzol) lehetőségre, majd a Csomagkezelői konzolba írja be az alábbi parancsot: 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

    Tipp: Amikor a Swashbuckle telepítése után futtatja a webes API-t használó alkalmazást, az OpenAPI-fájl a http://<your root URL>/swagger/docs/v1 URL-címen fog létrejönni.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. A létrehozott felhasználói felület a http://<your root URL>/swagger címen is elérhető.A generated user interface is also available at http://<your root URL>/swagger.

  7. Amikor elkészült a webes API, tegye közzé az Azure-on.When your Web API is ready, publish it to Azure. Ha a Visual Studióban szeretné közzétenni, kattintson a jobb gombbal a webes projektre a Megoldáskezelőben, kattintson a Közzététel... lehetőségre, majd kövesse a Közzététel párbeszédpanelen megjelenő utasításokat.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. Kérje le az OpenAPI JSON-t a https://<azure-webapp-url>/swagger/docs/v1 cím megnyitásával.Retrieve the OpenAPI JSON by navigating to https://<azure-webapp-url>/swagger/docs/v1. Mentse a tartalmat JSON-fájlként.Save the content as a JSON file. A böngésző típusától függően előfordulhat, hogy be kell illesztenie a szöveget egy üres szövegfájlba.Depending on your browser, you may need to copy and paste the text into an empty text file.

    Fontos: Az ismétlődő műveletazonosítókkal rendelkező OpenAPI-dokumentumok érvénytelenek.Important: An OpenAPI document with duplicate operation IDs is invalid. Ha ugyanazt a C#-sablont használja, a(z) Values_Get műveletazonosító kétszer ismétlődik.If you are using the sample C# template, the operation ID Values_Get is repeated twice. Ezt kijavíthatja, ha az egyik példányt a(z) Value_Get értékre módosítja, majd újból közzéteszi.You can correct this by changing one instance to Value_Get and re-publishing. Egy OpenAPI-mintafájlt is letölthet ebből az oktatóanyagból.You can also download a sample OpenAPI file from this tutorial. A fájl használata előtt mindenképpen távolítsa el a (// kezdetű) megjegyzéseket.Be sure to remove the comments (starting with //) before using it.

Az Azure Active Directory-hitelesítés beállításaSet up Azure Active Directory authentication

Most létrehozunk két Azure Active Directory- (AAD-) alkalmazást az Azure-ban.You will now create two Azure Active Directory (AAD) applications in Azure. Ehhez a folyamathoz megtekinthet egy példát az Azure Resource Manager oktatóanyagában.For an example of how to do this, see the Azure Resource Manager tutorial.

Fontos Mindkét alkalmazásnak ugyanabban a címtárban kell lennie.Important Both apps must be in the same directory.

Első AAD-alkalmazás: a webes API biztonságossá tételeFirst AAD application: Securing the Web API

Az első AAD-alkalmazás szerepe a webes API biztonságossá tétele.The first AAD application is used to secure the Web API. Adja neki a webAPI nevet.Name it webAPI. Kövesse a fentebb hivatkozott oktatóanyag lépéseit (csak az „Enable authentication in Azure Active Directory” („Azure Active Directory-hitelesítés engedélyezése”) című szakaszt) a következő értékek használatával:Follow the above linked tutorial steps (just the section titled "Enable authentication in Azure Active Directory") with the following values:

  • Bejelentkezési URL-cím: https://login.windows.netSign-on URL: https://login.windows.net
  • Válasz-URL: https://<your-root-url>/.auth/login/aad/callbackReply URL: https://<your-root-url>/.auth/login/aad/callback
  • Nincs szükség ügyfélkulcsra.There is no need for a client key.
  • Nincs szükség engedélyek delegálására.There is no need to delegate any permissions.
  • Fontos: Jegyezze fel az alkalmazásazonosítót.Important: Note the application ID. Később szüksége lesz rá.You will need it later.

Második AAD-alkalmazás: az egyéni összekötő és a delegált hozzáférés biztonságossá tételeSecond AAD application: Securing the custom connector and delegated access

A második AAD-alkalmazás szerepe az egyéni összekötő biztonságossá tétele és az első alkalmazás által védett webes API-hoz való delegált hozzáférés biztosítása.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. Az alkalmazásnak adja a webAPI-customAPI nevet.Name this one webAPI-customAPI .

  • Bejelentkezési URL-cím: https://login.windows.netSign-on URL: https://login.windows.net
  • Válasz-URL: https://msmanaged-na.consent.azure-apim.net/redirectReply URL: https://msmanaged-na.consent.azure-apim.net/redirect
  • Adja meg a webes API-hoz való delegált hozzáféréshez szükséges engedélyeket.Add permissions to have delegated access to Web API.
  • Ezen alkalmazás alkalmazásazonosítójára is szüksége lesz később, szóval jegyezze fel.You need the application ID of this application later as well, so note it.
  • Hozzon létre egy ügyfélkulcsot, és tárolja biztonságos helyen.Generate a client key and store is somewhere safe. Később szüksége lesz rá.We need this key later.

Hitelesítés hozzáadása az Azure-webalkalmazáshozAdd authentication to your Azure Web App

  1. Jelentkezzen be a Azure Portalon, majd keresse meg az első szakaszban üzembe helyezett webes alkalmazást.Sign in to the Azure portal and then find your Web App that you deployed in the first section.
  2. Kattintson a Beállítások lehetőségre, majd válassza a Hitelesítés/engedélyezés lehetőséget.Click Settings, and then select Authentication / Authorization.
  3. Kapcsolja be az App Service-hitelesítést, majd válassza az Azure Active Directory lehetőséget.Turn on App Service Authentication and then select Azure Active Directory. A következő panelen válassza az Expressz lehetőséget.On the next blade, select Express.
  4. Kattintson a Meglévő AD-alkalmazás kiválasztása lehetőségre, és válassza ki a korábban létrehozott webAPI AAD-alkalmazást.Click Select Existing AD App, and select the webAPI AAD application you created earlier.

Most már hitelesítheti a webes alkalmazást az AAD-vel.You should now be able to use AAD to authenticate your web application.

Az egyéni összekötő hozzáadása a PowerAppshezAdd the custom connector to PowerApps

  1. Módosítsa az OpenAPI-fájlt a(z) securityDefintions objektum és a webalkalmazáshoz használt AAD-hitelesítés hozzáadásához.Modify your OpenAPI file to add the securityDefintions object and AAD authentication used for the Web App. Az OpenAPI-fájl host tulajdonságának a következőképpen kell kinéznie: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. Keresse meg a PowerAppst, és adjon hozzá egy egyéni összekötőt a Register and use custom connectors in PowerApps (Egyéni összekötők regisztrálása és használata a PowerApps szolgáltatásban) című témakörben leírtak szerint.Browse to PowerApps, and add a custom connector as described in Register and use custom connectors in PowerApps.
  2. Az OpenAPI-fájl feltöltése után a varázsló automatikusan észleli, hogy AAD-hitelesítést használ a webes API-hoz.Once you have uploaded your OpenAPI file, the wizard auto-detects that you are using AAD authentication for your Web API.
  3. Konfigurálja az egyéni összekötő AAD-hitelesítését.Configure the AAD authentication for the custom connector.

    • Ügyfélazonosító: A webAPI-CustomAPI ügyfélazonosítójaClient ID: Client ID of webAPI-CustomAPI
    • Titkos kulcs: A webAPI-CustomAPI ügyfélkulcsaSecret: Client key of webAPI-CustomAPI
    • Bejelentkezési URL-cím: https://login.windows.netLogin URL: https://login.windows.net
    • Erőforrás-URI: A webAPI ügyfélazonosítójaResourceUri: Client ID of webAPI
  4. Az egyéni összekötővel való kapcsolat létrehozásához kattintson a Létrehozás lehetőségre.Click Create and creating a connection to the custom connector.

További lépésekNext Steps

Haladjon végig az Azure Resource Manager egyéni összekötőkre vonatkozó oktatóanyagán.Walk through the Azure Resource Manager custom connector tutorial.