Creación de un conector personalizado para una API web en PowerAppsBuild a custom connector for a Web API in PowerApps

En este tutorial se muestra cómo crear una instancia de ASP.NET Web API, hospedarla en Azure Web Apps, habilitar la autenticación de Azure Active Directory y registrar la instancia de ASP.NET Web API en PowerApps.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. Después de registrar la API, puede conectarse a ella y llamarla desde la aplicación.After the API is registered, you can connect to it and call it from your app.

Requisitos previosPrerequisites

Crear una instancia de ASP.NET Web API e implementarla en AzureCreate an ASP.NET Web API and deploy it to Azure

  1. En Visual Studio, haga clic en Archivo > Nuevo proyecto para crear una aplicación web ASP.NET de C#.In Visual Studio, click File > New Project to create a new C# ASP.NET web application.

    Nueva aplicación web

  2. Seleccione la plantilla API web.Select the Web API template. Deje Host en la nube activada.Leave Host in the cloud checked. Haga clic en Cambiar autenticación.Click Change Authentication.

    Plantilla de nuevo proyecto web

  3. Seleccione Sin autenticación y haga clic en Aceptar.Select No Authentication, and then click OK.

    Sin autenticación

  4. Haga clic en Aceptar en el cuadro de diálogo Nuevo proyecto ASP.NET.Click OK on the New ASP.NET Project dialog. Aparece el cuadro de diálogo Configurar aplicación web de Microsoft Azure.The Configure Microsoft Azure Web App dialog appears.

    Configurar aplicación web de Microsoft Azure]]

    Seleccione su cuenta de Azure, escriba un valor en Nombre de la aplicación web (o deje el predeterminado) y seleccione su suscripción de Azure.Select your Azure account, type a Web App name (or leave the default), and select your Azure Subscription. Seleccione o cree un plan de App Service (una colección de Web Apps dentro de su suscripción).Select or create an App Service plan (a collection of Web Apps within your subscription). Seleccione o cree un grupo de recursos (una agrupación de recursos de Azure dentro de su suscripción).Select or create a Resource group (a grouping of Azure resources within your subscription). Seleccione la región donde se debe implementar la aplicación web.Select the region where the Web App should be deployed. Si es necesario para la API web, seleccione o cree un servidor de bases de datos de Azure.If required for your Web API, select or create an Azure Database server. Por último, haga clic en Aceptar.Finally, click OK.

  5. Cree la API web.Build out your Web API.

    Nota: Si aún no tiene código preparado para una API web, consulte el tutorial Introducción a 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. Para conectar la API web con PowerApps, será necesario un archivo de OpenAPI que describa sus operaciones.To connect our Web API to PowerApps, we'll need an OpenAPI file that describes its operations. Podría escribir un archivo de OpenAPI propio con el editor en línea pero, en este tutorial, usará una herramienta de código abierto denominada 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. Instale el paquete NuGet de Swashbuckle en el proyecto de Visual Studio; para ello, haga clic en Herramientas > Administrador de paquetes NuGet > Consola del Administrador de paquetes y, en la consola del Administrador de paquetes, escriba el comando 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

    Sugerencia: Al ejecutar la aplicación de API web después de instalar Swashbuckle, se generará un archivo de OpenAPI en la dirección 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. También hay disponible una interfaz de usuario generada en http://<your root URL>/swagger.A generated user interface is also available at http://<your root URL>/swagger.

  7. Cuando la API web esté lista, publíquela en Azure.When your Web API is ready, publish it to Azure. Para publicarla desde Visual Studio, haga clic con el botón derecho en el proyecto web en el Explorador de soluciones, haga clic en Publicar y siga las indicaciones en el cuadro de diálogo Publicar.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. Recupere el código JSON de OpenAPI en https://<azure-webapp-url>/swagger/docs/v1.Retrieve the OpenAPI JSON by navigating to https://<azure-webapp-url>/swagger/docs/v1. Guarde el contenido como archivo JSON.Save the content as a JSON file. Según el explorador, es posible que tenga que copiar y pegar el texto en un archivo de texto vacío.Depending on your browser, you may need to copy and paste the text into an empty text file.

    Importante: Un documento de OpenAPI con identificadores de operación duplicados no es válido.Important: An OpenAPI document with duplicate operation IDs is invalid. Si usa la plantilla C# de ejemplo, el identificador de operación Values_Get se repite dos veces.If you are using the sample C# template, the operation ID Values_Get is repeated twice. Para corregirlo, cambie una instancia a Value_Get y vuelva a publicar.You can correct this by changing one instance to Value_Get and re-publishing. También puede descargar un archivo de OpenAPI de ejemplo desde este tutorial.You can also download a sample OpenAPI file from this tutorial. Asegúrese de quitar los comentarios (a partir de //) antes de usarlo.Be sure to remove the comments (starting with //) before using it.

Configurar la autenticación de Azure Active DirectorySet up Azure Active Directory authentication

Ahora creará dos aplicaciones de Azure Active Directory (AAD) en Azure.You will now create two Azure Active Directory (AAD) applications in Azure. Para ver un ejemplo de cómo hacerlo, consulte el tutorial de Azure Resource Manager.For an example of how to do this, see the Azure Resource Manager tutorial.

Importante Ambas aplicaciones deben estar en el mismo directorio.Important Both apps must be in the same directory.

Primera aplicación de AAD: protección de la API webFirst AAD application: Securing the Web API

La primera aplicación de AAD se usa para proteger la API web.The first AAD application is used to secure the Web API. Asígnele el nombre webAPI.Name it webAPI. Siga los pasos del tutorial vinculados anteriores (solo la sección titulada "Habilitar la autenticación en Azure Active Directory") con los siguientes valores:Follow the above linked tutorial steps (just the section titled "Enable authentication in Azure Active Directory") with the following values:

  • Dirección URL de inicio de sesión: https://login.windows.netSign-on URL: https://login.windows.net
  • URL de respuesta: https://<your-root-url>/.auth/login/aad/callbackReply URL: https://<your-root-url>/.auth/login/aad/callback
  • No se necesita una clave de cliente.There is no need for a client key.
  • No es necesario delegar los permisos.There is no need to delegate any permissions.
  • Importante: Tome nota del identificador de aplicación.Important: Note the application ID. Lo necesitará más adelante.You will need it later.

Segunda aplicación de AAD: protección del conector personalizado y acceso delegadoSecond AAD application: Securing the custom connector and delegated access

La segunda aplicación de AAD se usa para proteger el registro del conector personalizado y para obtener acceso delegado a la API web protegida por la primera aplicación.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. Asigne a esta el nombre webAPI-customAPI.Name this one webAPI-customAPI .

  • Dirección URL de inicio de sesión: https://login.windows.netSign-on URL: https://login.windows.net
  • URL de respuesta: https://msmanaged-na.consent.azure-apim.net/redirectReply URL: https://msmanaged-na.consent.azure-apim.net/redirect
  • Agregue permisos para obtener acceso delegado a la API web.Add permissions to have delegated access to Web API.
  • También necesitará el identificador de esta aplicación más adelante, así que anótelo.You need the application ID of this application later as well, so note it.
  • Genere una clave de cliente y almacénela en un lugar seguro.Generate a client key and store is somewhere safe. La necesitará más adelante.We need this key later.

Agregar autenticación a la aplicación web de AzureAdd authentication to your Azure Web App

  1. Inicie sesión en Azure Portal y busque la aplicación web que ha implementado en la primera sección.Sign in to the Azure portal and then find your Web App that you deployed in the first section.
  2. Haga clic en Configuración y seleccione Autenticación/autorización.Click Settings, and then select Authentication / Authorization.
  3. Active Autenticación de App Service y seleccione Azure Active Directory.Turn on App Service Authentication and then select Azure Active Directory. En la siguiente hoja, seleccione Rápido.On the next blade, select Express.
  4. Haga clic en Seleccionar aplicación de AD existente y seleccione la aplicación de AAD webAPI que creó antes.Click Select Existing AD App, and select the webAPI AAD application you created earlier.

Ahora debería poder usar AAD para autenticar la aplicación web.You should now be able to use AAD to authenticate your web application.

Agregar el conector personalizado a PowerAppsAdd the custom connector to PowerApps

  1. Modifique el archivo de OpenAPI para agregar el objeto securityDefintions y la autenticación de AAD usada para la aplicación web.Modify your OpenAPI file to add the securityDefintions object and AAD authentication used for the Web App. La sección de su archivo de OpenAPI con la propiedad host debería tener el siguiente aspecto: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. Vaya a PowerApps y agregue un conector personalizado como se describe en Registrar y usar conectores personalizados en PowerApps.Browse to PowerApps, and add a custom connector as described in Register and use custom connectors in PowerApps.
  2. Una vez que cargado el archivo de OpenAPI, el asistente detecta automáticamente que está usando la autenticación de AAD para la API web.Once you have uploaded your OpenAPI file, the wizard auto-detects that you are using AAD authentication for your Web API.
  3. Configure la autenticación de AAD para el conector personalizado.Configure the AAD authentication for the custom connector.

    • Client ID (Id. de cliente): identificador de cliente de webAPI-CustomAPIClient ID: Client ID of webAPI-CustomAPI
    • Secret (Secreto): clave de cliente de webAPI-CustomAPISecret: Client key of webAPI-CustomAPI
    • Login URL (Dirección URL de inicio de sesión): https://login.windows.netLogin URL: https://login.windows.net
    • Resource URL (URL de recursos): identificador de cliente de webAPIResourceUri: Client ID of webAPI
  4. Haga clic en Crear para crear una conexión al conector personalizado.Click Create and creating a connection to the custom connector.

Pasos siguientesNext Steps

Realice el tutorial de conectores personalizados en Azure Resource Manager.Walk through the Azure Resource Manager custom connector tutorial.