Compartir a través de

Configuración de un proxy inverso para una aplicación de página única que llama a la API de autenticación nativa mediante Azure Function App (versión preliminar)

Se aplica a: Círculo blanco con un símbolo X gris. Inquilinos del personal Círculo verde con un símbolo de marca de verificación blanca. Inquilinos externos (más información)

En este artículo, aprenderá a configurar un proxy inverso mediante la aplicación de Azure Functions para administrar encabezados CORS en un entorno de prueba para una aplicación de página única (SPA) que usa API de autenticación nativa.

La API de autenticación nativa no admite el uso compartido de recursos entre orígenes (CORS). Por lo tanto, una aplicación de página única (SPA) que usa esta API para la autenticación de usuarios no puede realizar solicitudes correctas desde código JavaScript de front-end. Para resolver este problema, debe agregar un servidor proxy entre la SPA y la API de autenticación nativa. Este servidor proxy inserta los encabezados CORS adecuados en la respuesta.

Esta solución tiene fines de prueba y no se debe usar en un entorno de producción. Si busca una solución para usarla en un entorno de producción, se recomienda usar una solución de Azure Front Door, consulte las instrucciones de Uso de Azure Front Door como proxy inverso para administrar encabezados CORS para SPA en producción.

Prerrequisitos

Creación de un proxy inverso en una aplicación de funciones de Azure mediante la plantilla de la CLI para desarrolladores de Azure (azd)

  1. Para inicializar la plantilla azd, ejecute el siguiente comando:

    azd init --template https://github.com/azure-samples/ms-identity-extid-cors-proxy-function

    Cuando se le solicite, escriba un nombre para el entorno azd. Este nombre se usa como prefijo para el grupo de recursos, por lo que debe ser único dentro de la suscripción de Azure.

  2. Para iniciar sesión en Azure, ejecute el siguiente comando:

    azd auth login

  3. Para compilar, aprovisionar e implementar los recursos de la aplicación, ejecute el siguiente comando:

    azd up

    Cuando se le solicite, escriba la siguiente información para completar la creación de recursos:

    • Azure Location: la ubicación de Azure donde se implementan los recursos.
    • Azure Subscription: la suscripción de Azure donde se implementan tus recursos.
    • corsAllowedOrigin: dominio de origen desde el que se permiten solicitudes CORS en el formato SCHEME://DOMAIN:PORT, por ejemplo, http://localhost:3000.
    • tenantSubdomain: el subdominio del inquilino externo que estamos usando como proxy. Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene su subdominio de inquilino, obtenga información sobre cómo leer los datos de su inquilino.

Prueba tu SPA de ejemplo con el proxy inverso

  1. En la SPA de ejemplo, abra el archivo API\React\ReactAuthSimple\src\config.ts y, a continuación, reemplace:

    • el valor de BASE_API_URL, http://localhost:3001/api y https://Enter_App_Function_Name_Here.azurewebsites.net.
    • el marcador de posición Enter_App_Function_Name_Here que lleva el nombre de tu aplicación de funciones. Si es necesario, vuelva a ejecutar el SPA de ejemplo.

  2. Vaya a la dirección URL de SPA de ejemplo y pruebe los flujos de registro, inicio de sesión y restablecimiento de contraseña. La aplicación SPA debe funcionar correctamente, ya que el proxy inverso administra correctamente los encabezados CORS.

Contenido relacionado