Tutorial: Autenticación y autorización de usuarios de extremo a extremo en Azure App Service

  • Artículo

Azure App Service proporciona un servicio de hospedaje web muy escalable y con aplicación de revisiones de un modo automático. Además, App Service incluye compatibilidad integrada con la autenticación y autorización de usuarios. En este tutorial se muestra cómo proteger las aplicaciones con la autenticación y autorización de App Service. Usa Express.js con vistas de front-end como ejemplo. La autenticación y autorización de App Service admiten entornos de ejecución de todos los lenguajes; en este tutorial, aprenderá a aplicarlas a su lenguaje preferido.

Azure App Service proporciona un servicio de hospedaje web muy escalable y con aplicación automática de revisiones con el sistema operativo Linux. Además, App Service incluye compatibilidad integrada con la autenticación y autorización de usuarios. En este tutorial se muestra cómo proteger las aplicaciones con la autenticación y autorización de App Service. Usa Express.js con vistas. La autenticación y autorización de App Service admiten entornos de ejecución de todos los lenguajes; en este tutorial, aprenderá a aplicarlas a su lenguaje preferido.

En el tutorial, aprenderá lo siguiente:

  • Habilitación de la autenticación y autorización integradas
  • Protección de las aplicaciones frente a las solicitudes no autenticadas
  • Uso de Microsoft Entra ID como proveedor de identidades
  • Acceso a una aplicación remota en nombre del usuario que inició sesión
  • Protección de llamadas de servicio a servicio con autenticación de tokens
  • Uso de tokens de acceso desde el código de servidor
  • Uso de tokens de acceso desde el código de cliente (explorador)

Sugerencia

Después de completar este escenario, continúe con el procedimiento siguiente para aprender a conectarse a los servicios de Azure como un usuario autenticado. Entre los escenarios comunes se incluyen el acceso a Azure Storage o una base de datos como usuario que tiene capacidades específicas o acceso a tablas o archivos específicos.

La autenticación de este procedimiento se proporciona en la capa de plataforma de hospedaje mediante Azure App Service. Debe implementar la aplicación de front-end y back-end y configurar la autenticación para que esta aplicación web se utilice correctamente.

En el diagrama conceptual se muestra el flujo de autenticación del usuario web a la aplicación de front-end y a la aplicación de back-end.

Obtener perfil de usuario

La aplicación de front-end está configurada para usar de forma segura la API de back-end. La aplicación de front-end proporciona un inicio de sesión de Microsoft para el usuario y, después, le permite obtener su perfil falso del back-end. En este tutorial se usa un perfil falso a fin de simplificar los pasos para completar el escenario.

Antes de ejecutar el código fuente en el front-end, App Service inserta el accessToken autenticado desde el encabezado x-ms-token-aad-access-token de App Service. A continuación, el código fuente de front-end accede y envía accessToken al servidor back-end como bearerToken para acceder de forma segura a la API de back-end. El servidor back-end valida bearerToken antes de pasarlo al código fuente de back-end. Una vez que el código fuente de back-end reciba bearerToken, es posible utilizarlo.

En el siguiente artículo de esta serie, bearerToken se intercambia por un token con un ámbito para acceder a Microsoft Graph API. Microsoft Graph API devuelve la información del perfil del usuario.

Requisitos previos

Si no tiene una suscripción a Azure, cree una cuenta gratuita de Azure antes de empezar.

1. Clonación de la aplicación de ejemplo

  1. En Azure Cloud Shell, ejecute el comando siguiente para clonar el repositorio de ejemplo.

    git clone https://github.com/Azure-Samples/js-e2e-web-app-easy-auth-app-to-app

2. Creación e implementación de aplicaciones

Cree el grupo de recursos, el plan de aplicación web, la aplicación web e impleméntelos en un solo paso.

  1. Cambie al directorio de la aplicación web de front-end.

    cd js-e2e-web-app-easy-auth-app-to-app/frontend

  2. Cree e implemente la aplicación web de front-end con az webapp up. Dado que el nombre de la aplicación web debe ser único de forma global, reemplace <front-end-app-name> por un nombre único.

    az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --os-type Windows --location "West Europe" --runtime "NODE:16LTS"

  3. Cambie al directorio de la aplicación web de back-end.

    cd ../backend

  4. Implemente la aplicación web de back-end en el mismo grupo de recursos y plan de aplicación. Dado que el nombre de la aplicación web debe ser único de forma global, reemplace <back-end-app-name> por un conjunto único de iniciales o números.

    az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --os-type Windows --location "West Europe" --runtime "NODE:16LTS"

  1. Cambie al directorio de la aplicación web de front-end.

    cd frontend

  2. Cree e implemente la aplicación web de front-end con az webapp up. Dado que el nombre de la aplicación web debe ser único de forma global, reemplace <front-end-app-name> por un conjunto único de iniciales o números.

    az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --location "West Europe" --os-type Linux --runtime "NODE:16-lts"

  3. Cambie al directorio de la aplicación web de back-end.

    cd ../backend

  4. Implemente la aplicación web de back-end en el mismo grupo de recursos y plan de aplicación. Dado que el nombre de la aplicación web debe ser único de forma global, reemplace <back-end-app-name> por un conjunto único de iniciales o números.

    az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --sku FREE --location "West Europe" --runtime "NODE:16-lts"

3. Configuración de las opciones de la aplicación

La aplicación de front-end debe conocer la dirección URL de la aplicación de back-end para las solicitudes de API. Use el siguiente comando de la CLI de Azure para establecer la configuración de la aplicación. La dirección URL debe tener el formato https://<back-end-app-name>.azurewebsites.net.

az webapp config appsettings set --resource-group myAuthResourceGroup --name <front-end-app-name> --settings BACKEND_URL="https://<back-end-app-name>.azurewebsites.net"

4. Front-end llama al back-end

Vaya a la aplicación de front-end y devuelva el perfil falso desde el back-end. Esta acción se asegura de que el front-end solicite correctamente el perfil desde el back-end, y que el back-end devuelva el perfil.

  1. Abra la aplicación web de front-end en un explorador, https://<front-end-app-name>.azurewebsites.net.

    Captura de pantalla del explorador web que muestra la aplicación de front-end después de completar correctamente la autenticación.

  2. Seleccione el vínculo Get user's profile.

  3. Vea el perfil falso devuelto desde la aplicación web de back-end.

    Captura de pantalla del explorador con perfil falso devuelto desde el servidor.

    El valor withAuthentication de falso indica que la autenticación aún no está configurada.

5. Configuración de la autenticación

En este paso, habilitará la autenticación y autorización para las dos aplicaciones web. En este tutorial se usa Microsoft Entra ID como proveedor de identidades.

También configura la aplicación de front-end para:

  • Conceder a la aplicación de front-end acceso a la aplicación de back-end.
  • Configurar App Service para devolver un token que se pueda usar
  • Usar el token en el código.

Para más información, consulte Configuración de la autenticación de Microsoft Entra para la aplicación de App Services.

Habilitación de la autenticación y autorización en una aplicación de back-end

  1. En el menú de Azure Portal, seleccione Grupos de recursos o busque y seleccione Grupos de recursos desde cualquier página.

  2. En Grupos de recursos, busque y seleccione el grupo de recursos. En Información general, seleccione la aplicación de back-end.

  3. En el menú de la izquierda de la aplicación de back-end, seleccione Autenticación y, luego, Agregar proveedor de identidades.

  4. En la página Agregar un proveedor de identidades, seleccione Microsoft en Proveedor de identidades para iniciar sesión en las identidades de Microsoft y Microsoft Entra.

  5. Acepte la configuración predeterminada y seleccione Agregar.

    Captura de pantalla del menú de la izquierda de la aplicación de back-end que muestra la opción de autenticación o autorización seleccionada y la configuración que se ha seleccionado en el menú de la derecha.

  6. Se abrirá la página de autenticación. Copie el id. de cliente de la aplicación Microsoft Entra en un Bloc de notas. Este valor lo necesitará más adelante.

    Captura de pantalla de la ventana Configuración de Microsoft Entra que muestra la aplicación Microsoft Entra y la ventana Aplicaciones de Microsoft Entra que muestra el identificador de cliente que se va a copiar.

Si se detiene aquí, tiene una aplicación independiente que ya está protegida por la autenticación y la autorización de App Service. En las secciones restantes se muestra cómo proteger una solución de varias aplicaciones al "fluir" el usuario autenticado desde el front-end hasta el back-end.

Habilitación de la autenticación y autorización en una aplicación de front-end

  1. En el menú de Azure Portal, seleccione Grupos de recursos o busque y seleccione Grupos de recursos desde cualquier página.

  2. En Grupos de recursos, busque y seleccione el grupo de recursos. En Información general, seleccione la página de administración de la aplicación de frontend.

  3. En el menú izquierdo de la aplicación de frontend, seleccione Autenticación, y después, seleccione Agregar proveedor de identidades.

  4. En la página Agregar un proveedor de identidades, seleccione Microsoft en Proveedor de identidades para iniciar sesión en las identidades de Microsoft y Microsoft Entra.

  5. Acepte la configuración predeterminada y seleccione Agregar.

  6. Se abrirá la página de autenticación. Copie el id. de cliente de la aplicación Microsoft Entra en un Bloc de notas. Este valor lo necesitará más adelante.

Concesión a la aplicación de front-end acceso al back-end

Ahora que ha habilitado la autenticación y autorización en las dos aplicaciones, cada una de ellas está respaldada por una aplicación de AD. Para completar la autenticación, tiene que realizar tres acciones:

  • Concesión a la aplicación de front-end acceso a la aplicación de back-end.
  • Configurar App Service para devolver un token que se pueda usar
  • Usar el token en el código.

Sugerencia

Si se producen errores y vuelve a configurar la autenticación/autorización de la aplicación, es posible que no se regeneren los tokens del almacén de tokens con esta nueva configuración. Para asegurarse de que se regeneran, debe cerrar sesión en la aplicación e iniciarla de nuevo. Una manera sencilla de hacerlo es usar el explorador en modo privado y cerrarlo y abrirlo de nuevo en este modo después de cambiar la configuración en las aplicaciones.

En este paso, concederá a la aplicación de front-end acceso a la aplicación de back-end en nombre del usuario. (Técnicamente, asignará a la aplicación de AD del front-end permisos para acceder a la aplicación de AD del back-end en nombre del usuario).

  1. En la página Autenticación de la aplicación de front-end, seleccione el nombre de la aplicación de front-end en Proveedor de identidades. Este registro de aplicación se generó automáticamente. Seleccione Permisos de API en el menú izquierdo.

  2. Seleccione Agregar un permiso y, después, seleccione Mis API><back-end-app-name>.

  3. En la página Solicitud de permisos de API de la aplicación de back-end, seleccione Permisos delegados y user_impersonation y, después, Agregar permisos.

    Captura de pantalla de la página de solicitud de permisos de API, con Permisos delegados, user_impersonation y el botón Agregar permiso seleccionados.

Configuración de App Service para devolver un token de acceso que se pueda usar

La aplicación de front-end ya tiene los permisos necesarios para acceder a la aplicación de back-end como usuario con sesión iniciada. En este paso, configurará la autenticación y autorización de App Service para proporcionarle un token de acceso que se pueda usar para acceder al back-end. Para este paso necesitará el identificador de cliente del back-end, que copió en Habilitación de la autenticación y autorización en una aplicación de back-end.

En Cloud Shell, ejecute los siguientes comandos en la aplicación de front-end para agregar el parámetro scope a la configuración de autenticación identityProviders.azureActiveDirectory.login.loginParameters. Reemplace <front-end-app-name> y <back-end-client-id>.

az extension add --name authV2
authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid offline_access api://<back-end-client-id>/user_impersonation"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <front-end-app-name> --body "$authSettings"

Los comandos agregan eficazmente una propiedad loginParameters con ámbitos personalizados adicionales. A continuación, se proporciona una explicación de los ámbitos solicitados:

  • App Service ya solicita openid de manera predeterminada. Para obtener información, consulte Ámbitos de OpenID Connect.
  • offline_access se incluye aquí por comodidad (en caso de que quiera actualizar los tokens).
  • api://<back-end-client-id>/user_impersonation es una API expuesta en el registro de la aplicación de back-end. Es el ámbito que proporciona un token JWT que incluye la aplicación de back-end como audiencia del token.

Sugerencia

  • Para ver el ámbito api://<back-end-client-id>/user_impersonation en Azure Portal, vaya a la página Autenticación de la aplicación de back-end, haga clic en el vínculo en Proveedor de identidades y, a continuación, en Exponer una API en el menú izquierdo.
  • Para configurar los ámbitos necesarios mediante una interfaz web en su lugar, consulte los pasos de Microsoft en Actualización de tokens de autenticación.
  • Algunos ámbitos requieren el consentimiento del administrador o del usuario. Este requisito hace que se muestre la página de solicitud de consentimiento cuando un usuario inicia sesión en la aplicación de front-end en el explorador. Para evitar esta página de consentimiento, agregue el registro de aplicaciones del front-end como una aplicación cliente autorizada en la página Exponer una API; para ello, haga clic en Agregar una aplicación cliente y proporcione el identificador de cliente del registro de aplicaciones del front-end.

Ahora las aplicaciones están configuradas. El front-end ahora está listo para acceder al back-end con un token de acceso apropiado.

Para más información acerca de cómo configurar el token de acceso para otros proveedores, consulte Actualización de tokens del proveedor de identidades.

6. Configuración de App Service de back-end para aceptar un token solo desde el front-end App Service

También debe configurar App Service de back-end para que solo acepte un token del front-end App Service. Si no lo hace, se producirá un "error 403: Prohibido" al pasar el token desde el front-end al back-end.

Puede establecerlo a través del mismo proceso de la CLI de Azure que usó en el paso anterior.

  1. Obtenga el appIdApp Service de front-end (puede obtenerlo en la hoja "Autenticación" de App Service de front-end).

  2. Ejecute la siguiente CLI de Azure, sustituyendo los <back-end-app-name> y <front-end-app-id>.

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.defaultAuthorizationPolicy.allowedApplications += ["<front-end-app-id>"]')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

authSettings=$(az webapp auth show -g myAuthResourceGroup  -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.jwtClaimChecks += { "allowedClientApplications": ["<front-end-app-id>"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

7. Front-end llama al back-end autenticado

La aplicación de front-end debe pasar la autenticación del usuario con el ámbito correcto user_impersonation al back-end. En los pasos siguientes revise el código proporcionado en el ejemplo para esta funcionalidad.

Vea el código fuente de la aplicación de front-end:

  1. Use el encabezado x-ms-token-aad-access-token inyectado de App Service de front-end para obtener mediante programación el accessToken del usuario.

    // ./src/server.js
const accessToken = req.headers['x-ms-token-aad-access-token'];

  2. Use el accessToken en el encabezado Authentication como valor bearerToken.

    // ./src/remoteProfile.js
// Get profile from backend
const response = await fetch(remoteUrl, {
    cache: "no-store", // no caching -- for demo purposes only
    method: 'GET',
    headers: {
        'Authorization': `Bearer ${accessToken}`
    }
});
if (response.ok) {
    const { profile } = await response.json();
    console.log(`profile: ${profile}`);
} else {
    // error handling
}

    En este tutorial se devuelve un perfil falso para simplificar el escenario. En el siguiente tutorial de esta serie se muestra cómo intercambiar el bearerToken de back-end para un nuevo token con el ámbito de un servicio de Azure descendente, como Microsoft Graph.

7. Back-end devuelve el perfil al front-end

Si la solicitud del front-end no está autorizada, el servicio de aplicaciones de back-end rechaza la solicitud con un código de error HTTP 401 antes de que la solicitud llegue al código de la aplicación. Cuando se alcanza el código back-end (porque incluye un token autorizado), extraiga bearerToken para obtener el accessToken.

Vea el código fuente de la aplicación de back-end:

// ./src/server.js
const bearerToken = req.headers['Authorization'] || req.headers['authorization'];

if (bearerToken) {
    const accessToken = bearerToken.split(' ')[1];
    console.log(`backend server.js accessToken: ${!!accessToken ? 'found' : 'not found'}`);

    // TODO: get profile from Graph API
    // provided in next article in this series
    // return await getProfileFromMicrosoftGraph(accessToken)

    // return fake profile for this tutorial
    return {
        "displayName": "John Doe",
        "withAuthentication": !!accessToken ? true : false
    }
}

8. Navegación hasta las aplicaciones

  1. Use el sitio web de front-end en un explorador. La dirección URL está en el formato de https://<front-end-app-name>.azurewebsites.net/.

  2. El explorador solicita la autenticación a la aplicación web. Complete la autenticación.

    Captura de pantalla del elemento emergente de autenticación del explorador que solicita permisos.

  3. Una vez completada la autenticación, la aplicación de front-end devuelve la página principal de la aplicación.

    Captura de pantalla del explorador web que muestra la aplicación de front-end después de completar correctamente la autenticación.

  4. Seleccione Get user's profile. Esto pasa la autenticación en el token de portador al back-end.

  5. El back-end responde con el nombre de perfil codificado de forma rígida falso: John Doe.

    Captura de pantalla del explorador web que muestra la aplicación de front-end después de obtener correctamente un perfil falso de la aplicación de back-end.

    El valor withAuthentication de true indica que la autenticación aún está configurada.

9. Limpieza de recursos

En los pasos anteriores, creó recursos de Azure en un grupo de recursos.

  1. Elimine el grupo de recursos mediante la ejecución del siguiente comando en Cloud Shell. Este comando puede tardar varios segundos en ejecutarse.

    az group delete --name myAuthResourceGroup

  2. Use el identificador de cliente de las aplicaciones de autenticación, que encontró anteriormente y anotó en las secciones de las Enable authentication and authorization aplicaciones de back-end y front-end.

  3. Elimine los registros de aplicaciones para las aplicaciones de front-end y back-end.

    # delete app - do this for both frontend and backend client ids
az ad app delete <client-id>

Preguntas más frecuentes

¿Cómo probar esta autenticación en mi máquina de desarrollo local?

La autenticación de este procedimiento se proporciona en la capa de plataforma de hospedaje mediante Azure App Service. No hay ningún emulador equivalente. Debe implementar la aplicación de front-end y de back-end y la autenticación de configuración para que cada uno pueda usar la autenticación.

La aplicación no muestra un perfil falso, ¿cómo se depura?

Las aplicaciones de front-end y back-end tienen rutas /debug para ayudar a depurar la autenticación cuando esta aplicación no devuelve el perfil falso. La ruta de depuración de front-end proporciona las partes críticas para validar:

  • Variables de entorno:
    • BACKEND_URL se configura correctamente como https://<back-end-app-name>.azurewebsites.net. No incluya esa barra diagonal final ni la ruta.
  • Encabezados HTTP:
    • Los encabezados x-ms-token-* se inyectan.
  • Se muestra el nombre del perfil de Microsoft Graph para el usuario que ha iniciado sesión.
  • El ámbito de la aplicación de front-end para el token tiene user_impersonation. Si el ámbito no lo incluye, podría ser un problema de tiempo. Compruebe los parámetros de la aplicación de front-end login en los recursos de Azure. Espere unos minutos para la replicación de la autenticación.

¿El código fuente de la aplicación se implementó correctamente en cada aplicación web?

  1. En Azure Portal de la aplicación web, seleccione Herramientas de desarrollo -> Herramientas avanzadas y, después, Ir ->. Se abre una nueva ventana o pestaña del explorador.

  2. En la nueva pestaña del explorador, seleccione Examinar directorio -> Sitio wwwroot.

  3. Compruebe que lo siguiente está en el directorio:

    • package.json
    • node_modules.tar.gz
    • /src/index.js

  4. Compruebe que la propiedad name de package.json es la misma que el nombre web, ya sea frontend o backend.

  5. Si ha cambiado el código fuente y tiene que volver a implementarlo, utilice az webapp up desde el directorio que tiene el archivo package.json para esa aplicación.

¿Se ha iniciado correctamente la aplicación?

Ambas aplicaciones web deben devolver algo cuando se solicite la página principal. Si no puede acceder a /debug en una aplicación web, la aplicación no se ha iniciado correctamente. Revise los registros de errores de esa aplicación web.

  1. En Azure Portal de la aplicación web, seleccione Herramientas de desarrollo -> Herramientas avanzadas y, después, Ir ->. Se abre una nueva ventana o pestaña del explorador.
  2. En la nueva pestaña del explorador, seleccione Examinar directorio -> Registros de implementación.
  3. Revise cada registro para encontrar los problemas notificados.

¿La aplicación de front-end se puede comunicar con la aplicación de back-end?

Como la aplicación de front-end llama a la aplicación de back-end desde el código fuente del servidor, esto no es algo que pueda ver en el tráfico de red del explorador. Utilice la lista siguiente para determinar que la solicitud del perfil de back-end se haya realizado correctamente:

  • La aplicación web de back-end devuelve los errores en la aplicación de front-end si se ha llegado a ella. Si no se ha llegado, la aplicación de front-end notifica el código de estado y el mensaje.
    • 401: El usuario no ha superado la autenticación correctamente. Esto puede indicar que el ámbito no está correctamente configurado.
    • 404: La dirección URL del servidor no coincide con una ruta que tiene el servidor.
  • Use los registros de streaming de la aplicación de back-end para inspección al realizar la solicitud de front-end para el perfil del usuario. Hay información de depuración en el código fuente con console.log, que ayuda a determinar dónde se ha producido el error.

¿Qué ocurre cuando expira el token de front-end?

El token de acceso expira después de un tiempo. Para obtener información sobre cómo actualizar los tokens de acceso sin requerir que los usuarios vuelvan a autenticarse con la aplicación, consulte Refresh identity provider tokens (Actualización de tokens del proveedor de identidades).

Pasos siguientes

¿Qué ha aprendido?

  • Habilitación de la autenticación y autorización integradas
  • Protección de las aplicaciones frente a las solicitudes no autenticadas
  • Uso de Microsoft Entra ID como proveedor de identidades
  • Acceso a una aplicación remota en nombre del usuario que inició sesión
  • Protección de llamadas de servicio a servicio con autenticación de tokens
  • Uso de tokens de acceso desde el código de servidor
  • Uso de tokens de acceso desde el código de cliente (explorador)

Pase al siguiente tutorial para aprender a utilizar la identidad de este usuario y acceder a un servicio de Azure.

 Creación de una aplicación segura de n niveles en Azure App Service